Did you know that you can navigate the posts by swiping left and right?
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.
In the first part of the series, we are creating the actual HTML files that make up our website.
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.
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:
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.
** 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.
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.
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.
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
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!
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.
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.
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 ''
So we built the website on our local machine, nice! In the next post we walk through setting up the domain and server.