New blog setup
What was wrong?
Ooops, I did it again! In my first blog post I described how cool was my setup with
shadow-cljs
, clojurescript
and react-native
and big my ambitions of improving my knowledge
of this amazing stack was.
Well, I learned something (see this blog post) but I am going to be honest: the setup had its quirks. Org files would be converted to markdown and the markdown would be then exported to HTMl by a clojure library. Plus, the routing logic was using another clojure library which was kind of hard to work with: I spent hours trying to place a link to my resume.
I sat down and I thought: what do I want from my blog? I want it to be simple so I can focus on writing. I was losing enough time with my previous setup to make everything work. Still, it was a very valuable experience. It is still available at this URL.
Welcome to the past!!
Since that first blog post in May 2020, I must admit I have become even more of an emacs fanboy.
I am now heavily invested in org mode for all my prose and most of my experimental code
(I'll write about my emacs-jupyter
setup one day).
Recently I stumbled upon a really elegant solution that uses the emacs
exporting facility to export
org to HTML and collects them in a static site. That's it.
As a developer you need to worry about three things:
- Initial setup (mostly
publish.el
file) - HTML templates
- CSS styling
You can basically copy the minimal working example from the github project and start writing your org blog posts. You can then refine the default style and templates.
Once the blog is setup, you can just focus on the writing. Oh, and it provides an RSS feed out of the box!!
My workflow
Starting from the basic example I added a few nice things.
I started with defining a Github Action that on every build will re-generate the website and publish it
to Github Pages. In the Github Action I install emacs and run emacs --script publish.el
.
In my publish.el
script I check for a GHUB
env variable and if present I install the required dependencies.
I also ported the 2 tools I was using in my previous setup, the Hyvor Talk
comments and
the clicky.com
analytics. To do so I simply had to add HTML to the index.html
and post.html
templates.
Finally, I edited some CSS to adjust the default size of the header and to add the dates of each blog post to the index.
I just had to edit the blog.html
templates, where I can extract file properties of org files with this syntax:
<h1>Posts</h1> <ul class="posts"> {% for post in posts %} <li class="post-title"> <a href="{{ url_for("posts", slug=post.slug) }}">{{ post.title }}</a> <p class="post__meta"> {{ post.date|strftime("%b %d, %Y") }} {{ post.filetags }} </p> <p> {{ post.subtitle }} </p> </li> {% endfor %} </ul>
The default style of the blog is not as nice as the previous one I had but if needed I can
adjust the post__meta
class. I plan to start using Tailwind CSS
soon.
In conclusion, I had a lot of fun porting my posts over this new setup and in addition I am confident this will further reduce the friction between me and blogging!