Stack on RuHeYun

Hugo网站美化

Tue, 27 Jan 2026 11:01:58 +0800

网站美化

评论区配置

giscus是利用Github仓库的Discussions来实现的，完全免费。

使用方法

进入官网，giscus官方网站：https://github.com/giscus/giscus

点击右侧giscus.app，到下面配置界面，先点击最上面giscus，进入安装界面

可以选择安装到所有仓库，或者之前创建的静态页面仓库，建议安装在静态页面仓库

返回到配置界面，往下找到配置项

将静态仓库名按照要求填进去

页面与discussion映射关系：只选择第一个，默认已选择，不用改
Discussion按照推荐选择

特性选择建议

主题自定义
启用giscus

上面配置好的信息会出现在这里，下面配置hugo.yaml网站配置文件

在hugo.yaml中找到comments->provider，填上giscus，然后找到下面giscus，按照上图中的参数，找到对应名字填进去就行，比如data-repo<->repo，data-repo-id<->repoID，需要说明的是配置中有两个主题lightTheme、darkTheme，这个参数对应data-theme，可以通过第6步中主题自定义更改这个参数。

1
2

lightTheme: "light_protanopia"
darkTheme: "dark_high_contrast"

先到静态仓库页面，点击settings，右侧向下滑动，找到Features，勾选Discussions

提交代码，评论区配置完成。

网站页脚更改

网站页脚的html文件在以下路径：D:\Dev\MyBlog\blog\themes\hugo-theme-stack\layouts\partials\footer

复制footer.html，放到D:\Dev\MyBlog\blog\layouts\partials\footer文件夹下（前面说过不能改themes内的文件，要把对应文件复制到blog文件夹下进行更改），打开html文件，将内容替换为下面代码

{{- $ThemeVersion := "3.33.0" -}}
<footer class="site-footer">
    <section class="copyright">
        &copy; 
        {{ if and (.Site.Params.footer.since) (ne .Site.Params.footer.since (int (now.Format "2006"))) }}
            {{ .Site.Params.footer.since }} - 
        {{ end }}
        {{ now.Format "2006" }} {{ default .Site.Title .Site.Copyright }}
    </section>

    <section class="custom-footer-text">
        <p style="text-align: left; font-size: 1.1em; margin: 0.5em 0;">
            [ 天天熬夜 <span class="heartbeat">❤️</span> 迟早猝死 ]
        </p>
        <p id="blog-runtime" style="text-align: left; font-size: 0.9em; margin: 0.5em 0; color: #888;">
            这个网站已经运行了: <span id="runtime-value">Loading...</span>
            <span class="floating-end">ღゝ◡╹)ノ♡</span>
        </p>
    </section>

</footer>

<style>
    .custom-footer-text {
        font-family: 'ZCOOL QingKe HuangYou', cursive, sans-serif;
    }

    .custom-footer-text p:first-child {
        font-size: 1.2em;
        /* 可选：加粗 */
        /* font-weight: bold; */
    }

    .heartbeat {
        display: inline-block;
        animation: heartbeat 1.5s ease-in-out infinite;
        color: #e74c3c; /* 红色 */
    }

    @keyframes heartbeat {
        0% { transform: scale(1); }
        15% { transform: scale(1.1); }
        30% { transform: scale(1); }
        45% { transform: scale(1.1); }
        60% { transform: scale(1); }
        75% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
     
    .floating-end {
        display: inline-block;
        animation: float 3s ease-in-out infinite;
    }

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-3px); }
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 设置博客开始时间 (请替换为你的实际建站日期)
        const startDate = new Date("2022-06-18T00:00:00Z"); 

        function updateRuntime() {
            const now = new Date();
            const diffMs = now - startDate;
            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
            const diffHours = Math.floor((diffMs % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
            const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);

            const runtimeStr = `${diffDays} 天 ${diffHours} 小时 ${diffMinutes} 分钟 ${diffSeconds} 秒`;
            document.getElementById('runtime-value').textContent = runtimeStr;
        }

        updateRuntime();
        setInterval(updateRuntime, 1000);
    });
</script>

滚动事件

在页面右下角添加回到顶端和滚动到底部两个按钮。

首先在D:\Dev\MyBlog\blog\static\js路径下新建scroll-button.js，将下面代码复制进去

