All new but still the same

Once again I recreated this blog from the ground up. It’s been very quiet around here after I had some months last year where I posted more regularly, but I still enjoy writing, whether people read it or like it or not. What I also like is always improving the way I create my content. What you see today basically looks just like the site did a few months ago, but it was completely rebuilt.

Until recently I hosted everything on a privately hosted Wordpress installation. The bare bone installation was a bit too bare bone for my taste while still needing a lot of maintenance for updates, checking plugin compatibility, database setup, security concerns and so on. Everything for a page that shows more or less nothing else than plain text. It also bothered me that even for a simple site that only contains plain text it is considerably slow to serve the dynamically generated sites. There are workarounds using caching plugins, but they also increase the maintenance load. The way I wanted this blog to behave required a bunch of plugins to be installed. Even if a visitor would not recognize it, there was a lot going on in the background when the pages loaded and it took far too long.

Publishing also was a bit too cumbersome for my taste. I wanted to be able to easily publish on the go in a microblogging style. The web editor on the Wordpress admin page never did it for me. I don’t like the formatting, sometimes Markdown works, sometimes it doesn’t and if everything went wrong all of my text vanished somewhere on the internet. Therefore I need an offline Editor where I can save drafts and don’t have to rely on a working network connection. It’s possible to do this using the Wordpress app on the phone or iPad and several other solutions like Workflow, but the way I set up my system and the way I wanted to structure my content made it complicated and I was never sure whether everything worked as expected. I “automatically” linked to new posts on Facebook and Twitter using an IFTTT recipe that regularly checked Wordpress for new content. This solution never really worked that well, especially with the obscured IFTTT links.

In general I move away from several tools that use proprietary file formats in favor of plain text files. Everyone who used Microsoft Word a couple of years ago and tries to open a document today knows the problem. If you are even able to open the document, it will look not like the document did a few years ago at all. Proprietary file formats will eventually vanish – at least when the product is discontinued someday – but you can open a text file from 20 years ago without any problems. For example I started using TaskPaper instead of OmniFocus to manage my todo lists. OmniFocus is a hell of a tool, but TaskPaper is an open plain text format and I can work with that everywhere with any tool I like. When it comes to writing, all of my texts are written in Markdown. Wordpress can handle this, but again there is at least the Jetpack plugin needed to be able to use Markdown and in the mobile App there were always issues for me. My tools of choice for writing of any kind on any platform are Ulysses and BBEdit (on the Mac). Ulysses recently added support for Wordpress publishing which is awesome and would have made my life much easier already, but this feature came a bit too late for me… I just finished the transition of the blog when this feature was announced.

What I wanted

What I wanted was a system that lets me write in Markdown, having all my files available without being stuck in some database or proprietary format. I wanted to publish easily from everywhere at any time without too much of a hassle. This post for example was initially written on my Macbook, I added some notes on my iPhone on the go, added some parts on my iMac and I finished and published it on my iPad while lying in bed. The blog should serve the pages as quick as possible over a secure HTTPS connection. Maintaining the site should basically be a no-brainer. I played around with some options and needed some iterations to get where I am now, but now I have a system I wanted for a long time already. Getting there needed a lot of work, but it was fun and I learned a lot. And here’s how I got there…

What I use

I had an eye on static site generators like the widely used Jekyll or Octopress (which is based on Jekyll) since quite some time. It’s a bit of a bandwagon effect which lead many sites in the past to switch away from dynamically created pages with a CMS like Wordpress to being created using static site generators. Pages created that way serve the complete page with a fixed set of generated HTML files. (Almost) Nothing is generated on the fly and nothing has to be cached, which leads to faster access times and much less maintenance overhead. I had a good look at those systems, played around with them and put my content in there to get a feeling for everything. Octopress seemed like the tool I needed, but it was a bit too much. It’s structure seemed too technical for me and I didn’t feel good using it.

