New year, new blog

At the beginning of July last year, I started to create my devblog. At that moment, everything web-related was completely out of my world. I could code a bootloader or a real-time OS in C/C++, yet I wouldn't be able to make even a basic website. So I took the easy way. I registered my domain, bought three years of the cheapest VPS provider I could find, and installed a ready-made blog solution, the ubiquous Wordpress. The only real customization I did, was to write a theme - or should I say, download an existing one, and rewriting the CSS part.

It was running well, until it did not anymore. I'm new to this, so I didn't know that it is a terrible idea to buy three years worth of VPS service to a company that nobody knows. It turns out the provider, Hiformance, went bankrupt (or just ran away with the money), shutting down all the servers without notice.

So my blog was gone. Of course, I didn't have any backup. I could thanksfully recover most of it with the help of my browser cache, and the Wayback Machine. I got back the blog posts, comments, images, and CSS stylesheet. I don't like doing the same thing twice, though, so I decided not to buy another VPS service just to run a Wordpress instance. This time, I would write my website from zero, and learn in the process.

One of the less-known features of Github / Gitlab, is that these code hosting services can host for free a simple static website. It's as simple as pushing your HTML and assets to a branch named 'gh-pages' (or simply 'pages' on Gitlab). Then, your website appears at https://myname.github.com/myproject/. Very useful for hosting simple web pages for your projects. It is, however, much harder to have it host complex websites, such as a blog, for the simple reason that you cannot run a server language like PHP or a database on their servers. You're just left with HTML and Javascript.

Enters Jekyll

In a nutshell, Jekyll can be described as a static website generator. Write up rules about how your pages should look, give it text written in Markdown or plain HTML, and it will generate a static website from that. New blog post? Add the text of the post to a Markdown or HTML file, regenerate the website, push the generated HTML files to Github, and your new blog post is live. Actually, it's even simpler than that: Github's simple hosting service supports Jekyll natively, so just push your sources to the gh-pages branch instead of the generated HTML, and Github will auto-generate the static website from your Jekyll sources. How cool is that?

One last part that's left to do: comments. The first problem: this requires a server-side program to get the data submitted by the user through the HTML form. The second problem: How do you get this data integrated into your website, if your website is a set of static pages generated from a git repository?

Enters Staticman

Staticman is a tool that has been designed specially for the purpose of handling comments in generated static websites. The way it works: you setup your blog post reply form to send the comments to the public instance of Staticman that they graciously offer free of charge (alternatively, you can also run your own instance on your server). Second step, you add 'staticmanapp' as a collaborator to your website git repository. Then, everytime someone posts a comment, 'staticmanapp' will send you a pull request, adding the new comment in a file stored in a preconfigured directory. Merge it, let Github automatically regenerate the website, and your new comment will appear. Pretty nice, right?

Bottom line

So it took a bit of effort, but now my devblog is live again. It looks the same, but has been entirely written from scratch this time, not by just tweaking a Wordpress theme. And you know what? I'm glad I did. I learned a lot in the process. Also, I really got used to write my blog posts the same way I write my code. Fire up VIM, write some text, git-add, git-commit, git-push. Tweak the look-and-feel and content by writing code, instead of clicking buttons.

The best thing about that? You can now send me guests posts in pull requests ;)

  1. #1Dan Silsby, 11 Jan 2019

    Some very useful info for another web-ignorant low-level coder such as myself. Thanks! -senquack

    Reply

  2. #2Vin100, 11 Jan 2019

    Second step, you add ‘staticmanapp’ as a collaborator to your website git repository. Then, everytime someone posts a comment, ‘staticmanapp’ will send you a pull request, adding the new comment in a file stored in a preconfigured directory. Merge it, let Github automatically regenerate the website, and your new comment will appear. Pretty nice, right?

    staticmanapp only works on GitHub. Nonetheless, this site is hosted on GitLab Pages: https://pcercuei.gitlab.io

    How can you get Staticman works on GitLab pages?

    Btw, on your linked GitLab Pages, there’s a reCAPTCHA site key error. Please correct this by adding “pcercuei.gitlab.io” as a domain name for your site key.

    Reply

    1. #2.1pcercuei, 11 Jan 2019 (Reply to Vin100)

      The reason I went with Gitlab is because of this bug: https://github.com/eduardoboucas/staticman/issues/227. It would never work for me.

      For Gitlab, you can add ‘staticmanlab’ as a contributor. It does not require registration, unlike with Github. The server address is different, this is the one I use: https://gitlab.com/pcercuei/pcercuei.gitlab.io/blob/master/_layouts/post.html#L24

      The captcha is set to work with https://zcrc.me, that’s the real address of my blog now :)

      Reply

  3. #3Vin100, 14 Jan 2019

    Thanks for reply! In my previous message, I used Markdown syntax for blockquote for testing. Have you considered adding Markdown support like https://satishramjee.gitlab.io/blogging/using-jekyll/?

    Reply

  4. #4pcercuei, 17 Jan 2019

    There are lots of features I have yet to add :) It would be nice to have Markdown support, indeed. Right now the reply formular is too basic to be useful.

    Reply

  5. #5pcercuei, 21 Jan 2019

    Markdown should be working now.

    :)

    Reply

    1. #5.1Vincent Tam, 28 Jan 2019 (Reply to pcercuei)

      Test Markdown message. The bar at the top of the text field in GREAT!!!

      Reply