Website Building

Adding Mermaid Diagrams to a Hugo Blog As a diagramming library officially supported by GitHub, mermaid is undoubtedly worth a try, whether it serves as a supplementary illustration for the text or adds a touch of flexibility to the layout. Next, using the method shared by Sulv, I’ll introduce how to use mermaid for diagramming in Hugo through Shortcodes. Steps 1. Add and edit mermaid.html Add and edit layouts/shortcodes/mermaid.html in the site root directory. ...

Hugo Sidebar Table of Contents The PaperMod theme places the article’s table of contents at the top by default, which is not convenient for jumping around while reading. So, referring to Sulv’s settings, I modified it into a sidebar TOC. Steps 1. Modify toc.html In a previous article I mentioned that modifications made at the site root have higher priority and override the theme’s original content. So use the following commands to generate and edit toc.html: ...

Building a Personal Blog with Hugo (2) Picking up where we left off, the previous post briefly covered how to install and use Hugo. But stopping right there would feel a bit thin. To ensure a good writing experience and stay focused on producing content, it’s worth spending more time up front — only then will you get twice the result with half the effort later. So this post goes deeper into optimization. ...

Building a Personal Blog with Hugo (1) Hugo is a static website generator written in Go. Its features are as follows: Simple, easy to use, efficient, easy to extend, and quick to deploy. Hugo can be hosted with GitHub Pages. Steps 1. Install Hugo Download the binary or archive for your platform from Hugo Releases. The installation methods are as follows. General Unpack and install the tar.gz archive: 1 2 3 tar -zxvf <your-platform>.tar.gz -C /usr/local/bin \ && cd /usr/local/bin \ && rm LICENSE README.md Debian-based ...