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 picked circleci but you could re-create this setup with other services such as Codeship, Deployhq, or more.

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 circle.yml file.

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.
test:  
override:
- "true"

deployment:
production:
branch: master
commands:
- scp -r * your-username@your-server.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:

test:  
override:
- "true"

deployment:
production:
branch: master
commands:
- yarn run build
- scp -r build/* your-username@your-server.com:/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!

Deploy! 🚀

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!


Questions? Get in touch at marineboudeau.com or on Twitter @marineboudeau.