Hugo：本地安装

    学习&笔记   博客搭建

安装软件

首先到官网下载Windows版：Releases · gohugoio/hugo (github.com)

下好之后找个空文件夹放了，比如我这里用的D:\myblog。

配置环境变量

修改系统的环境变量，将hugo.exe所在文件夹添加到里面，如图所示。修改完成后，需要重启计算机。

win+s组合键打开搜索框，输入环境变量就可以找到了。

image-20211213000025496

生成站点文件

打开终端

在文件夹里面，按住Shift同时右键单击，就可以看到在此处打开命令提示符或在Windows终端中打开

输入hugo version如果有输出说明安装ok。

image-20211121113133755

转到你准备存放博客的文件夹：

hugo new site myblog #设成你想要的博客名

image-20211121113148148

有这样的输出说明已经安装好博客了，不过现在还没有内容，也没有主题，我们稍微设置一下。

配置Hugo主题-以Stack为例

和其他静态博客生成程序略有不同的是，Hugo必须配置一个主题才能访问。我这里使用的是slack主题。

方式1：手动下载（不推荐）

下载地址：

下载后把 hugo-theme-stack-master 改名为 hugo-theme-stack 并放到站点目录的 theme 文件夹下。

注意！ 以这种方式安装可能会在推送到云端的时候出现错误，需要手动添加.gitmodules配置文件解决。请参看：错误排查

方式2：Git拉取（推荐）

推荐使用这种方式，前提是你的网够好

如果你需要对主题文件进行单独的配置，例如修改模板等，推荐你先把主题文件fork到自己的仓库里，然后将下面的代码换成自己的仓库。

在网站根目录打开git bash，输入下面命令即可：

# 使用官方仓库
git submodule add git://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

# 使用自己的仓库，先fork，以我的仓库为例
git submodule add git://github.com/kerms0/hugo-theme-stack/ themes/hugo-theme-stack

获取完成后，把 exampleSite 文件夹中的config.yaml 复制到站点目录下。后者是 Hugo 站点的配置文件，已经写入了主题的可配置字段。

观察发现英文文档里面有这样一句话：

Clone / Download this repository to theme folder, and edit your site config following exampleSite/config.yaml.

Note: Remove config.toml if there is one in the site folder.

所以必须要删除站点目录下的config.toml文件才行，否则还是一片空白

然后为了之后写博客方便，可以把模板也复制过来，将\themes\hugo-theme-stack\archetypes复制到\archetypes中，进行替换。

本地构建

使用

hugo server

就可以在本地运行服务了：

image-20211121181820499

转到http://localhost:1313/：

image-20211121181801730

新建页面

使用

hugo new post/test.md

创建页面。也可以不加post，直接输入文件名，实际上都是添加到content文件夹里面的。

image-20211121182127088

image-20211121182138985

使用markdown编辑软件对文件进行编辑，值得注意的一点是如果要发布这篇文章，一定要将draft设为false，否则不会对其进行生成（你也可以在\archetypes中直接把它默认为true）

再次访问网站，可以看到我们的页面已经添加上了：

image-20211121182551751

后记：为什么选择静态博客？为什么选择Hugo？

搭建一个个人博客，最方便、成本最低、体验最好的方案就是静态博客。大量的平台、文档、软件、主题可供使用。静态博客是趋势所在。

Hugo的优势

在静态网站生成工具中，Hugo似乎并不是最流行的那一个。但选择Hugo也有我的理由：

  • hugo在Windows下有单文件的版本，只要把文件下载下来并添加到环境变量就可以使用，相较于Hexo等要方便不少。
  • 文档较为充足，平台支持度高，既可以在netlify、vercel安装，也可以在CFpages安装。
  • 组织管理文件比较方便，既适合对外展示，也适合自己查找。支持多个站点共同管理。支持文件手动迁移。
  • 实时显示修改，边写边看。
  • 主题好看。

Hugo的弊端

其实也不能算是弊端，主要还是我太菜了。

静态网站的通病：没有后端。所有搜索、评论、在线写文章都需要通过插件配置。

这方面的文档虽然有，但是大多非常杂乱。有些文档经过版本的迭代可能已经不适用了，有些配置可能在这个主题里面可以使用，在另外一个主题里面又用不了。并且由于主题完全是为爱发电，可能本身就存在文档不全、有Bug的情况。

像我这样的编程小白，遇到问题只能干瞪眼，到处找蛛丝马迹的资料。这一点确实是比较痛苦的。

所以，如果你只是想简单搭建一下，能够接受我这个方案的话，也可以完全跟着我的步骤走。在Hugo这个Tag里面我放上了所有相关的文章。

如果用其他主题和其他插件，祝你好运！

附录

参考文献

  1. Quick Start | Hugo (gohugo.io)
  2. Hugo Stack主题配置与使用 (bore.vip)
  3. 介绍 | Hugo 主题 Stack (jimmycai.com)
  4. Hugo 中文帮助文档 (aiaide.com) 这份帮助文档非常全面，大家可以直接使用这个。
  5. Hugo | 为 Blog 增加评论区 (mantyke.icu)

版权信息

本文原载于blog.kermsite.com，复制请保留原文出处。

Kerm小白站长

Good Good Study, Day Day Up~