Deploy to shared hosting with Github Actions
Tutorial Hosting
A few episodes ago we were talking about deploying your websites automatically through git on your cpanel uh to your shared hosting now it worked quite well in the episode but some of the viewers have been reporting some problems with that git setup on the cpanel so i decided to create this episode with
Which i think it’s going to be much better workflow because first of all you are using github not git that you get with cpanel and we are going to be using github actions now this approach is much better because of course because with github you get much more options with your code versioning
And also it has github actions and and it’s much nicer to use so in this episode we are going to use github actions and github to deploy our website to the shared hosting that website is going to have a staging branch and a master branch so the master
Branch is going to go to our production and the staging branch is going to go to our staging server where our clients can see the changes that we made and if they approve them then we can push those changes to the production or to or to the
Live website so that is what we are going to be doing in this episode So first of all let’s create our project i’m going to call my project github actions i’m going to create a new file in it and i’m just going to call it index.html and in it i’m just going to put some boilerplate code and change the title
To github actions and we are just going to add an h1 tag and call this this is our production because this is going to be in our master so this is our production we’re going to i’m going to save this and now we are going to create a new folder called github
Or dot github and in it i’m going to create another folder called workflows and in it i’m going to add yml file which is going to be called master dot yml in here we are going to define our github actions which are going to push our site
To our shared hosting so as you can see right here on the left side you have github workflows and master yml and also i’m going to call create another file which is going to be called staging yml okay so now we have these two files now uh
What we are going to be using for these github actions is actually this section right here which is called ftp deploy and i’m just going to copy it of course you can find it in marketplace actions ftp deploy on github we are going to just copy this and then we are going to
Change some stuff to it so i’m just going to go to my code editor and in master.yml i’m just going to paste this in and now here it says on push so whenever you push something to your github repository this is going to trigger now we don’t want this to trigger every time
We only want this to trigger when you push something on the master branch so instead of doing just on push we are going to delete push and just leave on let me make this bigger sorry okay so and now i’m going to say push and i’m going to say branches
And then i’m just going to say master the indentation is very important inside of yml files so keep an eye on that so what we are saying right here when you push something to master then you deploy my code to my shared hosting so there are going to be some jobs web deploy
It’s going to get the latest code sync the files and push them to the server now you need to define the server and in my case that is going to be this so d3 dot fcomet.com of course for you it’s going to be something different
And now as you can see for user name and passwords we are using secrets so i’m going to also use a secret for the username secrets so it’s going to be secrets ftp username and secrets ftp password and there is one more thing that we need
To define at least i need to define it you may not need to define it if you are pushing the code inside the root uh of where you log in with your ftp but i have to define it right here and it’s going to be called server dear and
It’s going to be public html so it’s going to be called public html production.watchlearn.com okay save this and so when the master branch is pushed to a repository this is going to trigger next i’m going to copy all of this and just put it on the staging yml
And i’m going to call this branch staging okay and everything else stays pretty much the same except for this server there it’s not going to be production but it’s going to be staging and let me just show you how that looks so if we go to our browser
I have staging watchlearn.com if i refresh it as you can see it has nothing in it as of yet and also i have productionwatchlearn.com which is also just an empty folder okay so now that we have this set up uh let’s push our code for the first time to github
Now i’m just going to create a new repository i’m going to call it github actions actions and it’s just going to be public directory and that’s about it so we create the repository and now you can follow these instructions right here we are we want to push the existing repository from the command
Line so first of all i’m just going to go to my directory in my terminal and i’m just going to do git init so that we initialize our git and then i’m just going to get add something and going to do git commit it’s just going to be first commit
Press commit and now i’m going to go to the github and add this so we are just going to add git add origin so that git knows where to push our files and now all we have to do is do git push origin master okay great now if we go to github
Refresh this page as you can see now we have some files and folders in it and if you go to actions you already see you can already see that our first commit is actually committing and the github actions are doing something of course this is going to fail and this is going
To fail because we defined these secrets right here so ftp username and ftp password but git does not have those secrets set up just yet so how do you set up those secrets so you go to settings for your project you go to secrets and now here you create new repository secret click
It and as you can see it’s called action secrets new secret so the first secret is going to be called ftp username and here you would add your user name for your ftp of course and you can just add a secret now you can add a new repository secret which is
Going to be called ftp password just like we defined and your password of course your password for your ftp and you just add that secret now that you have added your username and your password secrets you can go to actions again you can click on this first commit and you can click
Right here rerun jobs and you say rerun all jobs and then you wait a little bit for this deploy to be finished and as you can see right now it says our deployment is finished and you can click right here to see all of the details so setting up the job
Getting the latest code syncing the files and so on so uh you can check out what is actually going on right here so as you can see we are uploading index html uh to our public html production watch learn and so on so if i now go to my production server production.watchlearn.com
Save it as you can see this is our production okay great so now let’s push something to our staging server and first of all we are just going to create a branch we are going to merge that branch to the staging branch and then we are going to push
All of that to github so first of all i’m going to create a new branch so git create branch and i’m going to call it staging okay and now i’m on a staging branch now i’m going to return to master check out two master and now from here i’m going to
Create another branch which is going to be called new feature you should always create your feature branches from master because if you have some other things going on on your staging branch that could conflict what you’re doing with things on the master branch of course so your master branch should always be
Clean and have all the approved features in it so i’m just going to call this new feature okay so now we are on the feature branch and now i’m just going to go into index.html and do so p this is our new feature okay save this and now i’m just going to go
To my terminal and here if i do ls as you can see i’m currently in a feature branch in new feature branch i’m going to go and get add everything git commit new feature and i’m going to push this to the new feature branch get push origin new
Feature okay so git push origin new feature we push this to the feature branch and now if we go to our github repository so right here and we go to actions as you can see nothing is happening right now but we pushed something to the feature
Branch and as you can see we have a master branch and the new feature branch right here right so nothing is happening because we of course we defined github actions to trigger only when you push something to master and only when you push something to staging
Okay so now in our terminal i’m just going to check out to the staging branch and i’m going to merge new feature branch into the staging branch new feature i’m going to get push origin staging and now we are pushing something to the staging branch now if we go to
Our github actions as you can see now this is deploying we are going to just wait just a little bit for this to be deployed okay so now that this has deployed we can check out our staging.watchlearn.com and as you can see it says it still says this is our productions because
Because i didn’t change that but it has this this is our new feature so i can go to staging again and change this this is our staging just to be more clear and we go to our terminal and just do git add git commit and just push it to staging
Go to our browser check if this works as you can see change text is currently deploying so now if we go right here it says this is our staging this still says this is our production and of course now if you want if your client approves the feature that you made
You can merge it into master branch and push it and that feature is going to be live on your live site of course read the documentation for ftp deploy as you can see there there are some options that you can set up here like protocol local directory state
Name excludes includes and so on and also you have some common examples for example if you want to do something with react angular or view then you would add some new steps so that they would build your project right so if you’re working on react uh the last step right here before syncing
Files would be npm install and npm run build and so on so check out the documentation and as you can see i think this workflow is much better than the workflow that we developed in the previous video because here you are actually using github and github is pretty great right now
You have private repositories for free and you have many many options including these github actions which as you can see can be very useful so this is it for this episode guys thank you for watching and i will see you in the next one You
We've already done a similar episode like this, but instead of #Github we used the Git module that comes with #cPanel. There are some problems with this approach, at least the channel's viewers have reported some problems. Instead of using cPanel's Git module, we now use Github and Github #Actions to deploy our site to staging and production servers. Github Actions makes this easy, as you'll see in the video. ————————————————– —————————————— ⭐ Kite is a free AI -assisted coding assistant to help you code faster and smarter. The Kite plugin integrates with all top editors and IDEs to give you smart completions and documentation as you type. You can watch it here: http://bit.ly/3qdjIc5 ——————————– ————————————————– ————– ### You can support my work on Patreon: https://patreon.com/watchlearn ### Follow me on social media Github: https://github .com /ivandoric Twitter: https://twitter.com/ivan_doric Instagram: https://www.instagram.com/watchlearntuts Facebook: https://facebook.com/watchlearntutorials
#Deploy #shared #hosting #Github #Actions
https://i.ytimg.com/vi/UNWIXYSZfZY/hqdefault.jpg
