Hugo Stack 主题搭建指南：从环境配置到静态博客上线全流程

前言

参考站点

GitHub - CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers

Stack | Card-style Hugo theme designed for bloggers

起步

1.环境准备

分为本地开发环境和服务器工作环境两个部分

本地开发环境(Windows平台)

1.安装Hugo Framework

前往 Hugo Github Releases 页面下载最新版本的Hugo extended版本

hugo_extended_{version id}_windows-amd64.zip

下载完后将其内部的 hugo.exe 程序解压至 <你自己的开发目录> 文件夹中，可以直接在目录中打开终端使用或添加环境变量

2.安装PowerShell 7 —— 命令行环境

(注意：这不是Windows默认安装的Windows PowerShell，而是PowerShell 7，后者是更新的版本)

右键任务栏 Windows 徽标，打开终端(管理员)，并键入以下指令来安装PowerShell 7

winget install --id Microsoft.PowerShell --source winget

等待安装完成后点击终端窗口顶部右侧的折叠栏 –> 进入设置 –> 将默认配置文件改为 PowerShell

powershell

3.安装Git —— 拉取主题

前往 Git 官方页面下载并安装最新版本的Git

4.安装WinSCP —— 上传构建文件

前往 WinSCP Download Page 下载并安装最新版本的WinSCP

服务器工作环境(Debian为例)

通过SSH远程连接上你的服务器，并获取root用户权限，键入以下代码安装 Nginx

1
2
3
4
5
echo "deb http://nginx.org/packages/$(lsb_release -is | tr '[:upper:]' '[:lower:]') $(lsb_release -cs) nginx" | sudo tee /etc/apt/sources.list.d/nginx.list
curl -fsSL https://nginx.org/keys/nginx_signing.key | sudo tee /etc/apt/trusted.gpg.d/nginx.asc
apt update
apt install nginx -y
chown -R www-data:www-data /var/www/html

2.站点构建

在本地文件夹内打开PowerShell，并键入以下代码新建一个站点，并拉取Stack主题

1
2
3
hugo new site mysite
cd mysite
git clone https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

编辑目录下的 hugo.toml 中添加以下内容

1
theme = 'hugo-theme-stack'

随后即可在PowerShell中运行如下命令来运行本地开发服务端进行预览，浏览器访问http//:localhost:1313

1
hugo server -buildDrafts

example

使用以下命令来构建站点文件，默认保存在目录的public文件夹下

1
hugo --cleanDestinationDir

通过此方法安装的主题，请务必记住任何时刻不要直接修改themes目录下的主题文件，如果你需要自定义主题，请按照相同的路径复制到项目根目录进行编辑，Hugo会优先使用根目录的内容以覆盖主题默认内容

举个例子，你要修改themes\hugo-theme-stack\layouts\index.html这个文件，不要直接进行编辑，而是将此文件复制到根目录\layouts\index.html后再进行编辑

注意：主题配置文件格式为yaml与hugo的toml不同，修改的时候请注意！网络上有很多两者格式的转换器，可自行转换成相同格式

3.站点部署

1.将构建好的文件上传至服务器

在你的项目目录内创建一个 upload.txt 和 upload.bat (与mysite文件夹同级)

向 upload.txt 中添加以下内容

1
2
3
open sftp://root@yourserveripordomain -hostkey="*" -password=your_password
synchronize remote -mirror myblog\public /var/www/html
exit

注意将服务器IP、账户密码、部分文件目录路径等修改为你自己的

向 upload.bat 中添加以下内容

1
2
3
@echo off
"C:\Program Files (x86)\WinSCP\WinSCP.com" /script=upload.txt
pause

此处WinSCP的安装位置是默认安装目录

运行 BAT 文件即可自动上传至服务器站点目录

2.Nginx配置

以下仅提供一份示例配置文件，具体的内容和安全措施请自行配置

 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
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    
    # 强制 HTTPS 重定向
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;
    
    http2 on;

    root /var/www/html;
    index index.html index.htm;

    # 证书路径（示例：Let’s Encrypt）
    ssl_certificate /cert/yourdomain.com/fullchain.pem;
    ssl_certificate_key /cert/yourdomain.com/privkey.pem;

    # SSL 配置（安全加固）
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers "ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES256-GCM-SHA384:DHE-RSA-CHACHA20-POLY1305";
    server_tokens off;

    # 限制请求方法（只允许 GET、HEAD、POST）
    if ($request_method !~ ^(GET|HEAD|POST)$) {
        return 444;
    }

    # 禁止访问隐藏文件（以 . 开头的文件，如 .htaccess）
    location ~ /\.(?!well-known) {
        deny all;
    }

    # 日志
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log warn;
}

注意：这份配置文件理论上只是参考不建议直接使用，其中请修改SSL证书路径、你的域名，以及要开放80与443端口的TCP协议防火墙

如果有SSL协议上的错误请确保服务器OpenSSL的版本为较新的版本，并能够被Nginx正确调用

随后使用如下命令验证Nginx配置文件是否正确

1
nginx -t

没问题的话就使用如下命令重新加载Nginx以启用站点，随后就可以使用 https://你的域名来访问站点了

1
nginx -s reload

结语

希望对你有帮助，本指南可能忽略了许多细节，请多多包涵！