Website iteration 2.0: the layout bugs strike back

Over the past couple of weeks, I’ve slowly been building a new version of this website. Externally, not much has changed, but it now has infinite scrolling, and should render a lot better on mobile. Internally, I’ve chucked out Wordpress, and started using Hugo. Instead of using in a database, all pages in Hugo are statically generated. This means they are easily hosted, eg on Dropbox, GitHub. It does mean there is no web interface: you’ll need to run Hugo and upload the new content every time you post.

Using Hugo instead of Wordpress is a no-brainer. Wordpress is a lot more than I need, and, when I exported all my content, it turned a lot of it was quite badly formed, or even invalid HTML. I also dreaded updating it, which is a non-issue for static pages. Probably the only thing I’ll miss from Wordpress is a web interface for posts, and the ability to post at some time in the future. I can probably hack something together for both in the future though. On the plus side, Hugo uses markdown, and has it’s own simple web server used for iteration.

A more interesting/difficult choice would be between using Hugo, or rolling out your won script. Unfortunately, Hugo is still firmly in the driver’s seat, and it can fight you if you want to do anything in a different way than it expects. Most of it’s features wouldn’t be too hard to implement, apart from the templating engine. Losing it’s live reloading wouldn’t be fun either. The loss would be the inability to use (or modify) one of the existing themes.

Personally, I’m a bit perfectionist about this website, especially considering I don’t really want to revisit it for the next 10 years (same timespan since I first created it). I didn’t want to use any existing themes, spend quite some time getting the output “just right”, and banged my head against Hugo quite some times. Even if rolling my own would have taken me some extra time, it would be something I could build on in the future. That probably would have been the right path, but ¯\(ツ)/¯. Most of the hard work was in transforming my content to a sane format anyway, and that work is reusable.

EDIT

After using it for a week or two, I miss being able to post from my phone more then I expected. Which is a bit annoying to fix, as I would have to run hugo from inside my VPS.

Anyway, let me know if there’s something wrong with the new version. Webdev is definitely not a talent of mine.

TL;DR Choosing blog platform as a programmer
If you don’t want to fiddle with the command line / FTP every time you post, go for Wordpress (or anything else with a web interface). If you want easy maintenance and creation (eg minor theme modification), use Hugo. If you don’t mind spending quite some more time building something from scratch, build your own.

Test post, please ignore this hell

H1

H2

H3

H4

H5

H6

Alternatively, for H1 and H2, an underline-ish style:

Alt-H1

Alt-H2

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

1. First ordered list item
2. Another item ⋅⋅* Unordered sub-list.
3. Actual numbers don’t matter, just that it’s a number ⋅⋅1. Ordered sub-list
4. And another item.

⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we’ll use three here to also align the raw Markdown).

⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.)

• Unordered list can use asterisks

• Or minuses

• Or pluses

I’m an inline-style link

I’m an inline-style link with title

[I’m a reference-style link][Arbitrary case-insensitive reference text]

I’m a relative reference to a repository file

[You can use numbers for reference-style link definitions][1]

Or leave it empty and use the [link text itself].

Here’s our logo (hover to see the title text):

Inline-style:

Reference-style:

Inline code has back-ticks around it.

var s = "JavaScript syntax highlighting";
alert(s);

s = "Python syntax highlighting"
print s

No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.

Colons can be used to align columns.

There must be at least 3 dashes separating each header cell. The outer pipes (|) are optional, and you don’t need to make the raw Markdown line up prettily. You can also use inline Markdown.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Quote break.

This is a very long line that will still be quoted properly when it wraps. Oh boy let’s keep writing to make sure this is long enough to actually wrap for everyone. Oh, you can put Markdown into a blockquote.

Three or more…

Hyphens

Asterisks

Underscores

Here’s a line for us to start with.

This line is separated from the one above by two newlines, so it will be a separate paragraph.

This line is also a separate paragraph, but… This line is only separated by a single newline, so it’s a separate line in the same paragraph.