What Is the Easiest Way to Deploy from Github to a Web Server?
I’ve written before on how to do this the hard way. Now let’s look at the easy way.
I’ll assume you already have a repo setup on Github, and that you are setup to push to it.
Setup on Circleci
I like Circleci’s pricing model: it is free. You can pay extra when you want to accelerate your builds — something you may want to do in a company setting.
Create an account
Fairly straight forward. Hit “Sign up” and connect with Github.
Create a project
In the left sidebar, go into “Project”. Then in the upper right corner, click on “Add project”. Find the repository you want to setup.
Once you found it, click “build project”. Let it build. It will tell you at the end that no Circleci setup was found. That’s expected, you’re missing the
Add a deploy key
You may want to deploy to a simple server like DreamHost, or to an S3 bucket on Amazon. Either way, you’ll need to create a secure access to these places.
Setup ssh keys on your web server (not sure how to do that? Look it up!). And copy your private key.
Next, go into your new project’s settings on circleci. Find the “Permissions” section in the sidebar navigation. Go into the “SSH Permissions” section. Add your private key. This will allow Circleci to deploy to your web server.
Create a circle.yml file
Create a new file
circle.yml at the root of your directory.
If what you have is a simple static site, then copy this code below.
- The first part allows us to turn the tests off. When you’re ready to add tests to your projects, you can remove that section, or customize it.
- The second part is the deployment section. In this case we’re saying, when the branch master is pushed, do this. The command will push your entire directory to the directory to set on your server.
- scp -r * email@example.com:/path-to-your-website.com/
Let’s say you’re using react for instance. In that case, the files need to be built before being served. They’ll also be stored in a
build directory. So then your
circle.yml file might look more like this:
- yarn run build
- scp -r build/* firstname.lastname@example.org:/path-to-your-website.com/
You can find more ways to customize your
circle.yml file here. For instance, you could set new branches to deploy to a staging site. It’s so easy!
Now that your
circle.yml file is setup, it’s time to test the deploy. Make sure you add it and commit it. And push to master. Go watch your build on circle.ci!
Once the build passes, your code will be up on your server!