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 1)

17 Feb 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 - Below
  • Part 2 - Link
  • Part 3 - Link

Part 1 - Creating the Website

In the first part of the series, we are creating the actual HTML files that make up our website.

Web Framework

The web framework can be thought of as the code that runs the website. It is a set of tools that helps you produce the HTML files and help you with the development of the website.

Selecting a framework

The first framework everyone suggests when you want to start a blog is wordpress. WordPress is great, but in my opinion a bit overkill. It requires a server which is expensive and requires constant thought that it has not crashed. In the end I went for jekyll, which generates static websites. I believe the benefits jekyll brings over any other solution are:

  • Get to learn a bit of programming/coding as it’s written in ruby
  • As it is popular; the skills I learned should be more marketable.
  • It is compatible with github pages, and can be hosted for free
  • It can be customised quite heavily
  • The final website is static, so hosting will be cheap and easy as it doesn’t require a server.
  • It has to be used from the terminal (i prefer the command line)
  • It works with plain text files so it can be version tracked
  • Since it is static and does not require any database calls, it will be fast and lightweight.

If you agree with some of my reasoning but do not like the sound of Jekyll, I would suggest looking at one of the below:

All three seem quite good but does not have the same adoption rate as jekyll IMO.

Setting up Jekyll

** Update: I no longer use Cloud 9, I just develop locally now **

I use Linux, so setting up Jekyll is quite easy. If you aren’t running Linux, I might suggest using Cloud 9 which provides you a Linux box in you web browser. (I did use it for a while and it’s great, but I have stopped using it as lost interest).

Whether you are on Ubuntu locally or through cloud 9, to install Jekyll we need to first install the ruby dependency


    sudo apt-get install ruby
  

Then we can install Jekyll and bundler


    gem install bundler
  

That should have install Jekyll (and a package manager bundler)

Before we run Jekyll let’s grab a template or theme, because ain’t nobody got time to start from scratch.

Web design

A proper web developer would do their own design, but I am not one and would not be very efficient at creating a layout. I also want the time towards the website to go towards writing content rather than fiddling with the design. There are plenty of open-source themes that you can bootstrap to your liking. A couple nice ones I found:

I am using MMistakes So Simple for this blog.

Working with the theme

There are many ways start using a theme you found. Forking the git repo directly probably is the easiest but that has some limitations. I import my theme as a subtree module. I’ll go through both.

Forking

Start by forking the theme on github and deleting any branches you don’t need. I also like to rename the repo to the website as well. Download the forked repo with a normal


    git clone https://[email protected]/simonlee
  

To keep our fork up to date with the upstream changes, we first have to configure a remote for a fork and the sync the fork. Run the following in the Jekyll folder


    git remote -v

    git remote add upstream https://github.com/mmistakes/so-simple-theme.git
    
    git fetch upstream

    git checkout master
    
    git merge upstream/jekyll3
  

Remember the upstream URL and branch will be different for each template!

Adding as a Subtree

I like to use the Jekyll theme as a subtree module. This allows me to cleanly separate my content to the content of the theme. I can also reasonably easily change theme without worrying what files need to be kept.

To do it this way, start with a clean repo and enter the following commands to add the theme as a subtree.


    git remote add -f jekyll [email protected]:mmistakes/so-simple-theme.git

    git merge -s ours --no-commit --allow-unrelated-histories jekyll/master

    git read-tree --prefix=jekyll/ -u jekyll/master

    git commit -m "Subtree merged in Jekyll"
  

These commands add the theme git repo into ours in the subdirectory jekyll, ingorning the git history of the theme.

To update at a later date, run


    git subtree pull --prefix jekyll jekyll master --squash
  

Running it this way, I keep my content at the root directory and then copy the files into the Jekyll folder at production time. This results in the key jekyll folders posts, images, and assets being in the root folder.

Configuring the theme

The configuration will need to be tweak to your website. The settings that are available and that you need to change will vary depending on what theme you choose. You are probably best of referring back to the documentation of that theme.

Starting up your website locally

Finally our website is ready (bar any content!). Lets spin up the Jekyll website locally to have a look. Build and serve the website with the following commands in the Jekyll folder


    bundle install

    bundle exec jekyll build

    jekyll serve --port 4000 --host 0.0.0.0 --baseurl ''
  

If you are using cloud 9, replace the last command with the line below.


    bundle exec jekyll serve --host $IP --port $PORT --baseurl ''
  

Part Wrap up

So we built the website on our local machine, nice! In the next post we walk through setting up the domain and server.


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.