This post is outdated and I simplified my setup a lot. I’ll try to cover my current setup in one of the future blog posts.
Few days ago I got a following message on LinkedIn.
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.
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.
Smashing Magazine has a post on why static sites are awesome.
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.
I keep this blog on GitHub pages (obviously) and I would recommend you to do the same.
If you want to start from scratch, start with official quickstart guide.
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.
That’s it!
Now you have your own blog. Custom domain names are also easy to setup.
This part is for fun only and direct result of my experiments. They ended up not so practical, but I learned a tone playing with random things. Fun times, but now I would go vanilla.
I wrote a couple of posts about using Jekyll already, and you can find them under Jekyll category.
First thing I did was to add live reload for posts, Javascript and SCSS files. You can read about it in this post but I plan to rewrite it as I feel it could be done better.
Then I added a couple of custom plugins. But as a security measure, GitHub has a limited set of Jekyll plugins you can use.
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).
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.
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.
Staticman also supports reCaptcha and Aksimet for spam protection.
Check their demo and getting started guide.
If you want to explore more static site generators check this post, which lists the most popular ones in 2017.
Two that drew my attention are:
Gatsby - github.com/gatsbyjs/gatsby
Because it is written in Javascript, and you create your site using React (and it is pretty obvious by now that I love React).
Hugo - https://gohugo.io/
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.
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.
No comments, be the first to comment