Markdown on RuHeYun

Hugo网站搭建

Mon, 26 Jan 2026 12:31:44 +0800

这篇文章主要是记录了使用Hugo和Stack搭建整个网站的过程，以及部署到Github上，并编写了几个方便使用的Bat脚本。

Hugo说明文档

Stack说明文档

Hugo网站搭建过程

下载Hugo

进入Hugo官网

https://gohugo.io/

点击上图Github

右侧界面找到Releases，点击进入

在Assets中找到适合自己电脑的版本

以Windows为例，下载hugo_extended_0.154.5_windows-amd64.zip 。

解压出来放到自定义文件夹内

一共三个文件，只有hugo.exe有用

1
2
3

hugo.exe
LICENSE
README.md

在该文件夹的地址栏敲打cmd，使用以下命令

1
2

hugo new site blog
# blog：是由Hugo生成的含有一些文件的文件夹，可自定义这个名字

进入由Hugo生成的blog文件夹。

下载Stack主题

Hugo官网点击Themes

选择自己喜欢的主题，这里以Stack为例，点击Stack，然后点击Download会跳转到该主题的Github页面，按照上面下载Hugo的方式下载最新版主题源码。

将下载后的主题压缩包解压，文件夹名字去掉版本号，如下图形式，复制到blog文件夹内的themes里

启动Hugo网站

先将D:\Dev\MyBlog文件夹下的hugo.exe，复制到D:\Dev\MyBlog\blog下，然后在该文件夹的地址栏敲打cmd，进入命令行窗口，输入下面命令

`1`	`hugo server -D`

复制图片倒数第二行地址 http://localhost:1313/，去浏览器打开，最基础的网站就搭建好了。

配置Stack主题

主题文件夹路径为D:\Dev\MyBlog\blog\themes\hugo-theme-stack，但是不建议直接改themes内的文件，所以把下图两个重要的文件和文件夹复制到D:\Dev\MyBlog\blog文件夹下

后续如果有要修改hugo-theme-stack内的文件或文件夹，就在blog文件夹下创建相同路径或文件进行修改，blog文件夹优先级高于hugo-theme-stack文件夹。

删除blog文件夹下的hugo.toml文件，使用上面复制的hugo.yaml配置文件。

更改网站名字

baseurl:                 # 可先不填
languageCode: en-us      
theme: hugo-theme-stack  # 与对应文件夹名字相同
title: RuHeYun           # 自定义
copyright: RuHeYun       # 自定义

网站默认为简体中文

1
2
3

DefaultContentLanguage: zh-cn

hasCJKLanguage: true

标题和子标题

zh-cn:
    languageName: 简体中文
    title: RuHeYun              # 自定义
    weight: 2
    params:
        sidebar:
            subtitle: 欢迎来到我的网站！       # 自定义

weight是指在下拉菜单中的位置权重，越靠近0的在上方。

设置每页显示文章个数

1
2

pagination:
    pagerSize: 3  # 自定义

网站的图标

`1`	`favicon: /favicon.ico # '/'必须要带`

在D:\Dev\MyBlog\blog\static目录下放图标。

页脚日期以及文章日期格式

footer:
    since: 2022    # 自定义
    
dateFormat:
    published: 2006-01-02 
    lastUpdated: 2006-01-02

头像设置

sidebar:
        emoji: 🥰        # 自定义
        subtitle: 
        avatar:
            enabled: true
            local: true
            src: img/avatar.png   # 自定义

目录为D:\Dev\MyBlog\blog\assets\img，所有操作都是在blog内操作，不改themes文件夹内的内容。

配置评论区

本网站使用giscus评论软件，这个功能是基于Github的，因此此部分放到部署到Github后。

部署到Github

首先要有Github账号，本地电脑安装了Git，后续需要用 git 将代码上传到 github，这部分需要在本地 git 配置密钥与 github 连接，自行学习关于 git 部分内容。

先创建Github仓库

点击Github头像，点击Repositories，然后点击New创建仓库

两个仓库要求如下：

第一个仓库公开，名字必须是你的github名字.github.io。

第二个仓库隐私，名字随意，比如hugo-code。

手动部署

先改动hugo.yaml配置文件第一行，将网站网址填进去

`1`	`baseurl: https://ruheyun.github.io`

public文件夹是整个网站文件夹经过go语言编译好的包含html文件的文件夹，不包含原始代码。由命令hugo server -D产生的（前面使用过，如果更改了内容就需要重新运行这个命令，更新public文件夹）。

进入public文件夹，地址为D:\Dev\MyBlog\blog\public，在地址栏敲cmd，进入命令行窗口，依次输入下面命令

