[toc]
1. 为什么搭建个人博客?
日常工作还是需要学习一些新知识,以及也要对旧知识进行一些巩固复习,但是如果知识现用现查的话,很多东西会记得不是很牢靠,而且不利于知识体系的构建,因此,在日常学习的同时,最好也能养成记录学习笔记或者写博客的习惯。本博客就是使用 hugo 搭建的,本博客的第一篇博客就用来简单记录下如何使用 hugo 搭建个人博客。
2. Hugo 是什么?
Hugo 是一个 Go 语言编写的静态网站生成器,可以帮助我们快速搭建博客、文档这种静态网站。
3. 快速使用 Hugo 搭建个人博客
初始化博客项目
如何安装 hugo 可以参考 hugo 官方文档,这里就不再多作说明了。 安装好 hugo 之后,可以先使用 hugo 的命令,尝试熟悉 hugo 的命令,生成一个 demo 网站。使用如下命令快速生成一个项目:
hugo new site demo
Hugo 初始化项目之后,demo 文件夹底下会有 8 个文件夹和 1 个配置文件:
- archetypes: 存放用 hugo 命令新建文章文件时所使用的 front matter 模板
- assets:
- content: 存放内容页面,如 Blog 文件等
- data: 存放博客使用的其他数据
- layouts: 存放定义网站的样式,写在
layouts文件夹中的样式会覆盖使用的主题的layouts文件夹中的样式 - public: 存放
hugo生成的静态网页文件 - static: 存放所有静态文件,如图片等
- themes: 存放下载的主题文件夹
- config.toml: 网站配置文件
下载和配置主题
hugo 生成项目之后,还需要一步就可以预览博客网站了,那就是下载指定的主题到项目对应的 theme 目录下。hugo 支持许多种不同风格的主题,这些主题一般可以通过 GitHub 下载,比如我使用的是 hugo-octopress ,可以通过如下命令可以下载 hugo-octopress 主题:
cd themes
git clone https://github.com/parsiya/Hugo-Octopress.git
启动服务并预览网站
主题下载完成之后,就可以通过命令指定主题生成网站并预览了,切换到项目根目录下,执行如下命令:
hugo server --theme=hugo-octopress
该命令会启动 hugo 服务,并将服务地址输出在命令的结果中,直接点击或者复制到浏览器中打开就可以预览你的博客网站了。
创建文章
由于现在还没文章,因此只有博客的基本框架。hugo 支持使用命令快速生成文章基本内容,首先进入到 demo 目录中,使用如下的命令快速生成博客文档:
hugo new posts/demo.md
这句命令会在 content 目录底下创建 posts 目录,这个目录可以作为以后文档存放的文件夹。这个命令同时还会在 posts 目录里面生成 demo.md 文件,这个文件就是博客文档的 Markdown 文件。
用 hugo new 命令会使用 archetypes 文件夹中的 front matter 模板初始化文章文件,这样就不用自己手动添加这些内容了
生成这些文件过后,再重新查看博客网站,就会发现博客网站上面已经有了刚才新生成的文章。而且得益于 hugo 的热加载能力,你在写文章时,只需要保存就可以试试预览你的文章效果。
URL 管理
如果没有改变存放文章的文件夹,一般是使用如下命令格式化 URL:
[permalinks]
# change the post URL to look like the old ones
post = "/post/:year/:month/:day/:title/"
表示将 content/post 文件夹底下的文章的 URL 格式化成 /post/year/month/day/title/。
由于我改变了存放文章的文件夹,因此修改了下对应的文件夹和 URL 路径。另外由于我的文章标题中有中文,但是又不希望 URL 中出现中文,因此我使用的是 filename。
[permalinks]
# change the post URL to look like the old ones
posts = "/posts/:year/:month/:day/:filename/"
表示将 posts 文件夹底下的文件的 URL 全部格式化成 /posts/year/month/day/filename。等号左边的 posts 是被格式化 URL 的文件夹,等号右边的 posts 是出现在实际 URL 中的路径。
此外,根据其他文章中提到的,还可以使用在 archetypes/default.md 中新增一个 slug 字段,然后在 URL 格式化命令中将 title 或者 filename 替换成 slug。