1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256

baseurl: https://example.com  # The base URL of the website. Replace it with your own domain.  
languageCode: en-us  # The default language code of the website. "zh-cn" refers to Simplified Chinese.  
themehugo-theme-stack # The Hugo theme used here is the Stack theme.  
paginate: 3 # The number of items displayed per page, typically used for pagination settings.  
title: Example Site # The title of the website, displayed in the browser tab.  
copyright: Example Person # The copyright information of the website, usually displayed at the bottom of the page.  

# Theme i18n support  
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw  
DefaultContentLanguage: en # Sets the default content language for the website. See available options in the comment above.  

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]  
# This will make .Summary and .WordCount behave correctly for CJK languages.  
hasCJKLanguage: false # If the default language is Chinese, Japanese, or Korean, set this to true to ensure proper summary and word count behavior.  

languages:  
    en:  
        languageName: English # English language configuration  
        title: Example Site # English site title  
        weight: 1 # Language weight; lower values appear first in sorting  
        params:  
            description: Example description # English site description  
    zh-cn:  
        languageName: 中文 # Chinese language configuration  
        title: 演示站点 # Chinese site title  
        weight: 2 # Chinese site language weight  
        params:  
            description: 演示说明 # Chinese site description  
    ar:  
        languageName: عربي # Arabic language configuration  
        languag```markdown
direction: rtl  # Text direction, right-to-left
        title: Demo Site  # Arabic site title
        weight: 3  # Arabic site language weight
        params:
            description: Demo Description  # Arabic site description

services:
    # Change it to your Disqus shortname before using
    disqus:
        shortname: "hugo-theme-stack"  # Disqus comment system shortname; replace with your own Disqus shortname.
    # GA Tracking ID
    googleAnalytics:
        id:  # Google Analytics tracking ID for website traffic statistics.

permalinks:
    post: /p/:slug/  # Permanent link format for blog posts, using the post's slug as the path.
    page: /:slug/  # Permanent link format for pages.

params:
    mainSections:
        - post  # Main content section, displaying article content.
    featuredImageField: image  # Name of the featured image field.
    rssFullContent: true  # Whether the RSS feed includes full content.
    favicon: # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)
        # Path to the website's favicon, e.g., `/favicon.ico`.

    footer:
        since: 2020  # Year the website was created, typically displayed in the footer.
        customText:  # Custom footer text.

    dateFormat:
        published: Jan 02, 2006  # Published date format.
        lastUpdated: J  # Last updated date format (incomplete in original).
```an 02, 2006 15:04 MST  # Last updated date format.

    sidebar:
        emoji: 🍥  # Emoji displayed next to the sidebar title.
        subtitle: Lorem ipsum dolor sit amet, consectetur adipiscing elit.  # Subtitle of the sidebar.
        avatar:
            enabled: true  # Whether to enable avatar display.
            local: true  # Whether to use a local avatar.
            src: img/avatar.png  # Path to the avatar image.

    article:
        math: false  # Whether to support math formula rendering.
        toc: true  # Whether to display the table of contents.
        readingTime: true  # Whether to show estimated reading time.
        license:
            enabled: true  # Whether to enable article copyright information.
            default: Licensed under CC BY-NC-SA 4.0  # Default license agreement.

    comments:
        enabled: true  # Whether to enable the comment feature.
        provider: disqus  # Selected comment provider, default is Disqus.

        disqusjs:
            shortname:  # DisqusJS shortname.
            apiUrl:  # DisqusJS API URL.
            apiKey:  # DisqusJS API Key.
            admin:  # DisqusJS admin username.
            adminLabel:  # DisqusJS admin label.

        utterances:
            repo:  # GitHub repository address for Utterances comment system.
            issueTerm: pathname  # Utterances comment system issue term.The issue association method uses the page path.  
            label:  # Label for the Utterances comment system.  

        beaudar:  
            repo:  # GitHub repository address for the Beaudar comment system.  
            issueTerm: pathname  # Issue association method for the Beaudar comment system.  
            label:  # Label for the Beaudar comment system.  
            theme:  # Theme for the Beaudar comment system.  

        remark42:  
            host:  # Host address for Remark42.  
            site:  # Site identifier for Remark42.  
            locale:  # Language setting for Remark42.  

        vssue:  
            platform:  # Platform used by Vssue (e.g., GitHub).  
            owner:  # Owner of the Vssue comment repository.  
            repo:  # GitHub repository address for Vssue comments.  
            clientId:  # OAuth app Client ID for Vssue.  
            clientSecret:  # OAuth app Client Secret for Vssue.  
            autoCreateIssue: false  # Whether to automatically create a comment issue.  

        waline:  
            serverURL:  # Server URL for the Waline comment system.  
            lang:  # Language setting for Waline.  
            pageview:  # Whether to enable page view statistics.  
            emoji:  # Emoji package address for Waline.  
                - https://unpkg.com/@waline/emojis@1.0.1/weibo  
            requiredMeta:  
                - name  # Required metadata when commenting.Fields to be filled in:  