# 初始化本地仓库
git init
# 添加所有新增文件
git add .
# 提交到本地仓库
git commit -m "first commit"
# 设置本地分支为main
git branch -M main
# 连接远程仓库，需要本地git与远程github通过密钥连接后才能连接仓库
git remote add origin git@github.com:ruheyun/ruheyun.github.io.git
# 将本地仓库推送到远程仓库
git push -u origin main

打开github，到ruheyun.github.io仓库界面

依次点击Settings->Pages->Visit site

或者直接浏览器输入https://ruheyun.github.io/，成功进入网站。

自动部署

按照上面手动部署过程，每次改完内容，都需要运行hugo server -D更新public文件夹，然后将public文件夹推送到远程仓库。这里提供自动部署方案。

生成token

依次点击github头像->Settings->Developer settings->Personal access tokens->Tokens(classic)->Generate new token(classic)

按照图示Note随便写

Expiration建议按照图示选择，表示token永远有效

Select scopes建议按照图示选择

最后生成的token，要自己建个txt文件保留好，只会在生成的这个时候显示，以后不会再显示具体token值了

配置token

下一步，将token值配置到上面创建的第二个隐私仓库里。

首先进入仓库hugo-code页面，依次点击Settings->Secrets and variables->Actions->Repository secrets->New repository secret

然后将token值填进去保存为TOKEN，这个名字可自定义。

配置本地文件

在hugo主文件夹，比如D:\Dev\MyBlog\blog，创建一个.github/workflows/hugo-deploy.yaml文件，将以下内容复制进去，想具体了解更多，可查看Github Action文档

name: deploy

# 代码提交到main分支时触发github action
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.你的token变量名 }}
              EXTERNAL_REPOSITORY: 你的github名/你的仓库名
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy

只需要改动两个地方

1
2

PERSONAL_TOKEN: ${{ secrets.TOKEN }}
EXTERNAL_REPOSITORY: ruheyun/ruheyun.github.io

设置.gitignore文件

# 由hugo命令自动生成的文件
public
resources
.hugo_build.lock

# hugo程序
hugo.exe

这个文件放到主文件夹下，在git推送代码时，会忽略上述文件夹和文件。

推送代码

将所有网站代码推送到hugo-code仓库

在主文件夹D:\Dev\MyBlog\blog的地址栏输入cmd进入命令行，依次执行下面命令

# 初始化本地仓库
git init
# 添加所有新增文件
git add .
# 提交到本地仓库
git commit -m "first commit"
# 设置本地分支为main
git branch -M main
# 连接远程仓库，需要本地git与远程github通过密钥连接后才能连接仓库
git remote add origin git@github.com:ruheyun/hugo-code.git
# 将本地仓库推送到远程仓库
git push -u origin main

上传之后会自动部署静态仓库ruheyun.github.io，稍等一会儿刷新网站就可以看到已更新。

下次更新操作

# 1.更新网站主题代码 
# 2.通过 hugo new content post\myFirstBlog\index.md 生成新文章页面
git add .
git commit -m "first commit0"
git remote add origin git@github.com:ruheyun/hugo-code.git
git push -u origin main

通过上面两种方式更改代码，只需要依次执行上面代码，将主文件夹内的文件上传到隐私仓库即可，静态仓库会自动部署，不用管。

一键式脚本

经过上面的自动部署，但仍需敲一些代码，现将这些代码作成bat脚本，不用再输入代码。

newpost.bat：新建文章页，需要手动输入文章标题，不要含空格。

@echo off
setlocal

set /p title=Enter post title (e.g., Markdown Syntax): 
if "%title%"=="" set title=Untitled Post

set "post_path=content\post\%title%\index.md"

if exist "%post_path%" (
    echo WARNING: Post already exists at %post_path%
    echo Opening server anyway...
) else (
    echo Creating new post: %title%
    hugo new "content/post/%title%/index.md"
)

hugo server -D
pause

localRun.bat：本地运行代码查看，可不运行。

@echo off
setlocal

hugo server -D

pause

update.bat：将本地代码推送到远程仓库，仓库名自定义。

@echo off
setlocal

REM 使用 PowerShell 获取当前时间（ISO 格式）
for /f "usebackq tokens=*" %%i in (`powershell -Command "Get-Date -Format 'yyyy-MM-dd HH:mm:ss'"`) do set "ts=%%i"

REM 如果没有提供提交信息，默认使用时间戳
if "%~1"=="" (
    set "commit_msg=Update on %ts%"
) else (
    set "commit_msg=%~1"
)

git add .
git commit -m "%commit_msg%"
git remote add origin git@github.com:ruheyun/hugo-code.git 2>nul
git push -u origin main

pause

