I recently moved my website from Github pages to Netlify. The reason I did this was because Netlify provides free static hosting through a worldwide CDN or in other words through a content delivery network. As a result my website is now blazingly fast anywhere around the world. Netlify CDN automatically optimizes my website resources so that they can be downloaded faster. Netlify is also convenient as it supports continuous integration which meant each time I made some modification and pushed to Github my site is automatically regenerated and deployed. Moving to Netlify also meant that I could use an SSL certificate with my custom domain for free. How cool is that?
The reason I write this post is that soon after I moved to Netlify I noticed that there was a build counter on their console that recorded how many times my site had been deployed and this build counter was red and perilously close to the 50 build mark. A bit of nosing around made me realize that Netlify only supports 50 automatic deployments from Github a month. But manual deployments were still free. I could drag and drop my website to upload but that was about it.
To rectify this major inconvenience I searched around for ways to make this process as painless as possible. I finally stumbled on Travis CI. Travis CI is a continuous integration platform for developers to test their code on and was free for open source projects. But I found out that many people were using Travis CI for deploying jekyll to a variety of places. Travis CI is simple to use but the learning curve was a bit steep. I found the process very irksome since there was scarcely any resources where I could find help outside of the documentation. So I decided to write a how to style post on manually deploying to Netlify using their REST api.
There are some files to added and scripts to be tweaked. In the root of your repositorysitory create a
.travis.yml file. This is how you let Travis know what you want to do. Leave it empty for the moment. Create a two new bash files:
deploy.sh in a folder named
scripts in the root folder of your repository. Make sure you have your
Gemfile setup. Edit the
Gemfile to include two new lines,
gem 'jekyll' and
gem 'rake'. Then make a file named
Rakefile in your root folder and add the following code to it.
task default: [:test] task :test do ruby "tests.rb" end
Now edit the
build.sh file to add the following.
#!/usr/bin/env bash set -e # halt script on error jekyll build
Then edit the
deploy.sh file to include this code.
#!/usr/bin/env bash set -e # halt script on error zip -r website.zip _site curl -H "Content-Type: application/zip" \ -H "Authorization: Bearer $NETLIFYKEY" \ --data-binary "@website.zip" \ https://api.netlify.com/api/v1/sites/<Your site domain name>/deploys
Editing the .travis.yml file
Open up the
.travis.yml file you created earlier and add the following code.
language: ruby rvm: - 2.1 # install jekyll from gemfile install: - bundle install - rake - chmod +x ./scripts/build.sh - ./scripts/build.sh # build site scripts: true # deploy to netlify after_success: - chmod +x ./scripts/deploy.sh - ./scripts/deploy.sh # branch whitelist, only for GitHub Pages branches: only: - master
Now create a file named
tests.rb in the root of your repository with the following code.
puts "Captain! I'm fine!"
Make a new Travis CI and connect it to your Github account. Follow the instructions to activate your repository and push to Github for your first build. The build will fail, don’t worry. In your Travis CI dashboard you can find the More Options button to your right. The settings for your repository will be there. In your settings page you have the option to add new environment variables. Setting up an environment variable enable you to access that variable in your bash script. Before you create an environmental variable you must create a Netlify personal access token for yourself. You can get the personal access token from here. Make sure to keep it safe. !!!Not in your repository!!!
Create a new environment variable called
NETLIFYKEY and set it to the value of the personal access token.
Make some new changes to your site and push to Github and see the magic happen.
Travis essentially gives us a command line so that we can work with it. The
.travis.yml file is used to indicate which scripts have to be run. First
bundle install is run so that we have all our dependencies install. The rakefile is just there because Travis runs
bundle exec rake automatically and we’d get an error if we didn’t have some thing in it. Each shell script we run must be made executable with the
chmod +x command. Then the
./ command runs the shell script. The first script
build.sh runs the command
jekyll build to generate your site into a folder called
_site. The second script is run only if we have a successful build.
deploy.sh first takes the content of the folder
_site and then compresses it to make a zipped file
website.zip. Then we use cURL to take this file and deploy it to Netlify using their REST API.
Update fixed this
Frankly, I think you shouldn’t use the
deploy.sh script if you’re hosting your source code on a public Github repositorysitory. As you can see, you have a personal access token in that file and anyone can read it since it’s on a public repository. I am currently trying to work around this problem by using gpg encryption. I’ll post updates as I go along. I you have an idea that’ll help me email me at firstname.lastname@example.org
I solved the security problem caused by keeping the key on your public repository by using environment variables. If you included the personal access token in your
deploy.sh file make sure to change it to the above. !!!And make sure that you permanently delete any previous commits that includes this change from your repository.!!!
JenThis is so awesome