Hugo Stack主题博客搭建指南

前言

本文章为这个博客的第一篇文章，主要围绕我的搭建过程，可能并不算通用，也并不是最优的方案，更详细的配置内容请参考官方文档，或其他同款主题站点的文章

起步

1.环境准备

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

本地开发环境(Windows平台)

1.安装Hugo Framework

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

hugo_extended_{version id}_windows-amd64.zip

下载完后直接将其内部的 hugo.exe 程序解压至 C:\Windows\System32 文件夹中即可在全局中使用

(事实上这不是一个安全的做法，不过暂时也没有什么隐患，就偷个懒咯~，更好的做法是解压到合适的目录并添加PATH变量)

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

(注意：这不是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

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主题

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

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

theme = 'hugo-theme-stack'

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

hugo server -buildDrafts

example

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

hugo --cleanDestinationDir

以上就是最初的设置内容，关于主题的配置文件在 theme\hugo-theme-stack\config.yaml

注意：主题配置文件格式为yaml与hugo的toml不同，修改的时候请注意！

3.站点部署

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

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

向 upload.txt 中添加以下内容

open sftp://root@yourserveripordomain -hostkey="*" -password=your_password
synchronize remote mysite\public /var/www/html
exit

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

向 upload.bat 中添加以下内容

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

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

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

2.Nginx配置

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

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";

    # HSTS (HTTP Strict Transport Security)
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;

    # 其他安全 HTTP 头
    add_header X-Frame-Options DENY;  # 防止 Clickjacking
    add_header X-Content-Type-Options nosniff;  # 防止 MIME 类型欺骗
    add_header X-XSS-Protection "1; mode=block";  # 防止 XSS
    add_header Referrer-Policy "strict-origin-when-cross-origin";  # 限制 Referer 头信息
    add_header Permissions-Policy "geolocation=(), microphone=(), camera=()";  # 限制权限

    # 隐藏 Nginx 版本信息
    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配置文件是否正确

nginx -t

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

nginx -s reload

结语

本文章简短的介绍了一下我大致的搭建过程，十分的随意且杂乱，所有配置都还是默认的，关于Stack主题的具体配置我应该会单独写一篇文章

内容并不算细致，很多比较基础的操作就直接忽略了，比如SSH的连接，一些Linux命令等，还缺乏很多安全方面的措施，这些都留给读者自行配置咯