我经常会更换我的博客架构,从最初的 hexo 到 vuepress 再到 vitepress 再到 Next.js 最后到现在的 Hugo。
为什么要这么折腾?其实我也不知道,可能终究就是对博客框架本身不够满意,目前 Hugo 还在尝试中,最后也不知道会不会再次将它换掉。
选择 Hugo 的原因是因为它的速度,这是它的产品亮点!
相较于其他几款产品来说,它的底层是用 go 写的,所以生成速度超级快,而且命令上也比较简单(当然命令也用不了几次)。
框架对比
这里简单说一下这几款产品在使用后的体验:
hexo
市面上大多数人首次接触的静态站点生成器应该就是它了,常用命令就那么几个,主题非常丰富,中文资料也相对比较齐全,有的大佬都在这上面玩儿出花来了。
不过相对应的,主题丰富了,可定制化就比较强,上手就比较复杂。且在文章内容过多的时候,整个编译任务下来需要好几分钟(我觉得大多数可能不太在意)。
vuepress
前端 Vue 框架的生态之一,后面 vite 出来之后,大多数人都转战 vitepress 了,未来发展实属危险,就不多说了。
vitepress
其实和 vuepress 差不多,只不过搭上了 vite 的风,在编译速度上由于 vuepress,整体是文档风,博客主题比较少,我之前用的时候,虽然写的是博客,但是整体看起来是文档风格的博客……
Next.js
React 的宠儿,现在官网生成项目的教程都是 Next.js,上手难度有一点,对于前端来说应该还好,但是不是前端的话,就比较难受了。
也有博客主题,不过比较少,而且用了一段时间,有一些 UI 上的 bug,所以最终也换掉了。
hugo
除了开始说的编译速度快之外,主题其实也挺丰富的,而且它的配置相对来说比较简单,不考虑整活儿的话,用它准没错。
安装
hugo 和 hexo 在安装上都差不多,都有提供终端命令,且支持不同的操作系统。
MacOS
Homebrew
brew instll hugo
MacPorts
sudo port install hugo
还有源码打包的方式,不说了,麻烦。
Hugo 有三个版本:标准版、扩展版和扩展/部署版。标准版提供核心功能,而扩展版和扩展/部署版则提供高级功能。 我们按照上述安装方式下载的版本,一般是扩展/部署版。
Linux
Snap
Snap 是一款开源免费的 Linux 软件包管理器。安装简单,可自动更新。
sudo snap install hugo
文档上还有「开启/撤销」可移动媒体访问权限以及 SSH keys 的权限,这个不了解,不多说。
Homebrew
你没看错,这玩意儿在 Linux 也可以用:
brew install hugo
Windows
Windows 系统最简单了,直接到 Github 上下载个包就行。latest release
常用命令
查看版本
hugo version
创建一个站点
hugo new site myBlog
设置博客主题
cd myBlog
# 在当前目录中初始化一个空的 Git 存储库。
git init
# 将 Ananke 主题克隆到主题目录中,并将其作为 Git 子模块添加到您的项目中。
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
# 在站点配置文件中附加一行,指示当前主题。
echo "theme = 'ananke'" >> hugo.toml
启动本地开发环境
hugo server -D
访问 http://locahost:1313
查看启动的项目。
增加文章
在 hugo 中文章内容都放在根目录下的 content 文件夹里,而 content 目录中一般根据博客主题来决定会有几个子目录(需要自己建立,这个主要看博客主题都有啥),比如大多数博客会有下面三个子目录:
- posts:文章内容目录
- about: 关于
- categorites: 分类
使用下述命令快速生成一篇文章:
hugo new content content/posts/my-first-post.md
文章内容如下:
+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
这里的 draft 值需要注意以下,一般来说,Hugo 在构建网站时不会将草稿(draft)为 true 的文章发布出去。想要了解这里的规则,需要看下相关文档。
如果在文章中配置了以下内容,在 build 的时候不会发布这些内容:
- draft 为 true;
- date 是将来的日期;
- publishDate 是将来的日期;
- expiryDate 是过去的日期;
打包
直接使用 hugo
命令进行打包即可,如果说想把草稿也一起进行打包需要加 -D
的参数。