Myblogsetup

27 Sep 2017

Hi Stanko! I’m a junior front-end web developer and I recently found your amazing blog and fell in love with it. Since you don’t have any other social media, I decided to contact you trough here even if it’s not ideal. I was wonder what CMS you were using and if you could do a blog post about it ?

So here it is, post about my blog setup.

Jekyll

I’m not using a dynamic CMS but a static site generator called Jekyll. Static site generators take different approach to making websites.

Instead of having a database, pulling data from it and dynamically building your pages, static site generators generate all the pages only when there are changes to the site. No moving parts, just plain HTML files. This approach is more secure, makes caching much easier and boosts performance.

Static sites are not limited to blogs. Bigger websites are also easy to build, once you get a hold of it. There are agencies that are even doing it for client work.

It comes at the price that once it’s built you need to deploy it somewhere. And you don’t have fancy CMS interface, only good ol’ markdown files.

Build and deployment part is easy, just let GitHub pages1 do that for you.

Handling a git repo with a bunch of markdown files should be fairly straight forward for any developer or tech savvy person. If you feel this is a big burden, then static site generators might not be for you.

1 There is Netlify as well, which I never used myself, but I’ve heard good things about it.

How to start your own

I keep this blog on GitHub pages (obviously) and I would recommend you to do the same.

Or you can start the same way I did - from the great Lanyon theme. Just fork it’s repository and rename it to [your github username].github.io. GitHub will automatically build and publish it on the same URL. Build and publish will happen every time you push a change to your blog’s repository.

Custom plugins and Travis CI

GitHub Pages is powered by Jekyll. However, all Pages sites are generated using the –safe option to disable custom plugins for security reasons. Unfortunately, this means your plugins won’t work if you’re deploying to GitHub Pages.

To be able to use custom plugins, I created a bit more complicated setup using Travis CI. Again there is a blog post about that as well.

What I actually do? I keep my Jekyll files on the source branch and when I push to it, that triggers a build on Travis, which then pushes generated site back to the master branch. Once it is done, GitHub publishes it.

Once you set it up, it is pretty invisible, but I’ll probably bail on it once I rewrite my local setup (switch from gulp to webpack).

Source code

Complete source code of my blog is available here. But again, I recommend you to take the easy way, without custom plugins and Travis setup.

Comments (or any other dynamic content)

You guessed it! Sites generated by static site generators are static :) So there is no user generated content.

But as comments are important part of the blog I researched how to add them. Most people recommended Disqus, but I didn’t really want to add a bunch of 3rd party code. And to make things worse, it seems they are tracking their users).

Luckily there is Staticman. It is an open source project which enables user-generated content to be added on static site. You need to set it up, and then post data to their API. Staticman will then create a pull request to your site’s repository. Once you merge it, GitHub will regenerate your site and user-generated content will be available.

Pull requests are moderated by default and you need to merge them yourself. Or you can enable auto-merging. I use moderation myself.

Because it has the largest community after Jekyll, and offers some stuff out of the box, which others generators don’t. I almost switched to Hugo, but I decided not to, as benefits are minimal compared to my current setup.

Happy blogging! :)

Kudos to Sébastien who inspired me to write this post. Hopefully it will get at least one person to start blogging. Trust me, it is not that hard. If you do, please share your blog in the comments.