Ok, I have to admit it took me some time to set up this site using Jekyll. The installation was actually pretty straightforward. But then you’re stuck with a generic blog template and have no idea how to customize it.
Installing a new theme
Being used to WordPress I mistakenly thought that I just would have to import some theme zip file, adjust some settings in the config file and commit the changes. Would that it were so simple!
Some themes can be installed using a ruby gem. I tried doing this with several themes on this list, but with little success. Another option that was suggested in Stack Overflow involved making a branch of the existing git repository, pulling in the new theme and then merging the changes. This seems like the correct way of handling a theme change, but a bit complex for someone just getting started with Git.
In the end I just found a theme I liked, cloned it to a local directory and started customising it.
Because I had cloned the repo, it was still linked to the original remote of the theme developer. To publish it with GitHub Pages I needed to link it to my own remote. I’m sure there’s a better way to do this, but I just made a new directory copied all the files into it and initiated a new git repo. Then I added my own remote to publish the site.
Why did I choose Jekyll to build my site?
The main reason I initially became interested in Jekyll is that it allows you to build a minimalist static site. Even though this proved to be harder than I thought, it was a good learning process.
For an aspiring developer Jekyll is actually the perfect way to build a site. It forces you to use essential developer tools like the command line, Git and a (markdown) text editor.
As part of the Odin Project curriculum I had to replicate the Google home page using html and css. You can see the result here.
The most difficult part was figuring out how to add the top and bottom navigation bars. There are many different ways to do this, for example using the html5 <nav> tag. I just used a regular unordered list <ul> with <li> items. Then I removed all the styling in css.