将上面三个bat文件放到hugo主文件夹下D:\Dev\MyBlog\blog，根据想要的功能，双击对应的bat文件即可。

MyFirstBlog

Sun, 25 Jan 2026 16:51:02 +0800

文章的前言部分，可有可无。

Hello Hugo!

测试github自动部署功能

名言

“成功不是终点，而失败并不致命：有勇气继续下去才是最重要的。”——温斯顿·丘吉尔
“宁可在独创性上失败，也不要在模仿中成功。”——赫尔曼·梅尔维尔
“成功之路和失败之路几乎是相同的。”——科林·戴维斯
“成功通常属于那些忙于寻找成功的人。”——亨利·大卫·梭罗
“学会从失败中成功。挫折和失败是通往成功最可靠的垫脚石。”——戴尔·卡耐基

三级标题

没有内容了。。。

hugo文档，必须要有三级标题，才会显示右侧目录…

测试是否自动更改最后更新时间

Markdown语法

Sat, 18 Jun 2022 11:35:06 +0800

Markdown语法

一级标题用：# 标题内容

多级标题

二级标题用：## 标题内容

三级标题

三级标题用：### 标题内容

以此类推，但markdown最多可有六级标题

字体

字体加粗用：**字体内容**

hello world！

字体斜体用：*字体内容*

hello world！

字体加粗且斜体用：***字体内容***

hello world！

字体删除横杠用：~~字体内容~~

~~hello world！~~

字体加下划线用：<u>hello world!</u>

hello world!

字体下标表示用：H~2~o

H2o

字体上标表示用：n^2^

n^2^

字体高亮用：==字体内容==

==hello world!==

表情符号

常用表情符号：:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary:

:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:

:smile: :laughing: :dizzy_face: :sob: :cold_sweat: :sweat_smile: :cry: :triumph: :heart_eyes: :relaxed: :sunglasses: :weary:

:+1: :-1: :100: :clap: :bell: :gift: :question: :bomb: :heart: :coffee: :cyclone: :bow: :kiss: :pray: :sweat_drops: :hankey: :exclamation: :anger:

引用

引用内容用：> 内容

二级引用用：>> 内容

两次enter键跳出引用

我的第一篇博客

二级引用

分割线

常用的分割线用：---或者***回车即可

图片

插入本地图片用：![图片名字](图片地址绝对路径)

插入网络图片用：![图片名字](图片地址图片链接)

本地地址和网络上图片地址可能会由于本地的更改删除或者网络图片出处的删除，而导致图片无效而显示不出来，建议大家把需要的图片上传到自己创建的图床里。

超链接

超链接用：[链接名字](链接地址)

点击跳转到我的主页

自动链接用：<链接地址url或者邮箱>

https://ruheyun.github.io/

列表

有序列表用：1. 内容

无序列表用：- 内容

表格

插入表格最简单方法，直接鼠标右键选插入>表格即可

名字	性别	生日
如何	男	2022.6.18

插入表格第二种方式需要用格式：

|属性|属性|属性|

|--|--|--|

|内容|内容|内容|

名字	性别	生日
如何	男	2022.6.18

代码块

编写代码用：```语言名称回车即可

public class HelloWorld {
	public static void main(String[] args) {
		System.out.println("Hello World!");
	}
}

行内代码用：``两点内书写内容

Html

Markdown语法，同样支持Html语法，所以如果想要更丰富的格式，则可以借助Html、CSS、JS等实现。

2022.6.18是我第一天注册博客园开始学习写文章，为了完成属于自己的第一篇博客，我熬夜写到半夜才完成。虽然有很多地方不足，但是我很开心。也希望自己可以在接下来学习过程中坚持写博客，不放弃，希望可以让自己在学习过程中与大家一起讨论，分享总结。最后，祝各位朋友心想事成！

Markdown Syntax Guide

Mon, 11 Mar 2019 00:00:00 +0000

这是Hugo默认生成的文章，本网站已有类似Markdown语法文章，所以不再对此文章进行翻译。

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

Paragraph

Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike¹

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

A	B	C	D	E	F
Lorem ipsum dolor sit amet, consectetur adipiscing elit.	Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex.	Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus	Proin sit amet velit nec enim imperdiet vehicula.	Ut bibendum vestibulum quam, eu egestas turpis gravida nec	Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien

Code Blocks

Code block with backticks

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block indented with four spaces

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Code block with Hugo’s internal highlight shortcode

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Diff code block

[dependencies.bevy]
git = "https://github.com/bevyengine/bevy"
rev = "11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13"
- features = ["dynamic"]
+ features = ["jpeg", "dynamic"]

List Types

Ordered List

First item
Second item
Third item

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H₂O

Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Hyperlinked image

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