How to Install Theme SakuraChiyo
Step one, check your Hugo version.
Run this command:
1hugo version
and you could check the version of Hugo installed on your PC. It is tested that v0.143.0 is safe for theme SakuraChiyo.
Step two, create a site skeleton.
1hugo new site MySite --format yaml
2# Replace "MySite" with name of your own website.
3# Format yaml is recommended as it is easier to read than format toml.
Step three, install theme SakuraChiyo.
All Hugo themes reside in MySite/themes directory. It’s same for SakuraChiyo.
Git clone is the most convenient way. At the root folder of MySite, run:
1git clone https://github.com/realyezhihao/SakuraChiyo.git
Another way for non-git users is to download SakuraChiyo as ZIP from the Github Release and extract in your themes directory at MySite/themes/SakuraChiyo.
Step four, set SakuraChiyo as your Hugo site theme.
In MySite/hugo.yaml or MySite/config.yaml, add
1theme: "SakuraChiyo"
Here is the example hugo.yaml of this demo site:
1params:
2 draft: false
3 toc: false
4 math: false
5 footer:
6 author: Sakura_Chiyo
7 since: 2025
8
9theme: "hugo-SakuraChiyo"
10baseurl: /hugo-SakuraChiyo/ #update this to your actual URL
11footnotereturnlinkcontents: "↩"
12languages:
13 en:
14 languageName: English
15 languageCode: en-us
16 contentDir: "content/en"
17 title: Demo Site in Theme SakuraChiyo
18 weight: 1
19 menu:
20 blognav:
21 - name: Home
22 url: "/"
23 weight: 1
24 - name: Page1
25 url: "/page1/"
26 weight: 2
27 - name: Page2
28 url: "/page2/"
29 weight: 3
30 - name: Tags
31 url: "/tags/"
32 weight: 4
33 - name: 简中
34 url: "/zh-cn/"
35 weight: 5
36 zh-cn:
37 languageName: 简中
38 languageCode: zh-cn
39 contentDir: "content/zh-cn"
40 title: SakuraChiyo主题的样例网站
41 weight: 2
42 menu:
43 blognav:
44 - name: 首页
45 url: "/zh-cn/"
46 weight: 1
47 - name: 页面1
48 url: "/zh-cn/page1/"
49 weight: 2
50 - name: 页面2
51 url: "/zh-cn/page2/"
52 weight: 3
53 - name: 标签页
54 url: "/zh-cn/tags/"
55 weight: 4
56 - name: English
57 url: "/"
58 weight: 5
59
60# For beginners the following is not recomended to change.
61taxonomies:
62 category: tags
63titleCaseStyle: "none"
64markup:
65 tableOfContents:
66 startLevel: 1
67 endLevel: 4
68 ordered: false
69 highlight:
70 lineNos: true
71 lineNumbersInTable: false
72 style: github-dark
73 goldmark:
74 extensions:
75 passthrough:
76 delimiters:
77 block: # maths block display
78 - - \[
79 - \]
80 inline: # maths inline display
81 - - \(
82 - \)
83 - - $
84 - $
85 enable: true
You might customize it to suit your demands.
Customisation
To change the favicon of your site, please visit https://favicon.io/. Download the ZIP of your icons from there and extract in MySite/assets/image/webicon.
To change the avatar of your site, just put the avatar.jpg at MySite/assets/image. The picture must be .jpg format and renamed “avatar”. A picture with equal height and width is recommended.
1MySite/
2├── assets/
3| ├── image/
4| | ├── webicon/
5| | | ├── android-chrome-192x192.png
6| | | ├── android-chrome-512x512.png
7| | | ├── apple-touch-icon.png
8| | | ├── favicon-16x16.png
9| | | ├── favicon-32x32.png
10| | | ├── favicon.ico
11| | | └── site.webmanifest
12| | └── avater.jpg
13| ...
14...