Did you know that you can navigate the posts by swiping left and right?

How to set up an amazing blog with jekyll, Amazon S3 and Travis-CI (Part 3)

03 Mar 2017 . category: Dev . Comments
#website #blog #tech

It feels like anyone who wants to be in the technology space needs a website/blog, and I could not be left out! I decided to venture into running my own website, and set out with the goal of making it fast and cheap. In theory my website will run for the rest of my life, hence working a bit extra upfront to develop a cheap solution will save me money in the long run. Plus I get to learn about a lot of interesting web technologies!

This is a three part series, each focusing on a different aspect of the process. Part 1 explains how to create the website, Part 2 details how to set up the “server” and Part 3 links the website to the server.

Note: I wrote this mainly for myself as a reference. It’s written to explain my thoughts and the steps I took. If anyone finds something confusing please let me know and I’ll try to help you out. It was a bit difficult to decide how in-depth to make the guide.

  • Part 1 - Link
  • Part 2 - Link
  • Part 3 - Below

Part 3 - Deploying the Website with Automatic Deployment

In part 1, we set up the website to run locally and in Part 2, we set everything up. Now we are going to automate the uploading.

Knowing me, if it is not easy to update my blog, it will never get done. Continuous integration to the rescue! I am using Travis CI, which ensures that whenever I push a new commit to github, travis-ci runs a little script that builds the HTML files using Jekyll and uploads it to amazon s3.

This, coupled with an online github editor like prose, I can update my blog directly from any computer with a web browser and have it show up live within a few minutes. I pat myself on the back for having sorted this out.

Upload Permissions

Instead of logging in each time with your main AWS account, we will use IAM user to create a “user” that only can upload into the hosting bucket. Find the IAM Management console and create a new user. I called my new user simonlee.me for clarity but anything should work. Do not forget to write down the user’s access key ID and secret access key as you will need them later to log in.

For the new user, click through the menus and create an inline policy, then select a custom policy. Use the excerpt below to achieve the desired effect to allow managing of the bucket from your new user.


    {
      "Statement": [
      {
        "Action": [
          "s3:*"
          ],
          "Effect": "Allow",
          "Resource": [
            "arn:aws:s3:::simonlee.me",
          "arn:aws:s3:::simonlee.me/*"
            ]
      }
      ]
    }
  

Enable Continuous integration

Enabling continuous integration with Travis-CI is very easy. Just enable CI on the Travis-CI website, selecting with branches should trigger it, and create a .travis.yml file in your repo with:


    language: ruby
    rvm:
    - 2.2
    script:
    - bundle exec jekyll build --config _config.yml,_config_deploy.yml
    - bundle exec htmlproof ./_site --only-4xx --disable-external
    deploy:
      provider: s3
      access_key_id:
        secure: qIIRqByYhbKd/6...
      secret_access_key:
        secure: u2RvprP6CzE4...
      bucket: simonlee.me
      skip_cleanup: true
      region: eu-west-1
      local_dir: _site
    branches:
      only:
      - master
    env:
      global:
      - NOKOGIRI_USE_SYSTEM_LIBRARIES=true
  

Travis-CI has built in functionality to upload onto S3. I’ve set the option to skip the cleanup of old files as I believe it costs, but keep in mind the old files will be publicly available.

Adding secure credentials

Make sure to use encrypted secrets to store your keyID and access key. You need to install the Travis ruby helper once and encrypt your secrets.

Install the travis command line tool with


    gem install travis
  

Create the travis CI as above, and add encrypted keys with the following two commands.


    travis encrypt --add deploy.access_key_id

    travis encrypt --add deploy.secret_access_key
  

Adding automatic checks

If you carefully checked the Travis config, you would have noticed I’m using html-proofer to do a build check. Don’t forget to add this package to your gemfile.


    gem 'html-proofer'
  

If you ever want to check your website locally, just run the below command.


    bundle exec htmlproof ./_site --only-4xx --check-favicon --check-html
  

However this mostly checks the theme html is in order. When I just add content, I do not use any options


    bundle exec htmlproof ./_site
  

Conclusion

At this point, every time you do a git commit the website should automatically be pushed to the S3 bucket if the build passed.

The final solution is dirt cheap and has a lot of convenience. For now I’m happy, but if I make any changes I’ll update this post series.

I had a lot of fun setting up this website and tweaking it to my liking, but now the hard part starts of actually making content for it.

Here are a collection of links I found helpful while setting up my blog, and it might be helpful to you as well. They are in no particular order.


Me

Simon Lee is a nice person. He lives in Singapore, where he works on cryptocurrency trading tools. In his spare time, Simon likes to eat pizza.