My friend laux_es and I have been building this silly website in the past few weeks (although he's been doing most of the work TBH). It's just an static website that we created as a joke, but the good thing is that it allows us to explore technologies and services that we weren't using before.
The whole website is just a bunch of static files, so we thought on using Github Pages to host it. It's free, it's easy to use, and by using it we don't need to worry about servers, web services, software updates, etc.
Our project is as a single-page website, which just uses HTML, SCSS and a template engine called Pug. You could say it's pretty simple stuff (compared to most JS-based webapps out there!). After all, we just wanted to build a simple website, so we didn't actually need anything more.
Deploying single-page websites
Publishing a website like this usually involves building the source code, concatenating all the files together, minifying the assets, and then uploading the result somewhere so it's visible to visitors.
In our case, we need to:
- Compile the views using Pug.
- Compile all the SCSS code into CSS.
- Minimise all the images.
- Publish the result in Github Pages.
We've been using gulp to do all these steps in just one command:
gulp publish (Check the gulpfile for more info!)
But that wasn't enough! Since we're lazy developers (and we like to automate stuff) we wanted something automatic. Our objective was to modify a source file in the repo, push the change, and automatically see that change in the website after a few seconds / minutes.
In order to do that, we need some system that is notified when we modify the source code of the project, and when that happens, does the publishing process described above. And that's where TravisCI comes in handy!
Using TravisCI for publishing
TravisCI is a cloud-based continuous integration service, free of charge for OS projects, integrated with Github. @carrodher wrote a post (in Spanish) a few months ago with a basic introduction to TravisCI.
When you push a change to a repo, TravisCI will trigger a job to do whatever you configure it to do. In our case, we configured it to build our project and deploy it to Github Pages.
To do that, you create a file called
.travis.yml at the root of your project where you specify the steps TravisCI needs to perform on each job.
In our case (check below) we just execute a file called deploy.sh that, you guessed it, builds and deploys the code.
dist: trusty sudo: false group: beta language: node_js node_js: - stable before_script: - npm install -g gulp script: bash ./deploy.sh env: global: - ENCRYPTION_LABEL: bbeeacbdcc68
I just modified some parts of the deployment script to simplify it for our particular case. I recommend you to check out the original article if you want to understand all the steps involved in the process.
In order to deploy our code to Github Pages, TravisCI needs to push the result of the job to a remote branch called
gh-pages. To do so, you need to give TravisCI read/write access to your repo so it can push code to that branch.
We will be using a RSA public/key pair to do that. Github will hold your public key, and TravisCI will use the private key to authenticate. TravisCI has access to all files in the project repo, so we'll put the private key there. But first, we need to encrypt it so only TravisCI can read it.
To do that, you need to:
- Create a public/key RSA pair.
- Upload the public key to the settings page of your Github project, so the associated private key can be used to read/write to/from that repo.
- Encrypt the private key file using a CLI tool provided by TravisCI.
- Upload the encrypted private key file to your repo. For instance, here's ours: deploy_key.enc
The deploy script decrypts the private key file and adds it to SSH so we can run git commands in TravisCI to push changes to the repo.
I didn't want to add all the technical details about how to do all that here for the sake of brevity, but you can check all the details in the original post by @domenic. You can also find more info about how file encryption works in TravisCI in their official docs.
After setting all this up (which took like an hour), Angel and I can modify the source code of our website and let TravisCI do all the building and publishing!
Right now, it takes a bit more than a minute for Travis to build and publish our code when we introduce a change in our repo.
That's basically it! I loved how easy it was to use Github Pages and TravisCI to host and deploy a basic website like this. It takes too much weight off the shoulders of developers by letting you serve your content without worrying about servers, vulnerabilities, services... and all of that, free of charge!
Remember to check the links in the article if you want to know more, and let me know on my twitter account if you have any question!