At some point I stumbled upon Hugo. What I saw and read about it felt better to me than the other generators. It’s fast, flexible, extensible and most of all very easy to use. I started to create this blog with Hugo and it felt like this is the thing for me. I played around with different themes at first, but then decided to create my own to match the site’s existing layout. Hugo is written in Go and its template mechanism also uses Go, which was a bit of a problem at first, because I never even saw a line of Go code before. I still wanted to have my site generated by Hugo and hence got to learn the language – only the very basics, but I still enjoyed it! This part took by far the most time to recreate the blog. I didn’t know the language, I didn’t know the system of Hugo and I’m not that much into CSS stuff. Nevertheless, this part was also the most fun.

The outcome of all this: the content of this blog is no longer hidden in a database but in a bunch of plain text files with a couple of static files like photos or linked content next to it. I can access, create and edit my content with any text editor on any system. The text files have to have a special so called front matter before the actual text of the entry which contains meta data like the publishing date, tags, categories, the URL to use etc. If necessary the front matter can be extracted later from the text files easily with a script. To create a new blog post I put a new text file for the post into it’s place in the blog’s folder structure and run the hugo command… et voilà! Hugo uses the meta data of the markdown text files, creates a bunch of static HTML files and the page is completely recreated within milliseconds. And its theme should adjust to different screen sizes of phones and tablets (at least the most common ones).

The system setup

I moved the site from a simple web host to Linode. It’s been several years since I had to administrate a Linux box at work so I thought it would be the right time to get up to date on a couple of things again and run my own server. There might be easier solutions than a completely self installed Linux system, but besides the simple blog setup you can see at the moment, I have a few things in mind that would require to also get my Ruby skills out of the drawer and run a web service. I don’t want to move everything again at a later point so I pay a couple of Dollars extra each month to be on the safe side later on. And if I decide to move somewhere else… nothing easier that that: the blog is simply a bunch of text files.

Luckily setting up a Linux server didn’t change that much in the last couple of years. I stick to known tools and keep far away from the hip and cool stuff riding the hype train at the moment. There is some great documentation from Linode that get a server up and running in basically no time. To have everything set up correctly needed some tweaking here and there, but I also got to know my system a lot better that way.

I also wanted to have the site served over HTTPS only, which meant that I needed a certificate. There’s a great movement around letsencrypt.org lately. It let’s you create free SSL certificates for your site. This is a great help to make the web a more secure place. If you run your own web server and don’t have SSL enabled yet, go to letsencrypt.org and check out how to get your own certificate. It’s free and it gives you and your visitors more security and a better feeling. There are also lots of web hosts that offer to easily integrate letsencrypt certificates with the click of a button, so go check it out! I created my certificate and the site is now completely served via HTTPS.

The content and configuration of the site is put in its own git repository. Using version control is good to keep track of the changes happening to the site. I can revert to an earlier state at any time if something goes wrong for example when I change some details on the layout of the Hugo templates or CSS files. This is a huge advantage over Wordpress in my opinion. Yes, you can do similar things with Wordpress… there is nothing you can’t do with Wordpress, but you need yet another plugin or several of them and keep them always up to date to be that flexible. Whenever I have a new post I just commit it to my local git repository and push it to the server. I created a small build script that is automatically called by a git hook whenever a new push arrives in the central repository. The script makes a backup copy of the current state of the whole website, runs Hugo to generate the updated content followed by a call to tidy (the granddaddy of HTML tools) to clean up the generated HTML files and copies everything where it belongs. When the script is done, the whole site is updated magically by simply pushing a new article to the git repository. This is very neat! I finally can easily create posts from everywhere, without being chained to certain tools. I usually have a certain workflow, but basically all I need is a text editor and a git client to manage the site’s content.