- username  # Field required for comments, username.  
- email  # Field required for comments, email address.  
- url  # Field required for comments, website URL.  

locale:  
- admin: Admin  # Administrator name for the Waline comment system.  
- placeholder:  # Placeholder text for the Waline comment box.  

twikoo:  
- envId:  # Environment ID for the Twikoo comment system.  
- region:  # Deployment region for the Twikoo comment system.  
- path:  # Path for the Twikoo comment system.  
- lang:  # Language setting for the Twikoo comment system.  

cactus:  
- defaultHomeserverUrl: "https://matrix.cactus.chat:8448"  # Default homeserver URL for Cactus.Chat.  
- serverName: "cactus.chat"  # Server name for Cactus.Chat.  
- siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)  
# Site name for Cactus.Chat, must match the registered identifier.  

giscus:  
- repo:  # GitHub repository address for the Giscus comment system.  
- repoID:  # Unique identifier for the Giscus repository.  
- category:  # Category name for Giscus.  
- categoryID:  # Unique identifier for the Giscus category.  
- mapping:# Giscus Issue Association Method  
            lightTheme:  # Giscus light theme settings  
            darkTheme:  # Giscus dark theme settings  
            reactionsEnabled: 1  # Whether to enable Giscus reactions  
            emitMetadata: 0  # Whether to enable Giscus metadata emission  

        gitalk:  
            owner:  # Repository owner for Gitalk comment system  
            admin:  # Administrator username for Gitalk comment system  
            repo:  # GitHub repository address for Gitalk comments  
            clientID:  # OAuth application Client ID for Gitalk  
            clientSecret:  # OAuth application Client Secret for Gitalk  

        cusdis:  
            host:  # Host address for Cusdis comment system  
            id:  # Site identifier for Cusdis  

    widgets:  
        homepage:  
            - type: search  # Homepage widget: search functionality  
            - type: archives  # Homepage widget: article archives  
              params:  
                  limit: 5  # Number of archived articles to display  
            - type: categories  # Homepage widget: article categories  
              params:  
                  limit: 10  # Number of categories to display  
            - type: tag-cloud  # Homepage widget: tag cloud  
              params:  
                  limit: 10  # Number of tags to display  
        page:  
            - type: toc  #The widget on the page displays the table of contents for the article.

    opengraph:
        twitter:
            # Your Twitter username
            site:  # Your Twitter username, which will be used in OpenGraph metadata.
            # Available values: summary, summary_large_image
            card: summary_large_image  # Type of Twitter card. Options include `summary` or `summary_large_image`, with the latter displaying a large image.

    defaultImage:
        opengraph:
            enabled: false  # Whether to enable a default OpenGraph image for pages without a featured image.
            local: false  # Whether to use a local image as the OpenGraph image.
            src:  # Path to the default OpenGraph image.

    colorScheme:
        # Display toggle
        toggle: true  # Whether to show the color mode toggle button on the page.

        # Available values: auto, light, dark
        default: auto  # Default color mode. Options include auto-switching (auto), or fixed to light (light) or dark (dark).

    imageProcessing:
        cover:
            enabled: true  # Whether to enable automatic processing for cover images, such as cropping and scaling.
        content:
            enabled: true  # Whether to enable automatic processing for content images.

### Custom menu
### See https://stack.jimmycai.com/config/menu
### To remove about, archive, and search page menu items, remove the `menu` field fromtheir FrontMatter  
menu:  
    main: []  # Custom configuration for the main menu, where navigation links can be added.  

    social:  
        - identifier: GitHub  # Identifier for the social link, typically used to specify the icon.  
          name: GitHub  # Display name of the link.  
          url: https://GitHub.com/CaiJimmy/hugo-theme-stack  # Link to the GitHub profile.  
          params:  
              icon: brand-GitHub  # Social icon used, in this case, the GitHub icon.  

        - identifier: twitter  # Another social link configuration, here for Twitter.  
          name: Twitter  # Display name for the Twitter link.  
          url: https://twitter.com  # Link to Twitter.  
          params:  
              icon: brand-twitter  # Social icon used, in this case, the Twitter icon.  

