Styling images in markdown I’ll refer to the StackOverflow answer on changing image size in md. The simplest and dependency free method is just to use a CSS selector to style the image. This removes the need for markdown processors that would (with more code) end up in the same place. In Hugo this would mean adding the styles to the assets folder and writing them up this way: img[alt=drawing] { width: 200px; }. ...

How this blog is created Making it easy I have previously tried blogging but my biggest obstacle was actually platforms used for blogging. Before knowing how to code, I formerly had a WordPress blog that I barely used. While I would write in my note-taking app, I found the publishing process a pain which led me to write privately as an outlet. The biggest obstacle to keeping a blog is ease of getting stuff from thought to the internet. It should easy: Write in markdown, make the PR and deploy automagically. ...

Main steps Create a layout Adding Mermaid to a content template Maintaining content and theme styles Rendering an example diagram Mermaid diagram This post outlines how to add Mermaid support with Hugo to render the diagram below, as I found the docs a bit lacking. When pasting, make sure to move the closing code fence to a new line to see the diagram ```mermaid sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts <br/>prevail! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!``` Creating a layout While Mermaid markdown diagrams aren’t supported natively by Hugo, it’s easy to add. ...