First post in HUGO

Meta post about how I am creating these blog. I'm using org-mode files, which is a markup language that has a lot conveniences inside emacs. This files are then processed by Hugo to generate the static html pages for the blog.

The theme I'm using is a modified version of GitHub - jakewies/hugo-theme-codex: A minimal blog theme for Hugo 🍜.

What I'm missing:

1. TOC on mobile.
2. progressively collapse and show toc as scroll down Doom Emacs Configuration.
3. easy change to dark mode.

What I like:

1. TOC on post with highlight of current session.
2. summary on each post.
3. syntax highlight.
4. tag support.

Probably will experiment in the future the Cactus theme example. Good:

1. archive separated by year.
2. tags with visual frequency.
3. time expected to read.
4. home page with projects, tags and recent posts.

Use the html export block from org mode. In order to override the theme css for images display I manually inserted the html with a different style="display: revert; max-width: fit-content;". (this depends on the theme you choose)

Using emacs-jupyter together with org-mode babel. In order to use the generated graph from the code in the blog published with Hugu I did the following:

1. save the figure with source block header argument :file ../../static/images/graph1.png. ²
2. added also :exports code to avoid having a broken link in the html, which is automatically generated with ob-jupyter.
3. inserted a link to the graph considering the folder structure after published with Hubo [[file:images/graph.png]]

import matplotlib.pyplot as plt
import numpy as np

x=np.linspace(-15,15, 100)
fig = plt.figure(dpi=300)
plt.plot(np.sin(x)**2/x**2)

This is the most convenient organization scheme. I create a new folder for each post that will have pictures. Inside this folder the post goes on a index.org file. And the figures are generated automatically with emacs-jupyter, I just changed the default directory variable to (setq jupyter-org-resource-directory "./jupter/").

import matplotlib.pyplot as plt
import numpy as np

x=np.linspace(-15,15, 100)
fig = plt.figure(dpi=300)
plt.plot(np.sin(x)**2/x)

import pandas as pd
data = [[1, 2], [3, 4]]
DF = pd.DataFrame(data, columns=["Foo", "Bar"])
print(DF)

   Foo  Bar
0    1    2
1    3    4

If I want python syntax highlight but using jupyter-python src blocks I need to change the language of the source block when I finish the post. Update: there is a emacs-jupyter function that overrides the default python source block: (org-babel-jupyter-override-src-block "python")

1import numpy as np
2
3a = np.linspace(3, 2)
4print(a)

[3.         2.97959184 2.95918367 2.93877551 2.91836735 2.89795918
 2.87755102 2.85714286 2.83673469 2.81632653 2.79591837 2.7755102
 2.75510204 2.73469388 2.71428571 2.69387755 2.67346939 2.65306122
 2.63265306 2.6122449  2.59183673 2.57142857 2.55102041 2.53061224
 2.51020408 2.48979592 2.46938776 2.44897959 2.42857143 2.40816327
 2.3877551  2.36734694 2.34693878 2.32653061 2.30612245 2.28571429
 2.26530612 2.24489796 2.2244898  2.20408163 2.18367347 2.16326531
 2.14285714 2.12244898 2.10204082 2.08163265 2.06122449 2.04081633
 2.02040816 2.        ]

Using org-download with imagemagick convert command. The workflow is to just use the snipping tool from windows and use the org-download-clipboard function inside emacs org-mode. Right now I still need an easy way to control the image width, it seems that hugo can not understand #+attr_html parameters.

I had to just enable math=True in my hugo .toml config file under site params.

1. using double $$ centering equations $$ f(x) = \int_0^1 x^2 d x $$
2. single $ for inline $ x^2 $

Well, this works. However it is too time consuming.

/------------------\
|Federal Reserve   |
+--------+---------+
|assets	 |liabilit |
+--------+---------+	
|c1AB	 | cPNK    |	
|JPY     | USD	   |
|reserves| reserves|
|at BoJ	 |to BoJ   |
+--------+---------+

in org-mode just the link does not do anything. We can use the markdown syntax also.

https://www.youtube.com/watch?v=a5PF2PcElV0