My new blog
I haven't written any posts for some time but have upgraded my blog site. It is now served as a bunch of pre-generated HTML files instead of being a server-side application.
The reasons for rewriting my blog system were:
- More Markdown features including tables
- Better Markdown editor (VS Code)
- Editor integration with a grammar checker (LanguageTool)
- Better template system (typed JSX components)
I now store the new blog content directly in Markdown files and keep the post metadata (tags, publishing date, etc.) in JSON files. The old blog was built on top of Blog-Core, my own framework, which I will still keep maintained (accepting PR's but not really developing it further myself).
More Markdown features
The basic Markdown does not support tables, but they are supported in GitHub-Flavoured Markdown (GFM). It is possible to add tables in basic Markdown, although they have to be coded directly in HTML, which is quite inconvenient. The old blog Markdown parser did not support GFM. It would have been time-consuming to extend it. The new parser uses marked.
Better Markdown editor
I'm using VS Code for writing code and like it a lot as a general text editor. It has a good Markdown support. Paired with Prettier (a code formatter also supporting Markdown) makes it a very decent solution. The old blog used an online text editor which was not really flexible and did not support automatic formatting. The automatic formatting is very useful for line wrapping to 80 columns (increases readability during writing a lot) and for better tables (the same reason).
Grammar checker
VS Code has a LanguageTool extension (called LanguageTool Linter). LanguageTool is an online API-based English grammar checker service which supports Markdown. The grammar checker, together with the Prettier formatter, makes VS Code a quite amazing writing editor. The free "community" version of LanguageTool is not much better than a basic speller, but I can definitely recommend the premium version.
Better templates
I have been using TypeScript and React for doing frontend work in commercial projects since 2019, and I'm pretty convinced that statically typed JSX and components are the best way to do frontend development. There simply are not any alternatives which would come that close to the nearly perfect developer experience. That is, if you can stay away from bundlers and low-quality libraries, which constitute the large part of the JavaScript ecosystem where the experience is completely opposite.
Other upgrades
Better images. I have taken numerous photos on my travels, and while being generally outside, and I plan to take a many more, and then publish some of them on the blog. For this, I needed a good way of presenting the photos, a good Lightbox system. The Lightbox was the major part (time and code-wise) of the blog upgrade. The Lightbox can be seen in use on this page.
Rewritten CSS. I rewrote my stylesheets to implement dark mode. In the end, I found dark mode too difficult to get right, but the CSS rewrite helped me to prepare for the implementation of the image presenting Lightbox above. Looks-wise, there are almost no changes in the blog, but most of the styles are implemented in a much simpler and modern way than the previous iteration of CSS.
Server upgrade. I upgraded my VPS server to Debian 12. The server is still running the good old Nginx web server, but HTTPS is now managed by acme.sh (Let's Encrypt 2 documentation had badly become out-of-sync with their code and cannot be reliably configured). The server still runs on Hetzner. Over the last 5 years I have been using them and there have been no interruption of services or any troubles in general with them.
Build system
I have not uploaded the source code of my HTML files generator anywhere, but under the hood it is just a couple of scripts running these steps:
- Read the source Markdown files
- Read the metadata JSON files
- Put data together for TSX modules
- Render TSX to HTML
- Format HTML with Prettier
There is also a development mode which watches the files and runs these commands for the changed content. I use it when writing the articles.
I use a git repository to store the scripts. The generated HTML files are checked into here, too. Deploy is about checking out the latest repository contents on the server.
If you would like to blog using a similar system, then there are many Open-Source solutions available. Just start by browsing this page.
Also note that to receive comments, you still need some sort of active server component or a 3rd party service. I'm using my own comment server, which is part of a larger application (not connected to the blog in other ways).