Hugo Tutorial

3 minutes read

I. Install Hugo & Setup Theme

2 best tutorial about hugo

part 1
part 2

Về cơ bản, chúng ta host blog lên github sẽ tạo 2 repository

  • Repo 1: hieudoan7: chứa các file config của hugo, content, nói chung tất tần tật.
  • Repo 2: hieudoan7.github.io: repo này chứa file html để render lên web

Chú ý: dateformat trong file config.toml (ở thư mục gốc, thư mục mà ta có thể sử dụng hugo command) phải để ở ngày 2.1.2006 ở bất kỳ format nào (vd: “January 02, 2006”) (hình như là theo quy định của Golang :v)

II. Post & Deploy

  • Tạo post
    hugo new posts/mypost.md
  • Chỉnh sửa config toml file mypost.md
    • draft = “false”
    • title = “My Title post”
  • Add nội dung bài post dưới phần toml header
  • Chạy trên local host để check:
    hugo server -w (--watch)
  • Deploy qua hieudoan7.github.io để nó render lên web 
    hugo -d (--deploy) ../hieudoan7.github.io/
  • Push 2 repo lên github để host là được.
    git config --global user.name "hieudoan7
    git config --global user.gmail "hieudoan190598@gmail.com"
    git config --list
    Vào từng cái repo (trong 2 repo đã có file .git rồi nên ko cần dùng git remote)
    git add .
    git commit -m "comment for your commit"
    git push origin master

III. Add comment componet

awesome guide

First, Every article use the single.html template to render page, so in order to add any components or header/footer or everything related to page view, you need to modify the single.html file which is located in themes/hugo-coder/layout/_default/single.html, notice that every other single.html will not be accepted.

Second, you create a disqus.html file in partials folder which is basically a template for comment section and then attach it to the above single.html using valid syntax such as existing file.

IV. Hugo Tips

1. Insert Image in Hugo post

  • Bỏ image vào folder static (cùng config.toml)
  • Link đường dẫn image trong post (/imgs/my_image.jpg) (thư mục gốc / là tương đương với static/)

2. Xuống dòng

  • 2 dấu cách (giống trên stackoverflow, codeforces)

3. Math Expression

Dùng MathJax

  • Tạo file mathjax_support.html trong theme/layouts/partials/
 1<script type="text/javascript" async
 2  src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 3  MathJax.Hub.Config({
 4  tex2jax: {
 5    inlineMath: [['$','$'], ['\\(','\\)']],
 6    displayMath: [['$$','$$']],
 7    processEscapes: true,
 8    processEnvironments: true,
 9    skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
10    TeX: { equationNumbers: { autoNumber: "AMS" },
11         extensions: ["AMSmath.js", "AMSsymbols.js"] }
12  }
13  });
14  MathJax.Hub.Queue(function() {
15    // Fix <code> tags after MathJax finishes running. This is a
16    // hack to overcome a shortcoming of Markdown. Discussion at
17    // https://github.com/mojombo/jekyll/issues/199
18    var all = MathJax.Hub.getAllJax(), i;
19    for(i = 0; i < all.length; i += 1) {
20        all[i].SourceElement().parentNode.className += ' has-jax';
21    }
22  });
23
24  MathJax.Hub.Config({
25  // Autonumbering by mathjax
26  TeX: { equationNumbers: { autoNumber: "AMS" } }
27  });
28</script>
  • Add file này vào footer.html or header.html (trước thẻ </footer>)
1{{ partial "mathjax_support.html" . }}

Nguồn: https://divadnojnarg.github.io/blog/mathjax/

4. Insert table in hugo blog

  • Tạo table using markdown syntax
  • add css style để full border (2px) and padding 1rem
1<style>
2    th, td {
3        padding: 1.0rem;
4    }
5    table, th, td {
6      border: 2px solid black;
7    }
8 </style>

5. Highlight code block

Config to use syntax-highlight in hugo config file.
You can remove all pygment config now because it will be override eventually after using markup.highlight config

 1[markup.highlight]
 2	codeFences = true
 3	guessSyntax = true
 4	hl_Lines = ''
 5	lineNoStart = 1
 6	lineNos = true
 7	lineNumbersInTable = false
 8	noClasses = true
 9	style = 'perldoc'
10	tabWidth = 4

You can also override the syntax highlight configuration in code block.

Example:

1import numpy
2
3print("This is test.\n")

199import "fmt"
200func main() {
201  fmt.Println("Hello world")
202}

You can learn more in the entry-link