Website deployment can be like most things be easy or hard, when implemented correctly it can save hours of labour and heartache.
Once upon a time I used to code a website with Sublime, compile with gulp and then upload the finished code to the hosts using Filezilla, this was fine but I never felt like I had any history and it was difficult to revert back to a previous version of the website if there was a problem.
I had become unhappy with a previous hosting company and started to look around for another, I finally settled on Siteground mainly because of the great reviews they attracted and their up-time is excellent. While searching for a new host I came across an article about deploying with SSH/SFTP and thought this would be worth following up.
After quite a lot of research I ended up with a simple but effective deployment chain, which works really well, it gives me some history and also the ability to revert back to a previous version quickly and easily if necessary.
- Code with Atom.io
- Move to GitHub repository with Github Desktop
- Deploy with Deployhq
- Host with Siteground
How it Works
The first part of the process has only changed slightly in that I now code with Atom.io rather than Sublime, I find it suits my needs and is very stable, (my version of Sublime, would quite often freeze and crash), and I still compile using gulp
I set up a developer account with GitHub, this cost $7/month and gives you unlimited private repositories, but did not add any repositories at this time.
The next stage was to download and install GitHub Desktop (I use a Windows-based Laptop).
- Download and install the GitHub Desktop.
- Open GitHub Desktop.
- Follow the prompts to sign in to your account.
- Configure your user information (this only happens the first time you run the application)
Once installed the next step was to add a local repository, by going File / Add Local Repository, follow the prompts by adding the folder with your website code in, once directed back to the main page, in the bottom left of the screen give the commit a summary and description (for the first commit I tend to use Initial Commit) and push to repository using the Master Branch.
A pop-up appears, fill in the details and tick the box to add a Readme file.
Once completed, if you log into your GitHub account you will find automagically that the repository you pushed is uploaded.
The next stage was to set up an account at Deployhq, I opted for the £6/month Basic package which gives 10 projects and unlimited deployments, enough to get started with.
Before you can deploy your website you will need to set up an account with a hosting company (unless you have your own server), I choose Siteground for this, again depending on your needs they have three plans, for most simple websites the startup plan at £2.75/month is fine.
Once your hosting account is set up, to deploy using Deployhq you will need your Hostname and Username, which is the same as your cPanel Username (see images below on where to find them) and you will also need to be logged in.
Back to Deployhq, time to add a Project, first give the Project a name and choose where the repository is hosted, in my case GitHub, Deployhq will ask you to select which repository to use, select the correct one and that repository will be added to the project, all painless and easy.
Next is to add a Server to the Project. first give it a name and then from the Protocols select SSH/SFTP, fill in the fields, this is where you add your Hostname and Username, be sure to change the port to 18675 from the default 22 or you won't connect,
next select 'Use SSH key rather than password for authentication?', this will then display a SSH key, copy this, then back to your Siteground account.
At your Siteground account navigate to the cPanel, and at the very bottom of the page find SSH/Shell Access
, paste your SSH key into the box 'Upload SSH Key' and upload the key.
Now it's back to Deployhq, add a deployment path, this would usually be 'public_html/' but if you are using a sub-domain will change, next add in an email address if you want notifications on deployment and then hit the Create Server button at the bottom of the page.
Back to your Project and you are ready to deploy, hit the Deploy button and watch the magic happen, once the process is completed your website should be ready to view in your browser.
The beauty of this method of working is that now when any code changes are made, it is simply a case of using GitHub Desktop to push the commit and then using Deployhq to deploy, and only files that have changed will move through the process rather than every file for the site.
The next stage is to add automatic deployments on file change, but that's for another post.