Hugo搭建个人博客 (一)如今的博客平台各式各样，从博客园、CSDN到简书、知乎再到掘金、SegmentFault，一

版权声明：文章首发于 super-geeker.github.io/post/termux… 转载请务必在文章开头醒目位置以超链接形式注明原文链接。

如今的博客平台各式各样，从博客园、CSDN到简书、知乎再到掘金、SegmentFault，一应俱全，有的属于专门的技术类博客平台，有的则属于综合类博客平台。当这些平台不足以满足人们可高度定制化或为更好的打造个人品牌等种种需求时，个人博客平台就开始流行了起来。比如搭建WordPress个人博客，奈何其复杂的环境安装配置及域名空间的购买等等一系列步骤吓退了一大批人。这时，静态网站生成引擎又应运而生。

简介

静态网站生成引擎

听到静态网站生成引擎，很多人可能会比较陌生，这里不要被名字吓到，说白了，它就是可以让我们轻松快速搭建个人博客的博客框架，免去像搭建一个WordPress博客平台的沉重，从而可以让我们回归创作本身。

简单介绍一下目前最为流行的三款静态网站生成引擎：Hexo、Jekyll以及Hugo，它们分别基于Nodejs、Ruby、Go这几种语言编写。其中，Hugo属于新秀，它们之间的区别及特性这里就不再赘述，想进一步了解可以自行Google。技术的更新必然有它的优势，而优势通常可以体现在易用性、可扩展性、性能及应用场景中的一点或几点上。就我个人而言，我是一个乐衷于不断探索并学习前沿技术的人，因此，在经过这几方面的对比后我选择了新秀Hugo。

Termux

Termux是一个Android终端模拟器和Linux环境应用程序，不需要root和设置就可以直接工作。我跟Termux可谓相见恨晚，它的强大之处在于不仅可以说它是一个运行在手机上的操作系统，更可以将它打造为手机上的渗透神器，这其中的细节不在本文的讨论范围，想要深入了解的仍需自行Google。当然，在此之前，网络安全法的相关条文可能也需学习。

言归正传，不管是在Termux还是在Linux亦或是其他OS上搭建Hugo，过程都大同小异，无非是安装命令的差异。在正式进入搭建之前，假定你已充分掌握Linux基本命令并已成功安装了Git及Vim，如果没有，你仍可继续参考下面步骤进行搭建，但要清楚的是，每个命令执行后都可能会出现各式各样的报错信息，你要做好可以有效处理这些问题的准备。OK，让我们开始吧！

环境搭建

打开终端，以下命令都需要在终端执行，务必利用好ls以及pwd命令清楚定位当前所在目录层级。

安装Hugo

安装Hugo
```
pkg install hugo
```
安装完成，通过查看是否输出版本信息来判断是否安装成功。
检查版本
```
hugo version
```
输出版本信息，则表示安装成功。

创建网站

新建site
```
hugo new site blog
```
blog为项目名称，可以自定义，执行成功，会提示需要下载theme。
下载theme
```
cd blog
cd themes
git clone https://github.com/josephhutch/aether
```
进入项目的themes目录，下载aether主题，不同主题配置参数不同，建议先按照此完整步骤成功配置该主题后，再到主题官网下载其他主题来自行配置。如果提示Git没有安装，先输入pkg install git安装再重新下载。
下载成功后在themes目录下ls会看到aether目录。
配置theme
```
cp aether/exampleSite/config.toml ../
```
这一步是将自己项目的config替换为主题中的示例config。
exampleSite中的config文件是示例配置，通常包含一个主题最通用的配置模板，可以结合文档，查看所有可供选择的配置项。
最后，启动Hugo服务器查看效果。
启动Hugo服务器
```
cd ..
hugo server
```
启动Hugo服务器需要在项目根目录执行，cd ..回到上一级目录（项目根目录）。
启动成功后打开浏览器输入localhost:1313（1313是Hugo的默认端口），回车后就会发现，一个本地的个人博客系统就这样搭建成功了。
到这一步，仅仅是一个开始，先不要急着更换主题，后面才是主题参数的配置及更加深入的讲解。

网站配置

打开config.toml
```
vim config.toml
```
如果提示Vim没有安装，先输入pkg install vim安装后再重新打开。
这里强烈建议学习Vim基本操作，简单介绍几种基本操作，以保证可以正常进行。a或i进入插入模式，esc进入正常模式，正常模式下输入:进入命令模式，命令模式下输入wq保存并退出。
修改config.toml参数
```
title，author，brand，description
```
title设置的值显示在网站上方和地址栏上， brand的值显示在网站左上角， author和description分别是作者和描述，可以分别设置为自己的名字及对网站的描述。

创建博客

配置文章模板
```
cp themes/aether/archetypes/* archetypes/
```
这一步是将自己项目的模板文件替换为主题中的模板文件。
替换后会在项目根目录下的archetypes目录下会看到default.md和post.md两个模板文件。
在通过Hugo来new新博客的时候，会自动应用该模板文件。
新建博客
```
hugo new post/demo.md
```
该命令需要在项目根目录下执行，执行成功，可以看到在项目根目录的content目录下自动创建了post目录，post目录下自动创建了demo.md文件。
前面提到的模板文件archetypes目录中的post.md会自动识别与之同名的content目录下的post目录，并使该post目录下的所有md文件自动应用该post.md模板。
如果模板中没有与之对应的同名目录名，则会自动应用模板目录中的default.md模板。
模板文件因主题而异，不同主题模板应用方式可能会有所差异。
新建关于
```
hugo new about/about.md
```
该命令与上述新建博客命令类似，执行成功会在项目根目录下的content目录下自动创建about目录，about目录下则自动生成了about.md文件，需要注意的是，archetypes中并没有与about目录所对应的模板文件，所以会自动应用default.md模板文件。由于about.md需要显示在导航菜单，因此要将displayInMenu设置为true，将displayInList设置为false
运行查看
```
hugo server -D
```
与前面开启服务器的方式有所不同，这里加了-D参数，是因为博客中draft属性默认为true，即为草稿文件，不加-D，博客是无法显示的。如果不想加该参数，将博客中的draft属性设为false或者删除即可。

Front Matter

title:博客标题
date:博客日期（自动生成）
description:博客描述信息，显示在博客列表中
categories:博客分类，[]内多个分类需以英文,隔开
dropCap:博客正文首字放大效果
displayInMenu:是否在导航菜单显示
displayInList:是否在博客列表显示
draft:是否为草稿
resources:设置博客列表图片等信息

不同主题配置属性不同，这里仅对当前主题进行说明。
通常displayInMenu和displayInList设置一个true另一个就为false。
categories中设置的分类会显示在导航菜单上。

小结

至此，一个可以运行在本地的个人博客就这样搭建完成了。这时，你可以进行博客的增删改查以及可以尝试给自己的网站应用其他主题等等。

然而，想将自己付诸心血写好的博客分享给大家该怎么办呢？即如何将博客部署到线上，在下一篇 Hugo搭建个人博客 (二) 中详尽介绍了博客完整的部署及管理流程！其实本想一口气全部写完，奈何光是写到这就熬了我不知多少个黑夜白天，所以索性就分开来写了。