New blog in org-mode and Hugo

(Updated on Sun Aug 13, 2023)
— Albert De La Fuente Vigliotti

Okay this is like my fifth attempt to blog and so far, unsuccessfully.

My first couple of blogs were on blogspot around 2005 or so, later I switched to dokuwiki, which is awesome but it didn’t integrated well on my workflow. So I tried some extensions to try to write directly in markdown but it didn’t work well for me. Then I moved to Hyde, which a Python static website generator. I invested quite some time customizing everything to my needs and while it was functional, I had to write in markdown (which I don’t like…). I tried to write in RST at that time without success.

Then I moved from Vim to Emacs and discovered org-mode… And yeah, everything changed… I love Emacs+Org-Mode and I used quite a lot (and I still use Vim occasionally).

I wanted to write directly in Org-Mode for my new blog to see if content flows this time (hopefully) and I can achieve the integration I was looking for all these years.

The version of this blog uses plain Org-Mode and Hugo with ox-hugo as a middle helper. So far, so good, I just migrated my old posts which are few in number.

What I am looking forward is to create a mix of a Blog and a digital garden for my notes (also known as second brain or exobrain).

The rest of the file is actually a sandbox of general Org-Mode formatting to check out how it renders on Hugo itself.

This is H1 #

There is paragraph under h1

H2 #

  • H3

    Something

  • H3 with a tag sometag

Some basic test #

This is bold, italic, code, verbatim and strike text.

  • However bold and italic doesn’t play well when used together like in markdown.
  • However bold and italic doesn’t play well when used together like in markdown.

List #

  • Bullet
  • Another bullet
    • child
      • deep

Other style #

  • Bullet
  • Another bullet
    • child
      • deep

Other style #

  1. Bullet
  2. Another bullet
    1. child
      1. deep

Style * isn’t supported.

link to org mode homepage

Check List [1/3] [33%] #

  • Item
  • Item
  • Checked item

Heading and has special class however <ul> and <li> are plain.

Task List #

TODO some to-do #

DONE done to-do #

Items are added with special class.

Tables #

number description
1 looooong long name
5 name

<tr> has even and odd classes.

Source Code #

Emacs Lisp:

(defun negate (x)
    "Negate the value of x."
    (- x))

(print
    (negate 10))

There are interesting classes like sourceCode and example. Also there html5 attributes prefixed with rundoc-.

Haskell:

factorial :: Int -> Int
factorial 0 = 1
factorial n = n * factorial (n - 1)

LaTeX #

  • Characters: α β → ↑ \or \and \implies π ∞
  • Inline Math: \(f(x) = x^2\)
  • More complex: \(\frac{x^2}{2}\)

LaTeX characters are wrapped in <em> and Math inside <span class="math inline">.

\mathscr{Hello!} #

\begin{align*} 8 * 3 &= 8 + 8 \\ &= 24 \end{align*}

NOTE: There is standard LaTeX embeded above which is skipped during compilation to HTML.

This is using MathJax

\[\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\]

Deadline #

Tagged tag #

Tags are not visible in render

Block Quote #

Org mode is amazing. So is Hakyll & Pandoc.

Image #

http://media.riffsy.com/images/f8534774b678ad1932b379a03460680b/raw

Images has to have extension like:

then it can be loaded even from other origin..

Description List #

Frodo
The hobbit ringbearer
Aragorn
The human ranger, true kind of Gondor
Gandalf
The Grey Wizard

creddits to nihilmancer