Refer images in Hugo blog

TL;DR Place your image file under static directory. E.g., static/cat1/my_image.png. Refer the image without static. e.g., /cat1/my_image.png. ![alt text](/cat1/my_image.png "This is a caption.")

Custom configuration, and inject JavaScript in posts

Motivation To enable TikZ in my note, I add a header in layout/partial/header.html at first. But this change injects the javascript lines into all my posts which don’t need to include the TikZ. So I want to inject JavaScript in case that I mark the post as “TikZ enabled”. How to Create a HTML template In layouts/partials/header.html. {{ if and .IsPage (eq (.Param "tikz") true) }} <link rel="stylesheet" type="text/css" href=""> <script src="https://tikzjax.

Use a theme - Learn

The theme - Learn When is it good? Write about a theme. hugo new site spec_page cd spec_page git init git submodule add themes/hugo-theme-learn echo "theme = \"hugo-theme-learn\"" >> config.toml hugo new general/ Memo: Your personal page

Reference your own contents in Hugo

TL;DR Please delete a backquote (\) in the follwoing snippet. I added it because of a Hugo rendering issue. #[text to be hyperlinked]({\{< ref "hugo/" >}}) When you open this hugo document in local hugo server the link is referred as http://localhost:1313/hugo/article. When you open this hugo document on the hosted server, the link is referred as http://{your_base_URL_in_config.toml}/hugo/article.

Table Of Contents (TOC) in Hugo

Enabling TOC Here is the official document about TOC. When you want to enabling TOC feature in Hugo, add the following line in config.toml. Then, TOC will enabled at all posts. [Params] ... toc = true ... Configure TOC Here is the official document about TOC configurations. I don’t need to configure it detail enough, added the disription in config.toml. [markup] [markup.tableOfContents] startLevel = 2 endLevel = 4 ordered = false startLevel = 1: List to the TOC from #.

Use Mermaind in Hugo

I think my solution here is not the best way to use Mermaid in Hugo. What is Mermaid? Mermaid is a sequence diagram generator written in Javascript. Not only sequence diagrams, Mermaid can also generate simple graphs. Enabling Mermaid in Hugo - use mermaid-cli Failures I tried two patterns but I failed both cases. Make a template in the theme Mainroad. I’ve Tried to copy MathJax template but failed.

Set posts template in Hugo project

Tips - Change the template which generated by hugo new You can define a template in the file archetypes/ Here is my sample. --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} categories: - "Draft" tags: - "dummy_tag" isCKJLanguage: false mathjax: false comments: false draft: true ---

Mainroad configuration manual on Hugo

Most of the information on this page is in the official document. This post is a personal memo to remind me of what I did. Main page It “specifies section pages to show on home page and the “Recent articles” widget.” The following config line shows content/general and content/hugo category on our main page. [Params] mainSections = ["general", "hugo"] Add Google Analytics Mainroad theme supports Google Analytics as default, so you don’t need to input the JavaScript in the template manually.

Highlight code block in Hugo

Highlight codes in Hugo - It’s changed Old Hugo Around a year ago (2019), we need to configure pygments in order to highlight codes in code block. Here are sample lines in config.toml file. ... pygmentsCodefences = true pygmentsCodefencesGuessSyntax = true pygmentsStyle = "monokai" ... Latest Hugo (2020) At the new version Hugo in 2020, Hugo officially supports code highlight as a default as a default. Official syntax highlighting:

Setup Hugo Blog

Hugo is a static web site generator. I use Hugo to make this page (see general->impress). Caution I wouldn’t recommend this method if you want to upgrade hugo continuously. Install TL;DR If you are Go-lang user, please go next section. Unless, I highly recommend you, who just want to use Hugo features (not Go), to install as follows (official says “Install Hugo from Tarball”). curl -sSL -o hugo.tar.gz tar xvfz hugo.