related:  
    includeNewer: true  # Whether to include newer articles in related posts.  
    threshold: 60  # Similarity threshold for matching related articles, ranging from 0 to 100.  
    toLower: false  # Whether to convert tags and categories to lowercase.  
    indices:  
        - name: tags  # Use tags as the basis for matching related articles.  
          weight: 100  # Weight value for tag matching.  
        - name: categories  # Use categories as the basis for matching related articles.  
          weight: 200  # Weight value for category matching.  

markup:  
    goldmark:  
        renderer:  
            ## Set to true if you have HTML content inside Markdown  
            unsafe: true  # If MarkdoThe `wn` contains HTML content, set to `true` to allow rendering this HTML.

    tableOfContents:
        endLevel: 4  # The maximum heading level for table of contents generation.
        ordered: true  # Whether to use ordered lists for table of contents items.
        startLevel: 2  # The starting heading level for table of contents generation.

    highlight:
        noClasses: false  # Whether to disable CSS class names for syntax highlighting.
        codeFences: true  # Whether to enable syntax highlighting for code blocks.
        guessSyntax: true  # Whether to automatically guess the language for syntax highlighting in code blocks.
        lineNoStart: 1  # The starting value for line numbers in code blocks.
        lineNos: true  # Whether to display line numbers in code blocks.
        lineNumbersInTable: true  # Whether to display line numbers in a table format.
        tabWidth: 4  # The width of tabs in code blocks (in spaces).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

+++
author = "Hugo Authors"  # Author name, used forTitle: Markdown Syntax Guide  
Date: 2019-03-11  
Description: Sample article showcasing basic Markdown syntax and formatting for HTML elements.  
Tags: ["markdown", "css", "html", "themes"]  
Categories: ["themes", "syntax"]  
Series: ["Themes Guide"]  
Aliases: ["migrate-from-jekyl"]  
Image: "pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg"  

Hugo comes with an auto-generated Front Matter template, but in reality, Hugo supports far more Front Matter fields than the default template provides. Below are some commonly used fields and their purposes. You can either mimic the original template for writing or edit the `default.md` file in the `archetypes` folder to customize a new Front Matter template. When using the `hugo new` command to create a new article, Hugo will automatically generate Front Matter based on the template in the `archetypes` directory.  

#### Common Front Matter Fields Explained  
- `title`: Article title. The auto-generated title matches the filename.  
- `date`: Article creation date. The default date is the file creation date.  
- `lastmod`: Last modification date of the article.  
- `description`: Brief description of the article, used for summaries or SEO optimization.### Front Matter in Hugo Blog Posts

When writing a blog post in Hugo, the content is typically divided into two parts: **Front Matter** and the **main body**. Front Matter is written in YAML, TOML, or JSON format and is placed at the beginning of the file, enclosed between `---` (for YAML) or `+++` (for TOML). The main body is written in Markdown.  

For example, here’s a simple Front Matter example in YAML format:  

```yaml
---
title: "My First Blog Post"
date: 2023-10-01T12:00:00+08:00
categories: ["Tech"]
tags: ["Hugo", "Blogging"]
draft: false
---

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

cd public/  # Enter the public folder  

git init  # Initialize the current folder (i.e., the public folder) as a local git repository  

git remote add origin git@GitHub.com:username/username.GitHub.io  
# Link to the remote repository.  
# The remote repository address (git@GitHub.com:username/username.GitHub.io)  
# You can also go to the GitHub repository -> Code -> SSH to copy the remote repository address  

git add .  # Add all files in the current folder to the staging area  

git commit -m "My first commit"  # Commit the changes with a message  

git push -u origin main  # Push to the remote repository (main branch)  

1
2

git config --global user.name "Your Name"  
git config --global user.email "youremail@example.com"  

1
2
3
4
5
6

Before pushing code for the first time, you need to perform the following configuration. Afterward, Git will automatically request to associate with your GitHub account.

```bash
git config --global user.name "Your GitHub Username"
git config --global user.email "The email you used to register for GitHub"

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

name: deploy

# Trigger GitHub Action when code is pushed to the main branch
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
              fetch-depth: 0

        - name: Setup Hugo
          uses: peaceiris/actions-hugo@v3
          with:
              hugo-version: "latest"
              extended: true

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/actions-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.YOUR_TOKEN_VARIABLE_NAME }}
              EXTERNAL_REPOSITORY: username/repository-name
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy

1
2
3
4

public
resources
.hugo_build.lock
hugo.exe

1
2
3
4
5
6
7

git init
git add .
git commit -m "comment"
git branch -m main
git remote add origin git@github.com:username/repository-name.git
```Username/RepositoryName.git  
git -u push origin main