返回

Hugo:本地安装

——在Windows系统安装Hugo

安装软件

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

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

配置环境变量

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

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

image-20211213000025496
image-20211213000025496

生成站点文件

打开终端

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

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

image-20211121113133755
image-20211121113133755

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

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

image-20211121113148148
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
image-20211121181820499

转到http://localhost:1313/

image-20211121181801730
image-20211121181801730

新建页面

使用

hugo new post/test.md

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

image-20211121182127088
image-20211121182127088

image-20211121182138985
image-20211121182138985

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

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

image-20211121182551751
image-20211121182551751

后记:为什么选择静态博客?为什么选择Hugo?

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

Hugo的优势

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

  • hugo在Windows下有单文件的版本,只要把文件下载下来并添加到环境变量就可以使用,相较于Hexo等要方便不少。
  • 文档较为充足,平台支持度高,既可以在netlifyvercel安装,也可以在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,复制请保留原文出处。

Built with Hugo
Theme Stack designed by Jimmy