Posted 2023-11-27Updated 2025-01-30OOW5 minutes read (About 745 words)

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 theme[^1]

1	hugo new theme topdown

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>

这是一个基本的HTML文档结构，但它包含了一些使用Go语言中的HTML模板引擎的语法。

deploy the empty theme

1 2	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

参考文献

[^1]: Creating a Hugo Theme From Scratch

How SSG Get Work? & Hugo theme creation

http://icarus.shaojiemike.top/2023/11/27/OutOfWork/3-homepage/deployment/howSSGGetWork/

Author

Shaojie Tan

Posted on

2023-11-27

Updated on

2025-01-30

Licensed under

How SSG Get Work? & Hugo theme creation

Deploy a real-time interaction example

how to create a theme?

Hugo page model

参考文献

Author

Posted on

Updated on

Licensed under

Like this article? Support the author with

Catalogue

Categories

Subscribe for updates

follow.it

Links

Recents

Archives

Tags