hugo搭建博客

😎

# 目录

Hugo 环境搭建
Hugo博客搭建

# 投入 Hugo 的怀抱！

这篇文章主要介绍了作者在 Windows 11 系统下搭建 Hugo 环境的过程，包括安装 VS Code、Git 和 Hugo，以及使用 Stack 主题搭建博客的步骤。文章详细介绍了安装步骤和配置方法，包括下载安装软件、设置环境变量、初始化博客、安装主题、配置页面、创作文章和预览博客等内容。作者分享了自己的经验和遇到的问题，并提供了解决方案。整体内容涵盖了从环境搭建到博客搭建的全过程，适合初学者参考。

document.addEventListener(“DOMContentLoaded”,function(){const e=document.querySelector(".ai-explanation-content").textContent;new TypeIt("#ai-explanation",{strings:e,speed:10,lifeLike:!0,waitUntilVisible:!0}).go()})

我的环境参数：
Windows 11 22H2
Google Chrome 114
Markdown 编辑器：VS Code
博客配置编辑器：VS Code
命令行工具：Windows Terminal
Git 工具：GitHub Desktop
Hugo 版本：0.114.0_extended（笑死，一开始写的时候版本还是 0.112.3）
Hugo 主题：Stack

# Hugo 环境搭建#

# 安装 VS Code#

从官网获取 VS Code 安装包（国内直接下载速度慢，可将下载链接中的域名替换为 vscode.cdn.azure.cn，下载速度直接起飞）
Select Additional Tasks 中把下面列出的全部选项打勾

Add “Open with Code” action to Windows Explorer file context menu
Add “Open with Code” action to Windows Explorer directory context menu
Register Code as an editor for supported file types
Add to PATH (requires shell restart)

install 开始安装，等待安装完成后选择 Finish

至此，VS Code 就安装完成了，接下来安装 Git

# 安装 Git#

小白直接上手 git 感觉门槛有点高，还是建议装 git 的 GUI 版本
我选的是 GitHub Desktop

官网下载安装包
下载地址：https://desktop.github.com/
使用 GithubDesktopZhTool 汉化
个人觉得没任何难度，实在不懂可以看作者的 README 文档

当然大佬们可以直接用 Git，也不需要我多解释

# 安装 Hugo#

从 Hugo 官方 github 仓库下载 hugo extended 版本
下载地址: https://github.com/gohugoio/hugo/releases/latest
解压下载下来的压缩包，得到 hugo.exe 并放到自己心仪的位置
我这里放在 E:\Hugo\bin
设置 Hugo 环境变量，依次打开设置-系统-系统信息-高级系统设置-环境变量添加 Hugo 主程序所在文件夹
检查 hugo 是否安装成功，Win + R 输入 cmd 回车打开 cmd，运行 hugo version，如果输出版本信息则配置成功如我这里输出（0.114.0）：
hugo v0.114.0-9df2ec7988e5a217a14901cc76c0b7e76b2e9f02+extended windows/amd64 BuildDate=2023-06-19T17:01:43Z VendorInfo=gohugoio

恭喜！到这里，基本就都配置完毕了，现在可以开始博客的搭建了

# Hugo博客搭建#

# 初始化博客#

在任意位置右键，选择在终端打开，输入以下命令：

hugo new site <这里填上你想要的位置>

# Stack 主题安装#

获取主题文件
找到 Stack 主题 GitHub 仓库（链接：https://github.com/CaiJimmy/hugo-theme-stack ）
Code Download → Download ZIP 下载源码解压
改名为 hugo-theme-stack 后放入博客文件夹根目录 /theme 中
将获取到的主题中的 exampleSite 文件夹中所有文件复制到博客文件夹根目录中
编辑 config.yaml，根据自己需要进行配置，作者在配置文件里面写了基本注释（虽然都是英文的）
官方配置文档: https://stack.jimmycai.com/config/

# 配置博客各个页面#

如果添加的是自己博客的一个页面，可以在这个页面的 md 文件的 Front Matter 中添加以下内容：

menu: 
    main:
        name:                # 名称
        weight: -90
        params:
            icon:            # 图标名称

如果不是你的博客的一个页面，那么在 config.yaml 中的 menu 部分下添加以下代码：

menu:
    main:
        - identifier: 
          name: 
          url: 
          weight: 
          params:
            icon: 
            newTab:

identifier: 项目名
name: 显示名称
url: 链接
weight: 优先级，数值越低优先级越大
params:
icon: 自定义图标
newTab: 是否在新标签页打开

官方文档：https://stack.jimmycai.com/config/menu

# 开始创作#

博客文章都存放在 /content 中，如果想要创建一篇文章，可以在博客文件夹根目录下打开终端输入以下命令：

hugo new posts/my-first-post.md

再打开 /content/posts 就可以找到一个 Hugo 为你创建好的一个名为 my-first-post.md 的文件

当然你也可以使用官方推荐的一篇文章一个文件夹的方式（官方文档: https://stack.jimmycai.com/writing/markdown ）

# 预览博客#

创作完成的你一定想要本地预览你的博客吧，博客根目录右键“在终端打开”，输入以下命令：

hugo server --navigateToChanged

后面加的 --navigateToChanged 可以省略，加它的作用是可以在你更改某个页面后自动跳转查看该页面的修改

根本不想每次输代码启动预览服务器的懒癌患者们，可以像我一样在博客根目录新建一个 vbs 文件：

Dim ws
Set ws = Wscript.CreateObject("Wscript.Shell")
ws.run "hugo server --navigateToChanged"
Wscript.quit

以后要预览博客可以直接双击运行这个脚本会直接弹出终端界面并启动预览服务器，要停止服务器按 Ctrl + C，终端界面会自己消失

另：我遇到过以下的报错：

This is most likely due to infinite recursion. If this is just a slow template, you can try to increase the 'timeout' config setting.

不知道你会不会遇到，但如果遇到了，那恭喜你节省很多找解决办法的时间，解决办法：在 config.yml 根级加入以下代码：

timeout: 10m