
此搭建流程基于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 # 产生最后需要部署的网站文件
Next
- 基于S3及CloudFront,部署静态博客
- 进一步修改
hugo.toml配置文件, 更新about/me.md个人介绍页面。