第一次搭建博客

终于搭好了这个博客

博客框架：hugo 主题：stack 成品如下： image.png|1054x523

搭博客遇见的问题

  1. 博客框架好搭，主题不好选，
  2. 选好了博客，博客主题不好装，
  3. 装好了博客主题整个界面是空白的，无从下手，
  4. 知道从哪里写文章了，博客主界面什么都没有，都要自己设置参数，
  5. 设置参数的过程看不懂代码，
  6. 作者的文档好简单，网上搭博客的教程都是以前的。

写这个记录的时候已经搭好了，复盘一下。再搭建一个。

复盘从头开始搭建一个采用stack主题的博客

安装go

Hugo 是基于 go 语言的，所以第一步肯定是安装 go

从go官网下载安装程序：https://go.dev/dl/

目前 go 的 Windows 版本安装程序为：https://go.dev/dl/go1.20.3.windows-amd64.msi

github上抄下来的，昨天我是问的ai报错了才去装这个东西

安装hugo

hugo有好多个版本，从github那里下载压缩包下来。 地址在这https://github.com/gohugoio/hugo/releases/tag/v0.160.1 要下载hugo_extended_0.160.1_windows-amd64.zip 一定要选带extended版本的，我第一次下载了没有extended版本的安装包就报错了，我理解是这个版本的能支持更多功能。 image.png

解压之后有三个文件夹，只要hugo就可以了，其他两个可以不要。

这个exe执行文件就放在和博客根目录同级那里 image.png 放这里的好处是不用把hugo加入环境变量，我是直接在hugo文件夹下面博客文件夹，后面都进这个文件夹命令。看下面

创建博客文件夹

接下来就可以用黑框框上场了。 powershell 昨天一个博客上看到的，说是官方文档推荐用这个，并普及了一把知识 Windows powershell，powershell，还有CMD这三个不是一个东西， 推荐用✅powershell，刚开始不明白为什么，后面发现这个工具可以快速输入命令，输入一个字母再按方向键的右键，整个命令就输完了。

image.png

# 进入D盘 
d: 

# 进入博客文件夹 
cd D:\hugo 

# 创建新博客 这个myblog就是博客文件夹的根目录，后面每次用hugo命令就要cd进入myblog
hugo new site myblog

image.png 接下来运行

# 启动hugo
hugo server

image.png|835x345 出现这个就是成功了，在浏览器里输这个地址http://localhost:44093

image.png 第一次以为这不行，看其他博主的记录才知道这样就代表装好了，因为还没装主题。

装主题stack

github项目在这https://github.com/CaiJimmy/hugo-theme-stack，最下面有安装教程，有中文版的。 image.png

看教程安装使用那里一堆字，第一个快速入门那里也用了，到创建代码空间就没跟着弄，没想到下面的花了更多时间， image.png|246|317看这个意思作为子模块安装更新稳定，选它，又说没有themes文件夹，为了方便查看代码，把他也下下来。

myblog这个文件夹的层级和themes的结构层级是一样的，要有自定义新的，就要在myblog文件夹下面的assets，layouts，staics这几个文件夹里自定义一样层级的东西改。

官方文档截个图 image.png

之后去myblog文件夹下找到toml文件加上这个

