Starting from Scratch: Creating and Pushing Your Blog Posts with Hugo and Git

Build A Github Repository

ԅ(¯﹃¯ԅ)

Initialize

Create a Github repository and set the repository name.

Link to Github

Run the code in order in the PowerShell under the target directory:

1
2
3
4
5
6


cd dir_name
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/....
git push origin main

Hugo: Local Preview

Hugo comes with a built-in development server that allows you to preview the site in real time on the server:

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


cd D:/html
D:/hugo_extended/hugo server
    Watching for changes in D:\html\{archetypes,assets,content,data,i18n,layouts,static,themes}
    Watching for config changes in D:\html\hugo.yaml, D:\html\themes\hugo-theme-stack\config.yaml
    Start building sites …
    hugo v0.143.1-0270364a347b2ece97e0321782b21904db515ecc+extended windows/amd64 BuildDate=2025-02-04T08:57:38Z VendorInfo=gohugoio


                    | EN  
    -------------------+-----
    Pages            | 48  
    Paginator pages  |  2
    Non-page files   |  0
    Static files     | 13
    Processed images |  0
    Aliases          | 16
    Cleaned          |  0

    Built in 409 ms
    Environment: "development"
    Serving pages from disk
    Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
    Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
    Press Ctrl+C to stop

It supports for real-time revising and updating.

Hugo: Write A Post

New a post

( •̀ .̫ •́ )✧

Run the code in order in the PowerShell:

1
2


cd D:/html
D:/hugo_extended/hugo new post/fileName.md

Push to Github

(｡･ω･｡)ﾉ♡

Run the code in order in the PowerShell:

1
2
3
4
5


D:/hugo_extended/hugo
cd public
git add .
git commit -m "test"
git push origin main

Hugo: LaTeX Configuration

(ง๑ •̀_•́)ง

To render mathematical formulas in blog posts, you need to include the KATEX stylesheet. Specifically, create a math.html file in the <your_hugo_site>/layouts/partials/ folder and add the following content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.css" 
    integrity="sha384-wcIxkf4k558AjM3Yz3BBFQUbk/zgIYC2R0QpeeYb+TwlBVMrlgLqwRjRtGZiK7ww" 
    crossorigin="anonymous"
/>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/katex.min.js" integrity="sha384-hIoBPJpTUs74ddyc4bFZSM1TVlQDA60VBbJS0oA934VSz82sBx1X7kSx2ATBDIyd" crossorigin="anonymous"></script>

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.10/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"
    onload="
    window.addEventListener('DOMContentLoaded', function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '$', right: '$', display: false},
                {left: '\\$$', right: '\\\\$$', display: false},
                {left: '\\$$', right: '\\\\$$', display: true}
            ]
        });
    });
"></script>

Then again create a extend_head.html file in the <your_hugo_site>/layouts/partials/ folder and add the following content:

1
2
3


{{ if or .Params.math .Site.Params.math }}
{{ partial "math.html" . }}
{{ end }}

At last, edit theme.toml or config.toml in the themes/<your_theme> folder and add the following content:

1
2


[params]
    math = true # Add LaTeX support