Moments in Graphics
A blog by Christoph Peters

Redesign of the blog

Published 2019-08-27

Over the past year, I have gotten dissatisfied with the setup of my blog. Discoverability of posts was not particularly good, maintenance work began to outgrow the work for new content and I grew tired of the Wordpress layout. Rather than fixing each issue individually, I decided to turn the whole thing into a static HTML page generated by my own set of Python scripts. The resulting redesign will hopefully make it easier for you to find the posts you care about and to read them without distraction and for me to create them. The following post discusses the changes in more detail.

Issues with the old setup

My old blog setup was based on Wordpress. It used the default theme from 2014. Posts were written offline using Markdeep. Then I would manually paste the HTML code into Wordpress. When I set this up, my blog did not have any posts. Three years, eleven posts and eleven publications later, the old layout has seized to meet my needs.

OldBlogScreenshotAnnotated
Figure 1: Issues of the old blog layout.

Figure 1 highlights some of the issues. The main problem is that it is really hard to get to a post that is not among the recent five. The most direct way is to follow the link to the next post repeatedly but that takes a lot of scrolling and clicking. On smaller screens, the drop down menu for the publication list does not fit the screen anymore. The layout feels appropriate for more than 100 posts or less than five, but everything in between leads to bad discoverability. Overall, everything besides the content is suboptimal in some way.

Behind the scenes, maintenance work became a nuisance. Being as widespread as it is, Wordpress is a popular target for hackers. It is important to keep it up to date but doing that takes some effort. For every update, I have to upload 2000 files via FTP manually, sometimes after merging customizations. Spam comments are another issue. The spam filter catches most but not all.

Finally, the process for posting was not as smooth as it should be. Writing the posts offline with Markdeep mostly worked well but posting them took some time. It involved clicking through the admin interface of Wordpress, remembering how to disable the WYSIWYG editor, pasting HTML, entering meta data manually, previewing the post and eventually publishing it. More often than not, there would be subtle changes to the layout compared to the offline version. And whenever I posted two related things at once (e.g. a publication and an accompanying blog post), I would have to go back and forth between offline editing and online work to get URLs for hyperlinks.

Changes below the hood

I had to make some changes. Most of the issues that I just explained can be addressed with Wordpress. I could change the navigation elements to put all posts in the side bar. Wordpress can update itself if you trust it enough to enter your FTP credentials into the admin interface. And maybe I could write some scripts to further automate the process for posting.

But why bother? The only reason why I chose Wordpress in the first place was that I wanted a comments feature for my blog. Nothing else requires server-side scripts. Over the past three years, there have been 31 comments. Many of them are just people saying thanks. There have been a couple of interesting discussions in the comments. Though, I doubt that I will miss out on those when I close the comments. You can comment publicly on Twitter or privately by email and both has already happened to a greater extent than comments on the blog.

I decided to do what I would have preferred in the first place: Creating a static HTML page. The new blog does not use PHP at all. Since the full HTML pages are created offline, I have a perfect preview and no friction posting. As for every problem, my approach is based on Python. I wrote my own parser for a Markdown dialect. It is as unpredictable as any other Markdown parser but when it misbehaves I know exactly what to do about it. It also has a couple of exotic features to meet my needs, e.g. an imitation of the theorems module in LaTeX and code highlighting for HLSL. And like Markdeep, it has floating figures and listings with labeled captions. I am still using a self-hosted MathJax for formulas. That is the only feature using client-side scripts if needed.

The publication list and meta-data for publication pages are generated from a BibTeX file. An index page with the first paragraph of each post is produced automatically and adjacent posts and publications link each other. The RSS feed with all posts and publications is created along the way. I took care that all old pages get a redirect (HTTP 301) to their new locations, so old external links to the blog should still work.

Visible changes

The result is a much simpler layout. There is one narrow column of text with a small number of navigation elements in the header and footer. The layout is entirely focused on the content. The type faces are Linux Libertine and Biolinum. If they look familiar, that might be because all recent ACM publications use them. I think this layout makes for pleasant reading.

Finding any post or publication in the blog should be easier now. The home page of the blog lists them all with title, publication date and first paragraph. The new layout of the publication page is more unified and hopefully more clear. I also updated my publication list, adding author's versions of several more recent works.

Although comments are closed now, all old comments can still be found in the respective blog posts. I migrated them manually.

Conclusions

The redesign of the blog should make it easier for you to read it and for me to keep writing new posts. And if I ever get tired of maintaining it, the new static HTML version can stay online indefinitely without security concerns (of course the webserver itself has to be secure, but that is the problem of my host). The original design decisions were made without knowing what the content would be. In retrospect, some of them were bad. That is fixed now.

I spent some time going through old posts to ensure that nothing broke in the transition and to keep old links functional. If you notice an issue, please let me know by email or on Twitter.