How this website was built with Hugo and Notion
Why I stop using Emacs?⌗
Editing on Emacs was fun. Yeah, really fun using the Org mode. And Org Roam and other things. You can check out my last post about how I built this website here.
https://chop.dev/posts/how-this-website-was-built/
In that post, I went through all the features that I had for this Website. Include my work flow to convert them from Org file to Markdown. And how I use Hugo to render all my posts to static and host it on Firebase.
Thing is I have to go back to NeoVim because working with the Emacs system was not a good experience for me.
Doom Emacs and Lisp⌗
To explain my situation clearer, I use Doom Emacs, a pre-config Emacs distribution and framework. So setting up everything was easy, but easy things come with side effects: You don’t know the system well enough. Learning to config it was a bit confusing and hard, and it took a long time to research. Because it was pre-built, and there are many things that can go wrong or break. I don’t know where to start when I see a small thing that I’d like to customize.
I know this point also applies to anyone who is new when trying their hands on a similar editor like Vim but I have another problem. Which is the Lisp language.
Emacs' language is Lisp. It does not help with that at all. It’s a language that I would need some time to digest. I mean with all the parentheses and functional programming. Even though I am very familiar with Haskell, Lisp is just another world.
Saying that, I had a working environment for coding and editing working well on Emacs. So I had been using Emacs really fine for the last 8 or 9 months.
But the experience was not so comfortable. During that time, I had a lot of quirky stuff that I would like to customize to my own liking but was unable to :(
Neovim⌗
So for the real comfortable environment, I have to switch to Vim. I've been using good old Vim - not the new hip Neovim but the good old Vim version 7 - for a long time before I switched to Emacs, so … You know, after Emacs, NeoVim was just the obvious choice.
In NeoVim, I got my hands on Lua language. It was much better than Lisp. And everything went smoothly. The structure of the plugins is great. The customization is great. The plugins are really well maintained. I have such a great time being back in this environment.
Note: This is not about hating Emacs. It was a great tool, I love Dired, I loved Projectile, I loved Magit, and all great Emacs plugins. I’m sure many people are familiar with it, and can customize it exactly the way they want. It just doesn't work for me. Because for me, it would take much more time to learn and adapt.
The switch⌗
Since “the switch back to vim”, I’ve moved most of my programming tools and habits to Vim. But one thing that keeps me using Emacs is the project that manages my personal website. I normally edit my posts using Org mode and export them to Markdown so Hugo can build it.
If I make the switch meaning no longer use Emacs. This would need to be converted too. So I decided to investigate a way that I can edit and maintain my blog posts. And somehow pull the content as HTML.
Notion⌗
I built up some habits when I lived with Emacs for the last half year. It’s Org mode and Org Roam. I have all my notes kept in Org files, linked together. Like an interconnected mesh of information. If you know the term second brain, I have something like that in my Org folder.
So last week, I decided to use Notion to replace these habits and note taking. The switch was smooth. Notion has the back-linking feature that fills my requirement for an inter-linked note.
They also have useful features like Custom View, Database Table, Editable Properties, etc. Things were better than I expected.
The Notion API is also straightforward and easy to understand. For now Notion works for me and I’m happy using it.
How?⌗
Luckily, I found a tool to do that job:
https://github.com/asnunes/notion-page-to-html
This is written in Typescript and can convert any public Notion Page into html. Then I use some script to further process the html into more suitable components for my Hugo setup to produce a nice blog entry.
In fact, this article's content is from my Notion page. You can visit the page here.
Scripting the tool for me was easy. Not much to explain.
It is just a CLI to get the URL for the Notion Page and export the post the the desired path.
Then go through the HTML output from the notion-page-to-html and with each component like Image, Headers, Youtube, etc. I make some small changes accordingly.
Afterthought⌗
Using this approach feels better than my previous setup. I can use tools to check spelling and correct my grammar when editing. Compared to before, the Emacs situation does not have these correction tools and I had to use my own level of English which is not so good to be honest.
(Note here that I know that Emacs can be configured to have these tools but I give up after some tries to set them up).
About the notion-page-to-html. Features like Table and Bookmarked Embed are not yet supported. But it is new and in active development so I hope they will have them in the future.
There is a bug that formats the code block for 4 spaces indent. It produces the wrong formatting for these languages.
Many languages indent with 4 spaces are affected by this, like Python, Rust, etc. I have dig into the code and provided a fix for this bug. Hopefully it will be merged soon into the main repository. For now I’m using my own fork.
One more thing that I’m not comfortable with right now is the Front Matter information that I need for each post, like the publish Date, Description, Tags, etc. Right now I’m implementing a hacky way to pull this data. By putting it in a code block identified by a specific header.
In the future, I would like to have information native to Notion to be pulled by the API. It will be a much better workflow. Something like this
With this the information is structured and typed correctly. For example like Date type for Publish Date and boolean for Draft condition.
I think I will spend some time with the notion-page-to-html code to implement it and make another PR.
Conclusion⌗
Well. This post is long enough, my new writing environment will be this combination of Notion and Hugo for now. Hope it will give me more motivation to write and produce more content and updates.
Bye.