Migrated blog platform to Firebase+Hugo+LoveIt
I’ve used several blog-like platforms to write technological articles, but none of them has all the features I want.
| Platform | API(CLI) post/update | Markdown | Ctrl+V to paste image | Admonitions (described below) | International (not only-Japanese-friendly) |
|---|---|---|---|---|---|
| Dev.to | ☑️ | ☑️ | ☑️ | ||
| Medium | ☑️ | ☑️ | |||
| Text Editor + Jekyll + GitHub Pages | ☑️ | ☑️ | depends on text editor | depends on theme? | depends on configurations |
| Qiita (service in Japan) | ☑️ | ☑️ | ☑️ | ||
| Hatena Blog (service in Japan) | hard to use | ☑️ | ☑️ |
https://blog.wataash.com had been hosted on Hatena Blog, as the best compromised choice. But I found out Hugo could satisfy all my needs, and it actually did, so I switched this blog’s platform to Hugo.
Ctrl+V to paste image is mandatory for me because I post many images in my articles. I believe that, when we write technical documents, we should do reducing-text and pasting-many-images as possible.
As of 2016, (AFAIK) it was impossible to paste images with Ctrl+V while editing Markdown, so I avoided Jekyll. But now there’s awesome Visual Studio Code extension – Markdown Paste.
And Hugo has emerged, which is faster than Jekyll and very sophisticated, and has many users.
And there’re state-of-art website-hosting services like Netlify or Firebase Hosting for free.
So I tried Hugo + Firebase-Hosting and decided that I would post all the blog posts with it.
Theme selecting
Hugo’s theme selections is important, because they not only defines site styles, but also provides functionalities. One example is admonitions:
This is the warning admonition.
DO NOT execute:
|
|
How pretty and readable they are! I think an admonition is more readable than footnote 1.
So I tried several themes that have many GitHub stars.
| Theme | GitHub stars (2020-08-09) | Dark mode (prefer-color-scheme) | multi-language (i.e. https://blog.wataash.com/ https://blog.wataash.com/ja/) | Admonitions | Disqus comment (see the bottom of this page) | Search 🔍 | etc | Theme |
|---|---|---|---|---|---|---|---|---|
| Academic (preview) (for generic website including blog) | 4851 | ☑️ | ☑️ | ☑️ | ☑️ | Slow, Making it a simple blog is tough | Academic | |
| Even (preview) | 1168 | ☑️ | ☑️ | Even | ||||
| Coder (preview) | 1072 | ☑️ light/dark switch button is not implemented | ☑️ | Coder | ||||
| LoveIt (preview) | 604 | ☑️ | ☑️ | ☑️ | ☑️ | ☑️ | LoveIt | |
| Fuji (preview) | 41 | ☑️ | ☑️ | ☑️ | ☑️ | Fuji | ||
| Learn (preview) (for documentation, not for blog) | 1000 | ? | ? | ? | ? | ? | ? | Learn |
| Docsy (preview) (for documentation, not for blog) | 869 | ? | ? | ? | ? | ? | ? | Docsy |
| Book (preview) (for documentation, not for blog) | 792 | ? | ? | ? | ? | ? | ? | Book |
LoveIt was perfect, I chose it. And I found out it’s literally perfect… :)
-
This is a footnote. I think footnotes is well functioning in paper books, but not in webpages – page-jumping is easy in paper books but annoying and non-intuitive in the web browser, decreasing human’s reading speed. ↩︎