Another important note that is near and dear to my heart: If you are using an ad-blocker – and you definitely should – you might recognize that there are no trackers at all on this site. When running on Wordpress it is just the click of a button to inject a script into the site that tracks down visitors so you can see how many people looked at your site and where they live. It’s also very easy to integrate Google Analytics, which opens a whole other world of tracking possibilities and being creepy. Yes, I did run these tools in the past, although all I did was looking at the visitor count and the country/region they came from. But it’s creepy. I don’t want to be tracked on other websites myself, so I decided to just leave all of this behind. I don’t really care who reads this. I’m happy if anybody at all found the way to this humble site and I’m certainly not making nor trying to make any money with it. That’s why there is no tracking. I might start playing around with Piwik someday though. It can do a lot of stuff you can do with Google Analytics, but it would run on my own server and with my own configuration. All data would be only visible to me and nobody else. If I want to know which country a visitor is from or how many of you read this, I could get that. And that’s it. But for now I don’t know who you are or if you are just an imaginary person to me because nobody at all sees this. And that’s how I want it to be.

How I publish

Publishing is very easy with my new setup. I have always written my posts in BBEdit or Ulysses and then copied the Markdown to Wordpress. As I already mentioned, there was no Wordpress support in Ulysses until recently. This changed with one of the last updates, making it pretty easy to simply write and publish from within the app. Today I still write everything with the same tools. I use BBEdit to tweak the layout and scripts around the blog and also to write some shorter text if I’m in the mood. For longer texts I use Ulysses because it is beautiful and runs on the Mac, iPhone and iPad. It syncs all texts immediately to all devices via iCloud so I can seamlessly switch between any device whenever I want to. When a new post is finished, I either have it in a text file already in place in BBEdit and can simply commit and push to the git repository on my server to update the site. When using Ulysses I can simply export the Markdown and save a new file in my blogs’ folder structure. I currently add the front matter by hand using BBEdit and again commit and push to the repository. If this seems a little cumbersome and in conflict with my goal to have everything lean and easy, you’re right. I will probably create some more scripts around this so publishing longer texts gets easier without too much manual work. This would then match my workflow on iOS where I can actually publish with only a few taps: I also export a Markdown file from Ulysses and rund a Workflow on it. From the title of the markdown content I extract an automatically generated filename and fill in some metadata and an excerpt if it exists for the front matter and hand resulting text file over to Working Copy, a great git client app for iPhone and iPad. I can automatically commit and push the post to the server directly from the workflow and update the blog that way. Pretty fast and easy without any manual work.

Open Issues

As with the manual work still required on my Mac, there are a few things I’d like to fix in the future to further improve everything from writing to publishing to optimizing the generated content. For example the open graph metadata could still be improved to show a better preview on Facebook. I also want to have a publishing date attached to the files. Currently there’s only a date available when the site was generated the last time. Having the publishing date could help browsers with caching and further speed up the whole experience when visiting the page. There are some more small tasks like this, but most of them require to dig a bit deeper into the template system of Hugo and the Go language and I just didn’t get to these issues yet.

I’m also eager to improve the theme I created for Hugo. It was my first shot at this and I’m sure I can simplify a lot of the templates with all the knowledge I got from trying to get everything running. There are some organizational issues I solved but don’t like. It’s possible now to have archive lists for years and months on the blog for example – that wasn’t the case with my Wordpress setup before – but the way these pages are generated and the data needed for this needs too much manual configuration for Hugo. I’m sure there are better ways to do it and as Hugo is actively developed and the community around it seems to be intact I’m confident that there will be even more features and flexibility in the future.

Last Words

Long story short: The site was rebuilt from the ground up on a completely different technology than before. Whether it’s setting up and running my own server, learning a new blogging engine and even the basics of a whole new programming language or refreshing some scripting memory… all of this was certainly not necessary. Heck, I don’t even know if anyone will register and even read all of this. But I learned a lot, had a little fun, improved my setup, got back into writing after yet another long pause and I’m a little more independent of the tools and systems I use. Not necessary, no… but fun!