学习记录

搭建blog

尝试搭建一个自己的blog

前言叙述

和大多数人一样，搭建博客的第一篇blog就是记录自己的搭建过程，谁知道哪天要再来一遍呢。

环境准备–本地安装Hugo

  1. 手动部署

    • 访问Hugo Releases页面下载对应系统的hugo_extended_X.XX.X_windows-amd64.zip
    • 解压到D:\DevTools\hugo（路径可自定义）
    • 添加环境变量：
      • Win+S搜索"环境变量" → 编辑系统环境变量 → Path → 新建 → 填入你的hugo目录

  2. Scoop一键安装

1
2
3
4
5
6
7

# 先确保已安装Scoop
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
irm get.scoop.sh | iex

# 安装Hugo扩展版（支持SCSS编译）
scoop bucket add main
scoop install hugo-extended

💡 验证安装：hugo version 能看到版本号即成功

创建博客

  1. 创建blog

    1
2
3

    # 在目标目录执行
hugo new site myblog
cd myblog

  2. 此时的目录结构

    1
2
3
4
5
6
7

    myblog/
├── archetypes/
├── content/
├── data/
├── layouts/
├── static/
└── hugo.yaml

主题配置

​ 以stack主题为例

  1. 访问Stack主题文档获取最新配置指南
  2. 下载，解压到myblog/theme中。
  3. 把myblog/themes/hugo-theme-stack/exampleSite中的content文件夹和hugo.yaml复制到，myblog/下面
  4. 删除hugo.toml
  5. hugo server -D，可以看到已经有个初始的框架了。接下来可以配置一下里面的内容，写文章或者把想挂的个人信息填进去。
  6. 本地预览hugo server -D --disableFastRender

容器化博客

  1. 生成静态文件

    1
2

    # 进入Hugo项目根目录
hugo -D --minify --cleanDestinationDir

    • --minify：自动压缩HTML/CSS/JS

    • --cleanDestinationDir：清空旧文件避免残留

    • 生成结果保存在public/目录，建议.gitignore忽略此目录

  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

    server {
    listen 80;
    server_name _;

    # 主站点根目录（Hugo静态文件）
    user /usr/share/nginx/html;
    index index.html;

    # Hugo 静态站点核心配置
    location / {
        try_files $uri $uri/ $uri.html =404;  # 兼容Hugo的无后缀友好URL
    }

    # 新增图片路径配置（关键部分）
    location /images/ {
        user /usr/share/nginx;          # 指向容器内的 /usr/share/nginx/images 目录
        autoindex off;                  # 禁止目录列表
        expires 0;                      # 禁用缓存（实时生效）
        add_header Cache-Control "no-store, no-cache, must-revalidate";  # 强制不缓存
        access_log off;                 # 可选：关闭访问日志
    }

    # 其他优化配置（可根据需求添加）
    gzip on;                            # 开启Gzip压缩
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

  3. 编写docker-compose.yml

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    services:
  web-server:
    image: nginx:latest
    volumes:
      - ./public:/usr/share/nginx/html:ro            # Hugo静态站点目录（保持原样）
      - ./config:/etc/nginx/conf.d/:ro  # Nginx配置（需更新）
      - ./blog_images:/usr/share/nginx/images        # 新增图片目录挂载（宿主机目录:容器目录）
    ports:
      - "80:80"
      - "443:443"
    restart: always

    其中volumes下的属性解释

    第一条：宿主机上的静态文件目录对应容器内nginx的web目录第二条：宿主机上的nginx配置文件目录对应容器内nginx中会包含的配置文件目录 第三条：宿主机上的图片资源对于容器内nginx会加载的图片资源目录

  4. 上传文件

    sftp同步以下文件至服务器，

    • docker-compose.yml
    • nginx.conf
    • public
    • blog_images(图床)

  5. 一键部署

    1
2
3
4
5
6
7

    # 首次启动
docker-compose up -d

# 查看实时日志
docker-compose logs -f

docker-compose up -d

文件同步

1
2
3

hugo --minify
ssh root@x.x.x.x "rm -rf /root/docker/hugo/public/*"
scp -r ./public/* root@x.x.x.x:/root/docker/hugo/public/

图片同步

  1. 本地准备
  • 下载typora
  • 安装PicGo
  • 在PicGO插件中心搜索安装picgo-plugin-sftp-uploader插件
  1. 服务端准备
  • 准备好图片存储路径mkdir -p /xxx/xxx/images
  • 根据实际用户设置权限chmod -R 755 /xxx/xxx/images
  1. 服务器Nginx配置

​ 已经都放在上面的nginx配置里了，还有docker-compose

  1. PicGo配置
  • 配置SFTP上传
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
    "wumuchaofan": {
      "url": "xxx", #你的blog地址
      "path": "/images/{year}/{month}/{fullName}",  #图片访问路径
         # 服务器存储路径
      "uploadPath": "/xxx/blog_images/{year}/{month}/{fullName}", 
      "host": "x.x.x.x", #服务器IP
      "port": 22,
      "username": "xxx",#
      "privateKey":"C:\\Users\\slwum\\.ssh\\id_ed25519",#密钥路径
      "fileUser": "xxx",#
      "dirMode": "0755"
    }
  }

  • typora配置

    • 打开typora > 偏好设置 > 图像

    • 选择上传服务为PicGo.app

    • 设置PicGO路径

  1. 工作流验证

    • 测试图片上传

      • 复制本地图片粘贴到Typora

      • 右键图片 > 上传图片,观察PicGo日志提示

      • 检查服务器目录：/xxx/blog_images/{year}/{month}/{fullName}

  2. 访问验证

    • 浏览器打开https://x.x.x.x/images/{year}/{month}/{fullName}

附录-hugo的文件结构

 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

my-blog/
├── content              # 存放所有内容文件
│   ├── _index.md        # 博客首页内容
│   ├── posts            # 博客文章
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── pages            # 博客页面
│       └── about.md     # 关于页面
├── data                 # 存放站点数据
│   ├── authors.yml      # 作者信息
│   └── config.toml      # 站点配置文件
├── i18n                 # 国际化语言文件
│   ├── en.toml          # 英文语言文件
│   └── zh.toml          # 中文语言文件
├── layouts              # 存放页面模板
│   ├── _default         # 默认模板
│   ├── partials         # 模板片段
│   └── index.html       # 首页模板
├── assets               # 存放编译前的资源文件
│   ├── css              # 存放 CSS 源文件
│   ├── js               # 存放 JavaScript 源文件
│   └── images           # 存放图片源文件
├── resources            # 存放生成的资源文件
│   └── _gen             # 生成的资源文件
├── static               # 存放静态资源（如图片、CSS、JS）
│   ├── css              # 存放编译后的 CSS 文件
│   ├── js               # 存放编译后的 JavaScript 文件
│   └── images           # 存放图片文件
├── public               # 生成的网站文件
├── themes               # 存放主题文件
│   └── my-theme         # 自定义主题文件
│       ├── layouts      # 存放页面模板
│       ├── static       # 存放主题静态资源
│       └── theme.toml   # 主题配置文件
├── archetypes           # 内容模板文件
│   ├── default.md       # 默认内容模板
│   └── post.md          # 博客文章模板
└── hugo_build.lock         # Hugo 包管理文件

距离写下这段文字过了：

教程
Licensed under CC BY-NC-SA 4.0
comments powered by Disqus