I had been thinking about starting a blog for months now, but was basically paralyzed by perfectionism. My desire to get it just right from the get-go had kept me from just doing it. A few months ago I started programming in golang, and immediately fell in love with it, so after seeing that a static site generator was written in golang, I decided to try it by building my blog.
What is a static site generator?
Static site generators are programs who take content, typically stored in flat files, apply layouts and store the results in static html files.
The advantages are:
-
Speed: All your webserver has to do is serve static content, no time and processing power is wasted regenerating the same page over and over every time someone visits your site.
-
Version control: Because everything is stored in flat files, it’s easy to manage your content with git, allowing easy collaboration on files and the ability to rollback changes.
-
Security: You are not hosting the admin page on the server running your website, making it more secure to attacks.
-
Less things to manage: You don’t have to manage the database, the blogging engine itself and the caching layers.
-
Host everywhere: Because it’s static content it works with every webserver, with object storage services like s3 and google cloud storage and with services like netlify.
-
You have a lot of choises: At the time of writing staticsitegenerators.net lists 459 static site generators.
Disadvantages:
-
Not all static site generators have a graphical user interface (difficult to use for non technical people).
-
You have to redeploy the site every time you change something.
-
The only way to get real time content is with javascript.
If you don’t like static site generators but you want to create a blog, I’d suggest trying Ghost, you can install it on your server or buy the hosted version from their website.
Building my blog
After deciding I wanted to use Hugo as my static site generator I started by modifying a very simple theme to make it look like I wanted. After a while I hit a brick wall, I was having weird problems with the html minifier and I hated the syntax highlighter for code snippets in the blog posts. If I wanted to do syntax highlighting server side I would have had to install pygments, a python syntax highlighter, which would have meant losing the portability that go was giving me by installing an external dependency. The other option would have been to use a client side syntax highlighter, which would have made my page weight higher and would not work for clients with javascript disabled. Besides which it is using a custom syntax instead of github flavoured markdown, which i find stupid.
But even if I was willing to do all of that the other problem is that hugo is missing simple features like the ability to show the first paragraphs of a blog post in the blog’s home page. Instead, Lektor, a python static site generator, can be easily extended with plugins, for example that functionality I was talking about is easily achievable by installing the Lektor Mardown Excerpt Plugin. So in less than 2 days since I started I migrated to Lektor.
After a while I decided that even tho I liked having a light site I could make the experience feel even faster by adding some javascript, I needed it anyway for the fitvids plugin, a jquery plugin to make youtube and vimeo videos fit into pages, so I decided to add an ajax progress bar similar to the one used by medium and youtube.
I used history.js to maintain the browsing history while changing pages using ajax, and NProgress to generate the progress bar on top of the page, but then I noticed I was using the history.js html5 only version, because I don’t care about supporting old browsers simply to be able to show a progress bar and have the page you clicked on fade in, so I decided to reimplement it myself to shave off another dependency.
I added webpack to bundle all of the javascript and css files into a bigger file, it isn’t really necessary because I’m not loading tons of external files but I wanted to try it anyway. I finished a few hours later, I was able to do everything simply by following the documentation and by looking at the lektor website github repo. I also used these 3 lines of python to be able to import the pygments style css from the main scss file.
@build/env/bin/python3 -c \
"from pygments.formatters import HtmlFormatter ;\
formatter = HtmlFormatter(style='monokai') ;\
print(formatter.get_style_defs())" > webpack/scss/pygments.scss
Hosting
I’m hosting this blog on a digitalocean droplet with NginX and Let’s Encrypt. At the moment I’m deploying manually since I have to build my website locally anyway to see how the changes look before publishing them.
What I’m going to post
So, now that I have a blog, I’m going to use it to announce projects and to write down how I solve some problems with programming and Linux, and maybe I will also write some posts about photography, who knows.
There’s also an atom feed at the bottom of this page so that you never miss any of my future posts. See you soon!
Paolo.