# hugo.toml
[[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v4"

为了编辑这个文件我又装了一个VS code 输完这个之后，ctrl+s保存一下不用退出，保存了就可以，再去powershell运行hugo sever，记住每次都要在自己创建的博客文件夹下面运行这个命令。这个端口每次都不一样，这里快捷访问基于是按住ctrl单击就可以快速访问了。 image.png

第一次看见这个真懵了，以为能和演示的一样。白花花的一片啊。想着已经弄到这里了，接着弄把。

image.png

装饰博客

左半边的自定义菜单

image.png|76|125x343|789x342

现在的文件夹结构是这样的，hugo的exe文件在hugo文件夹下，和myblog同级 image.png

在content文件夹里创建page文件夹，page文件夹里创建4个md文件，search和archives的md内容有点不一样。

image.png 主页：

--- # 上下要用---包起来
title: "主页"  
menu:
    main:
        weight: 10  # 这个越小这个东西就越在前
        params:
            icon: home # 这个是图标，themes下assets下icons里有
url: "/"  # 这一行把这个页面指向根目录
---

关于：

---
title: "关于"
menu:
    main:
        weight: 40
        params:
            icon: user
---

归档：

---

title: "归档"
layout: "archives" # 多个这个layout，为了后面使用小部件
menu:
    main:
        weight: 120
        limit: 5  # 没看出来什么意思，ai给的代码复盘发现可能不需要，
        params:
            icon: archives
---

搜索：

---
title: "搜索"
layout: "search"
outputs: ["HTML", "JSON"]  # 必须包含 JSON,这一行后面查为什么搜不到内容的时候ai加的。
menu:
    main:
         weight: 160
         params:
               icon: search
---

四个主菜单就装好了 image.png

个人信息和头像

头像

在hugo文件夹下的hugo.toml里修改（看很多教程用config文件夹下面的配置改，说把这个默认生成的toml删了，免得配置冲突，把这个删了我这个博客直接不运行了，最后就只能改这里）

[params]
# 修改这里：加上 params. 前缀
[params.sidebar]
    compact = false
    avatar = "images/dog.png" # 图片的位置
    avatarRound = true

这个图片事先放在D:\hugo\myblog\assets\images 这里，这个图片也可以用图床链接，就这么一张图像放这里把。

站点名称和副标题

名字也在这里改,把title改一下，就是站点名字

baseURL = '/'
locale = 'en-us'
title = '这是个问题'
subtitle = "这里写你的副标题"

# hugo.toml
[[module.imports]]
    path = "github.com/CaiJimmy/hugo-theme-stack/v4"
    
[params]
# 修改这里：加上 params. 前缀
[params.sidebar]
    compact = false
    avatar = "images/dog.png"
    avatarRound = true
    subtitle = '我是一个美丽的副标题' # 在这个下面加一个这个，副标题就可以生效了

目前博客长这个样子。 image.png|1054x535

社交链接

之前主菜单是在content下面创建了page文件夹再创建各个md文件 这个社交链接，没有看到说可以再创一个，就用的在toml里添加参数。 就这段，如果要加别的把menu.social往下复制，填不同的信息，注意的就是那个icon图标，如果有自定义的图标，就要新在assets文件夹下创建一个icons文件夹，再把svg图标文件放进去这里填上名字

[menu]
# 1. 社交菜单配置 (Social Menu)
[[menu.social]]
    identifier = "github"
    name = "GitHub"
    url = "https://github.com/CaiJimmy/hugo-theme-stack"
    weight = 1
    [menu.social.params]
        icon = "brand-github"

小部件

这个试了好久，代码是这段

[params] # 这个有只能有一个，[params.sidebar]这个参数头像和副标题也放这个下面

[params.widgets]
    homepage = [
        # 注意：search 后面必须跟着 params 键，哪怕它是空的 {}
        { type = "search", params = {} }, 
        { type = "archives", params = { limit = 5, name = "归档hg" } },
        { type = "categories", params = { limit = 10, title = "分类" } },
        { type = "tag-cloud", params = { limit = 10, title = "标签" } }
    ]
    page = [{ type = "toc" }]

当时又出现了新问题，小部件大家都中文的好好的，就你archives一个人是英文，各种搜为什么，ai现在被训练的只会说我不给你废话，给你这个代码百分之百能解决，然后又是错误的解决。

image.png

最后我是又搜到了语言这里的问题 默认生成的toml是

baseURL = '/'
locale = 'en-us'
title = '这是个问题'

改成下面这个全部都显示中文了

baseURL = '/'
locale = 'en-us'
languageCode = "zh-cn"
defaultContentLanguage = "zh"
hasCJKLanguage = true
title = '这是个问题'

撰写博客

这个博客的文章内容要放在content文件夹下面的post文件夹里，这个post里再创建各个博客. ai给的结构是这个样子，和我的Obsidian类似，先创建一个试试

content/
└── post/
    └── my-first-blog/          <-- 为这篇文章建个文件夹
        ├── index.md            <-- 文章内容（必须叫 index.md）
        └── images/             <-- 存放该文章的图片
            └── cover.jpg

叫ai生成了一个测试文章，然后按条件放了进去，完成 后面就要推到github上部署到vercel上，这篇也一起发，后面自己就能网上看到了。真棒。

不爱写博客，是真爱这种教程，一弄就上头。

© 2026 这是个问题
使用 Hugo 构建
主题 Stack 由 Jimmy 设计