
此搭建流程基于 Windows 11 环境,使用 Hugo + dream 主题搭建静态博客。
搭建基础
我不确定 Hugo 是否可以像普通 exe 文件那样下载安装,因为我随意搜索到的教程(大部分都是码农写的),是先安装 chocolatey,然后运行 choco install 安装 Hugo。 如果你搜索到其它方式也可以,总之,目标是 Windows 用户最后可以在 powershell 或 git bash(如果已经安装)中运行 hugo。
安装 Chocolatey
用管理员权限安装 chocolatey:
Get-ExecutionPolicy # 确认状态是否是 Restricted
Set-ExecutionPolicy AllSigned # 移除 Restricted 状态
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1')) # 下载并安装
choco # 确认是否安装成功
安装 Hugo
安装 Hugo:
choco install hugo-extended -confirm
查看安装了的 Hugo 版本,以确认 Hugo 是否安装成功:
hugo version
Hugo 模板
选择主题
Hugo 主题网站 上有很多不同类型的主题可以选择。
随着 Hugo 越来越成熟,模板越来越多,使用模板的方式也多种多样。我个人建议没有太多编程经验的朋友,在选择自己喜欢的模板同时,查看下载页面上的安装教程,免得装了半天最后还要 debug,一鼓作气再而衰,直接放弃了。
我使用的是 dream 模板的 Zen 模式,有基础功能,页面简单,安装过程直接,还有非常完善的介绍页面 。反正后续想要添加别的功能,可以自己修改增补。 以下的安装步骤,可能不适用于所有的主题。
学有余力的朋友,也可以阅读一下这篇从零开始搭建 Hugo 博客 文章,详述了 Hugo 的基本逻辑。不论你想要修改现有的模板,还是找不到合适的不得不自己搭建网站(比如我就正在搭一个自己的相册网站),这篇文章都值得一看。
安装主题
创建文件夹结构和基础文件:
cd "C:\Your Path\your_blog_folder" # 选择你想要存放博客文件的文件夹
hugo new site . # 在当前文件夹下创建博客默认需要的文件夹结构及基础文件
git init # 可选,如果不熟悉 Git 可以略过
运行hugo new site .后,我们会看到如下提示:
1. Change the current directory to C:\Your Path\your_blog_folder.
2. Create or install a theme:
- Create a new theme with the command "hugo new theme <THEMENAME>"
- Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".
按照上述提示,下载主题:
# 以下代码二选一 # 也可直接下载 repo 并移动到 dream 文件夹
git clone https://github.com/g1eny0ung/hugo-theme-dream.git themes/dream # 下载 dream 主题并放在 ./themes/dream 文件夹下
git submodule add https://github.com/g1eny0ung/hugo-theme-dream.git themes/dream # 或者作为 submodule 添加
在hugo.toml配置文件中添加 theme:
theme = "dream" # dream 为上一步安装的主题的文件夹名字
创建个人介绍页面,和你的第一篇博客。新页面会出现在 content 文件夹下:
hugo new about/me.md
hugo new posts/your_first_blog_post.md
然后就可以运行 hugo,并在浏览器中输入 http://localhost:1313/ 查看(没有配置好所以超级丑但是有内容的)网站:
hugo server # 仅显示完成的文章
hugo server -D # 显示完成的文章和草稿文章
以上步骤产生的网页仅供本地浏览。如果一切正常,运行以下代码,最后得到的 public 文件夹下的所有文件,就是需要部署的网站文件。
hugo # 产生最后需要部署的网站文件