技术 on Ming 的博客

用 Hugo 十分钟搭一个静态博客

Thu, 20 Aug 2026 00:00:00 +0000

静态博客是个人网站的最优选：快、安全、零维护。这篇记录我用 Hugo 搭建博客的完整流程。

为什么选 Hugo

单二进制，安装即用，没有 Node 依赖
构建极快，几百篇文章也是秒级
主题丰富，hugo-blog-awesome 这类主题开箱即大气
原生支持分类（Categories）和标签（Tags）

三步上手

# 1. 安装 Hugo (macOS / Linux / Windows 都有对应版本)
brew install hugo          # macOS
sudo apt install hugo      # Ubuntu/Debian

# 2. 创建站点
hugo new site myblog
cd myblog

# 3. 安装主题 + 写第一篇文章
git clone https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesome
hugo new posts/hello.md
hugo server -D             # 本地预览 http://localhost:1313

写文章

文章就是带 front matter 的 Markdown 文件，分类通过 categories 字段声明：

---
title: "我的第一篇文章"
date: 2026-08-20
categories: ["技术"]
tags: ["Hugo"]
---

正文内容...

发布

hugo --minify     # 生成 public/ 静态目录
# 把 public/ 里的文件丢到 Nginx / GitHub Pages 即可

静态博客最爽的地方：构建产物就是一堆文件，部署到哪都行。

VPS 部署全记录：从裸机到 HTTPS

Wed, 19 Aug 2026 00:00:00 +0000

第一次用 VPS 部署网站，踩了不少坑，把关键步骤整理出来。

基础环境

# Ubuntu 22.04 为例
sudo apt update && sudo apt upgrade -y
sudo apt install -y nginx python3 python3-venv git

Nginx 反向代理

让 Nginx 监听 80 端口，把动态请求转发给本地服务（比如 Gunicorn 起的 5000 端口）：

server {
    listen 80;
    server_name your-domain.com;

    # 静态文件直接服务
    location / {
        root /var/www/blog/public;
        try_files $uri $uri/ =404;
    }

    # 动态接口转发
    location /api/ {
        proxy_pass http://127.0.0.1:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

免费 HTTPS

用 Let’s Encrypt 五分钟搞定：

sudo apt install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com

证书到期前 certbot 会自动续期，一劳永逸。

给自己的网站做访客统计：IP、地理、设备一个不少

Tue, 18 Aug 2026 00:00:00 +0000

第三方统计（百度统计、Google Analytics）把数据都留在别人那里。自建一套轻量追踪，数据完全归自己。

原理

追踪 = 服务端捕获 + 客户端上报，双通道互补：

服务端：每次请求都能拿到 IP 和全部 HTTP 头，即使用户禁用 JS 也逃不掉
客户端：浏览器里能拿到屏幕分辨率、GPU 型号、时区、Canvas 指纹等更细的信息

服务端要点

Flask 里提取真实 IP 要穿透代理链：

def get_client_ip(request):
    # 优先取代理链头
    fwd = request.headers.get("X-Forwarded-For", "")
    if fwd:
        return fwd.split(",")[0].strip()
    return request.remote_addr

拿到 IP 后用 ip-api.com 免费接口定位国家、城市、经纬度。

客户端要点

// 一个 fetch 就把数据发回去
fetch("/collect", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
        screenWidth: screen.width,
        timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
        canvasFingerprint: getCanvasHash(),
        // ...更多字段
    }),
    keepalive: true
});

数据存哪

SQLite 就够了，单文件无运维成本。数据量大了再平滑迁移 PostgreSQL。

别忘了合规

采集访客信息前，务必在网站加隐私政策，说明收集了哪些数据、用来做什么。这是底线。