document.addEventListener('DOMContentLoaded', function() {
    // 创建按钮容器
    const btnContainer = document.createElement('div');
    btnContainer.id = 'scrollButtons';
    btnContainer.style.cssText = `
        position: fixed;
        right: 1.5rem;
        bottom: 1.5rem;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        pointer-events: none;
    `;

    // 创建「到顶部」按钮
    const topBtn = document.createElement('button');
    topBtn.id = 'scrollToTop';
    topBtn.title = '回到顶部';
    topBtn.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>
    `;
    topBtn.style.cssText = `
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--card-background);
        color: var(--card-font-color);
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        pointer-events: auto;
    `;
    topBtn.onmouseover = () => {
        topBtn.style.transform = 'translateY(-2px)';
        topBtn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
        topBtn.style.background = 'var(--theme-color)';
        topBtn.style.color = 'white';
    };
    topBtn.onmouseout = () => {
        topBtn.style.transform = 'translateY(0)';
        topBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
        topBtn.style.background = 'var(--card-background)';
        topBtn.style.color = 'var(--card-font-color)';
    };
    topBtn.onclick = (e) => {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    // 创建「到底部」按钮
    const bottomBtn = document.createElement('button');
    bottomBtn.id = 'scrollToBottom';
    bottomBtn.title = '滚动到底部';
    bottomBtn.innerHTML = `
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
    `;
    bottomBtn.style.cssText = `
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--card-background);
        color: var(--card-font-color);
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        pointer-events: auto;
    `;
    bottomBtn.onmouseover = () => {
        bottomBtn.style.transform = 'translateY(2px)';
        bottomBtn.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
        bottomBtn.style.background = 'var(--theme-color)';
        bottomBtn.style.color = 'white';
    };
    bottomBtn.onmouseout = () => {
        bottomBtn.style.transform = 'translateY(0)';
        bottomBtn.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
        bottomBtn.style.background = 'var(--card-background)';
        bottomBtn.style.color = 'var(--card-font-color)';
    };
    bottomBtn.onclick = (e) => {
        e.preventDefault();
        window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' });
    };

    // 组装
    btnContainer.appendChild(topBtn);
    btnContainer.appendChild(bottomBtn);
    document.body.appendChild(btnContainer);

    // 滚动时动态显示/隐藏（滚动 > 300px 显示）
    window.addEventListener('scroll', () => {
        const show = window.pageYOffset > 300;
        topBtn.style.opacity = show ? '1' : '0';
        topBtn.style.visibility = show ? 'visible' : 'hidden';
        bottomBtn.style.opacity = show ? '1' : '0';
        bottomBtn.style.visibility = show ? 'visible' : 'hidden';
    });

    // 接近底部时隐藏「到底部」按钮
    window.addEventListener('scroll', () => {
        const nearBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 200;
        bottomBtn.style.opacity = nearBottom ? '0' : '1';
        bottomBtn.style.visibility = nearBottom ? 'hidden' : 'visible';
    });
});

然后再页脚的html文件里引入这个js文件

在D:\Dev\MyBlog\blog\layouts\partials\footer路径下的footer.html最下面添加下面一行代码

`1`	`<script src="{{ "js/scroll-buttons.js" \| relURL }}"></script>`

动态背景

引入点线漂浮的动态背景

（1）前往官网particles.js下载Js文件

（2）前往配置界面微调参数，并下载配置Json文件

detect_on设置为window，其余按照自己喜好设置，然后Download。

（3）将上面下载的两个文件放到D:\Dev\MyBlog\blog\assets\background文件夹下

（4）将themes里的custom.html复制到D:\Dev\MyBlog\blog\layouts\partials\footer下，并添加以下代码

<div id="particles-js"></div>

<script src='{{ (resources.Get "background/particles.min.js").Permalink }}'></script>
<script>
  particlesJS.load('particles-js', '{{ (resources.Get "background/particlesjs-config.json").Permalink }}', function() {
    console.log('particles.js loaded - callback');
  });
</script>

<style>
  #particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
</style>

修改默认字体

（1）自行百度谷歌喜欢的字体，然后下载xxx.ttf格式的文件

（2）把字体文件放到D:\Dev\MyBlog\blog\assets\font文件夹下，没有的新建文件夹

（3）修改D:\Dev\MyBlog\blog\layouts\partials\footer路径下的custom.html文件，加入下面代码

<style>
  @font-face {
    font-family: '字体名';
    src: url('{{ (resources.Get "font/XXX.ttf").Permalink }}') format('truetype');
  }

  :root {
    --base-font-family: '字体名';
    --code-font-family: '字体名';
  }
</style>

字体名：随便起个，统一即可

XXX.ttf：替换为实际的文件名，带后缀

自动更改文章最后修改时间

之前写文章，如果要显示最后更新时间，需要在front matter上显示定义lastmod，并且每次改完文章后还需要手动改这个时间，现提供自动更改方案

（1）更改配置文件hugo.yaml，在最下面加入下面代码，注意缩进问题

# 更新时间：优先读取git时间 -> git时间不存在，就读取本地文件修改时间
frontmatter:
  lastmod:
    - :git
    - :fileModTime

# 允许获取Git信息		
enableGitInfo: true

（2）修改主文件夹下.github/workflows/xxx.yaml文件，在运行 hugo -D 命令的step前加入以下配置

jobs:
  deploy:
    steps:
      - name: Git Configuration
        run: |
          git config --global core.quotePath false
          git config --global core.autocrlf false
          git config --global core.safecrlf true
          git config --global core.ignorecase false

（3）更改文章时，会读取git提交时间，或者本地更改时间。

友链、归档多列显示

修改主文件夹下assets/scss/custom.scss文件(不存在则自行创建)，引入以下css样式代码

@media (min-width: 1024px) {
  .article-list--compact {
    display: grid;
    // 目前是两列，如需三列，则后面再加一个1fr，以此类推
    grid-template-columns: 1fr 1fr;
    background: none;
    box-shadow: none;
    gap: 1rem;

    article {
      background: var(--card-background);
      border: none;
      box-shadow: var(--shadow-l2);
      margin-bottom: 8px;
      margin-right: 8px;
      border-radius: 16px;
    }
  }
}

macOS风格代码块

(1) 准备一张macOS代码块的图片, 放到主文件夹下的static/icons文件夹下

(2) 将以下代码复制进assets/scss/custom.scss文件中(不存在则自行创建)

.highlight {
  border-radius: var(--card-border-radius);
  max-width: 100% !important;
  margin: 0 !important;
  box-shadow: var(--shadow-l1) !important;
}

.highlight:before {
  content: "";
  display: block;
  background: url(../icons/macOS-code-header.svg) no-repeat 0;
  background-size: contain;
  height: 18px;
  margin-top: -10px;
  margin-bottom: 10px;
}

代码块折叠

(1) 准备一张向下展开图片，放到assets/icons目录下

(2) 将以下代码复制进layouts/partials/footer/custom.html(文件不存在则自行创建)

<style>
    .highlight {
        /* 你可以根据需要调整这个高度 */
        max-height: 400px;
        overflow: hidden;
    }

    .code-show {
        max-height: none !important;
    }

    .code-more-box {
        width: 100%;
        padding-top: 78px;
        background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .code-more-btn {
        display: block;
        margin: auto;
        width: 44px;
        height: 22px;
        background: #f0f0f5;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        padding-top: 6px;
        cursor: pointer;
    }

    .code-more-img {
        cursor: pointer !important;
        display: block;
        margin: auto;
        width: 22px;
        height: 16px;
    }
</style>

<script>
  function initCodeMoreBox() {
    let codeBlocks = document.querySelectorAll(".highlight");
    if (!codeBlocks) {
      return;
    }
    codeBlocks.forEach(codeBlock => {
      // 校验是否overflow
      if (codeBlock.scrollHeight <= codeBlock.clientHeight) {
        return;
      }
      // 元素初始化
      // codeMoreBox
      let codeMoreBox = document.createElement('div');
      codeMoreBox.classList.add('code-more-box');
      // codeMoreBtn
      let codeMoreBtn = document.createElement('span');
      codeMoreBtn.classList.add('code-more-btn');
      codeMoreBtn.addEventListener('click', () => {
        codeBlock.classList.add('code-show');
        codeMoreBox.style.display = 'none';
        // 触发resize事件，重新计算目录位置
        window.dispatchEvent(new Event('resize'))
      })
      // img
      let img = document.createElement('img');
      img.classList.add('code-more-img');
      img.src = '{{ (resources.Get "icons/codeMore.png").Permalink }}'
      // 元素添加
      codeMoreBtn.appendChild(img);
      codeMoreBox.appendChild(codeMoreBtn);
      codeBlock.appendChild(codeMoreBox)
    })
  }
  
  initCodeMoreBox();
</script>

本文美化功能大多参考网络上的方法和代码，主要参考美化文章，可以在友链里找到。

统计浏览数

本网站使用Vercount作为计数器，具体官方源码为Github。

页脚添加总浏览数

更改D:\Dev\MyBlog\blog\layouts\partials\footer下的footer.html，在最后一行先添加JS引用

1
2

<!-- vercount计数 -->
<script defer src="https://events.vercount.one/js"></script>

然后在footer标签内添加下面代码

<!-- ========== 新增的自定义文本区域 ========== -->
<section class="custom-footer-text">
    ...
    <p style="font-size: 0.9em;">
        本站总访问量 <span id="vercount_value_site_pv">Loading...</span> 次
        总访客数 <span id="vercount_value_site_uv">Loading...</span> 人
    </p>
    ...   
</section>

单篇文章显示阅读量

先在D:\Dev\MyBlog\blog\assets\icons下添加下面图标，命名eye.svg

然后更改D:\Dev\MyBlog\blog\layouts\partials\article\components下的footer.html，如果没有就去themes对应文件复制过来，然后在footer标签内添加下面代码

<!-- 浏览量统计 -->
<section>
    {{ partial "helper/icon" "eye" }}
    <time class="article-time--reading">
        <!-- vercount统计当前页面浏览数的标签 -->
        <span id="vercount_value_page_pv">loading... </span>次
    </time>
</section>

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文件即可。