How SSG Get Work? & Hugo theme creation
导言
It's not how to customize a Hugo theme but how to create a theme?
Excellent Video Resource
We're still on the lookout for an exceptional blog or overview paper to complement our understanding of this topic. Stay tuned for updates!
Outstanding Blog or Overview Paper
The key words are "rethink", "perspective"
Deploy a real-time interaction example¶
I choose our achived acsa-lab theme to continue developping.
git clone [email protected]:swangeese/acsa-web.git acsa-web-test
cd acsa-web-test
git clone [email protected]:swangeese/acsa-static.git static
hugo server --bind=222.195.72.221 --baseURL=http://222.195.72.221 -p 1313 -D -d ./public
If you close your firewall ufw status, you can see your web online.
how to create a theme?¶
create empty theme1
default files structure explaination
# shaojiemike @ icarus1 in ~/github/acsa-web-test on git:master x [19:37:24]
$ tree themes/topdown
themes/topdown
|-- LICENSE
|-- README.md
|-- archetypes
| `-- default.md
|-- layouts
| |-- 404.html
| |-- _default
| | |-- baseof.html
| | |-- list.html
| | `-- single.html
| |-- index.html
| `-- partials
| |-- footer.html
| |-- head.html
| `-- header.html
|-- static
| |-- css
| `-- js
`-- theme.toml
Only the layouts/_default/baseof.html is not empty
<!-- 文档类型声明，指定文档使用的HTML版本。 -->
<!DOCTYPE html>
<html>
<!-- input head.html in partials folder to here -->
{{- partial "head.html" . -}}
<body>
<!-- input header.html in partials folder to here -->
{{- partial "header.html" . -}}
<div id="content">
<!-- 一个Go语言中的HTML模板引擎语法，表示在这里定义一个名为 "main" 的块。具体的 "main" 块内容将由其他模板文件提供。 -->
{{- block "main" . }}{{- end }}
</div>
<!-- input footer.html in partials folder to here -->
{{- partial "footer.html" . -}}
</body>
</html>
deploy the empty theme
cd /rep-root
hugo server -t topdown --bind=222.195.72.221 --baseURL=http://222.195.72.221:1314 -D -d ../public_2
And the website is clean blank paper
Hugo page model¶
所以 homepage 点击 后会进入_default 的list.html , 之后再点击会进入single.html。
不使用default
- 同名文件夹
- 设置
type或者layout