Hugo commands

Some commands and issues you might want to know when building the website using Hugo, including inserting images and resize and center images,adding emoji, travel map, linking to pages and titles, and so on.

SUMMARY #

use themes as your own repositories
insert and resize images
center images
add emoji
add travel map
Why my local website doesn’t update after I update my markdown files?
link pages and tiles
Add Giscus comment in Hugo-book theme

Remove git in themes, and use themes as your own repositories. #

 git rm --cached hugo-book -f

So that, we could modify, git add, and git push the theme repository as our own.

How to insert images and resize images? #

The file tree is like

    ├─content
    │  │  _index.md
    │  └─posts
    │      │  hugo.md
    │      │  _index.md
    │      └─images
    │           Nice.png

In hugo.md file, we add Nice.png and scale it by

{{< figure src="../images/Nice.png" width="400" alt=" "  >}}

Why we need to add ../ in front of images folder, altough hugo.md file and images folder are at the same level?
Because Hugo system sees hugo.md as a foler too. However, Hugo system sees _index.md as a file! Therefore, If we want to insert iamges in _index.md file, the command will be like:
{ {< figure src="../images/Nice.png" width="400" alt=" " >} }

Center the image? #

<center>{ {<figure src="../images/Nice.png" width="400" alt=" ">} }</center>

At the same time, in hugo.toml, add

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

How to add emoji? #

Directly copy emoji icon 👋 and paste to .md file, instead of using :wave:.

Emoji Copy&Paste: https://emojidb.org/number-emojis

How to add a travel map in Hugo? #

Refer to this article

NOTE:
In { {< openstreetmap mapName="<your map name>" >} }, the <your map name> is not the name you give to your map, but the name in the website link of your map. For example, I created a map whose name is Travel, I need to use travel_1036974 in the hugo shortcode.

Why my local website doesn’t update after I update my markdown files? #

Good question. I also find my local website does not update although I have save my changes. I am not clear the excat reason, but It works well if I Press Ctrl+C to stop the local host, and hugo server again, I can see the updated website in http://localhost:1313/.

How to link pages and tiles? #

I am in now.md file now, and there is another page.md which has #Title I want to link. I want to link to page.md and link to #Title I want to link. In page.md file, add an anchor:

# Title I want to link {#anchor}

In now.md file, add commands:

[text] ( {{< ref "./pages.md" >}} ) # link to one page
[text] ( {{< ref "./pages.md#anchor" >}} ) # link to the title

Add Giscus comment in Hugo-book theme #

Create a new public github repository, e.g. site-comment.
Enable the discussions feature.
Install the giscus app

For example,

Configure giscus codeblock. Go to Giscus App, and get the anable Giscus.

5. Add the script to themes\hugo-book\layouts\partials\docs\comments.html, like this

bookComments: false controls whether you want to display comment in this page.