建站

【分享】使用hugo搭建静态博客

是时候聊聊关于Hugo，关于静态博客的一些使用心得了。

静态博客生成器有很多，但最终我选择了hugo，就因为我喜欢它渲染生成速度快。

♦ 优点

使用markdown

为什么我要使用markdown编辑文章？首先通过markdown编辑的文章可以直接保存在本地电脑中，这样通过静态博客生成器直接渲染生成为静态页面用于发布，源文件也就是markdown文件则直接变成备份。另外，使用markdown可以直接进行简单的排版，写文章更得心应手。Windows系统我日常使用喜欢用typora作为markdown编辑器。

生成速度快

hugo号称是静态博客生成器中目前渲染markdown到静态文件最快的系统。就这一点，就足以让我放弃其它生成器体验的愿望，毕竟大家的时间都是很宝贵的。

文章保存在本地

再唠叨一次，保存在本地！大家都那么忙，备份什么的多麻烦，直接在本地写文章保存多好，如果加上自动同步到网盘备份就更加的万无一失了。我是直接hugo框架目录整个备份到网盘的，防止出现意外。已经不知多少次看见使用动态博客的朋友因为没有及时备份而前功尽弃的了，不得不说这是一种悲剧。

♦ 缺点

不方便使用评论

这是诟病最多的了，博客没有评论就等于没有了灵魂。当然有很多解决方案，但或多或少都有一些不方便和技术门槛，对小白来说需要很长的时间钻研和研究。不过，总会有大佬给出不错的方案，这就看每个人的选择了。

主题不够丰富

相比于hexo，hugo的主题虽然也多，但功能设计上还是比hexo的主题方案要逊色不少。我观察到的，为hugo开发主题的大多数是外国人，这就不好了，很多设计不符合中国人的使用习惯。要想满意，自己折腾修改是不可避免的了，当然如果你要自己造轮子也不是不可以，干就完了！

发布不太方便

部署到GitHub类的仓库还是比较简单的，网上搜一搜就会有教程了。

但你如果要放在VPS上，对于小白来说就很蛋疼了，大佬们写的东西你都看不懂，因为我当时也是看不懂的，哈哈。

不过，我有钻研的精神，在经过不懈的努力之后，我终于能简单的使用git仓库同步到服务器，然后使用hook拷贝文件到网站根目录。你要问我为什么不是直接同步到网站根目录，我也说不出个所以然来。不过，原理是这样的就对了。

现在开始上干货了。

Win 10本地搭建hugo静态博客

hugo是由Go语言编写的，开发团队已经编译好一个文件，您只需要下载它被把它加入系统环境变量就可以在本地运行调试了。官方说明已经写的很清楚了：https://gohugo.io/getting-started/installing

照着步骤做的方法：

1.在C盘创建文件夹 ： C:\Hugo\bin

2.将下载的最新版可执行文件解压到这个文件夹。更多版本您可以参考这里。

3.解压后得到三个文件，我们需要用到的是hugo.exe这个可执行文件，我们需要做的就是将这个文件加入系统环境变量用于在命令行窗口执行。方法如下：

  • 右键单击“ **开始”**按钮。
  • 单击“ 系统”。
  • 单击左侧的**“高级系统设置”**。
  • 单击底部的**Environment Variables …**按钮。
  • 在“用户变量”部分中，找到以PATH开头的行（PATH将全部为大写）。
  • 双击PATH。
  • 单击“ **新建…”**按钮。
  • 输入hugo.exe提取的文件夹→C:\Hugo\bin如果按照上面的说明操作。*PATH条目应该是Hugo所在的文件夹，而不是二进制文件。*Enter完成打字后按。
  • 在每个窗口单击“确定”退出。

以上是官方文档chrome浏览器自动翻译得来的说明。我给出一个步骤：

  • 如果你使用过Win 10 的系统搜索窗口的话，直接搜索环境变量就能快速进入了。
  • 在环境变量配置界面有上下两部分分为用户变量和系统变量。我们只需要打开编辑用户变量的Path变量。
  • 在编辑窗口依次点击新建→浏览，然后将该目录选中：C:\Hugo\bin。
  • 接下来一路点击确定保存。← 这步真的很重要😁

请注意：重装系统或者错误删除等情况重复以上步骤就可以。如果你要频繁更换电脑使用也可以，将hugo.exe这个可执行文件保存在优盘或者其它便携设备随时复制到Win10系统然后加入系统环境变量就可以。当然，您还得把以下步骤产生的文件夹跟这个可执行文件放在一起。以下步骤产生的文件夹通过网盘同步也是可以的。只是，我怎么都觉得麻烦，只是这个思路可以防止意外发生所以在这里强调一下。

4.生成本地hugo静态博客目录。

  • 比如您在D盘新建一个文件夹D:/hugo用于静态博客的调试和生成。

  • 接下来打开系统命令提示符工具，切换到D:/hugo

    cd D:/hugo

  • 新建博客

    hugo new site blog

  • 这样就会产生一个新的文件夹D:/hugo/blog，并且这个目录里面已经生成了静态博客的目录结构。里面有很多新的文件夹和一些文件：

  • config.yaml或config.tmol是博客的配置文件，需要配合主题使用

  • themes就是主题文件夹，比如你使用hugo-theme-zozo这个主题，请将这个主题下载并放到D:/hugo/blog/themes/hugo-theme-zozo。更多主题您可以浏览官方网站的主题频道或者搜罗github，如果配合git直接从GitHubgit clone https://github.com/imzeuk/hugo-theme-zozo.git这样会更方便。git clone之前请记得先cd D:/hugo/blog/themes到本地博客主题文件夹。有关在Win 10 系统安装并使用git请自行搜索教程，网上很多我就省略了。

  • content文件夹就是markdown文件保存目录，生成新的文章或页面都会自动产生在这个目录。推荐使用Typora编辑排版。

  • public文件夹是hugo渲染生成静态文件的保存目录，下面会提到生成方法。这个文件夹里面的文件就是博客根目录对应的文件了。

5.创建您的第一篇文章或者页面并在本地预览

注意：以下都需要命令提示符cd D:/hugo/blog下运行命令

创建文章

hugo new post/di-yi-pian-wen-zhang.md

这个命令生成的文件在content/post/文件夹，使用markdown编辑器比如Typora打开会看到文件已经包含了一个头部yaml信息，有关配置写法请自行参阅官方文档或者搜索相关信息。接下来就可以边写文章边排版了。

创建页面

比如创建关于我页面

hugo new about.md

本地预览

hugo server

提示会有一个类似于这样的地址：http://localhost:1313/，如果你的1313端口没被占用的话就是这样的地址。复制到浏览器打开就可以看到博客在本地的样子了。

对了，这个预览命令需要博客的config.yaml文件正确配置了theme等参数。否则您需要在命令中加入一些参数，类似这样：

hugo server --theme=hugo-theme-zozo --buildDrafts

6.渲染生成静态文件

以上操作并不能直接发布博客到网上，还需要生成静态文件并发布到网络。

本地生成静态文件

hugo

是不是很简单？如果你配置文件没问题的话就是这么简单，同样还可以带一些参数：

hugo --theme=hugo-theme-zozo --baseUrl="https://ditou.org/"

生成的静态文件在public文件夹，这就是上面提到的博客根目录。将这个目录里面的文件打包上传到对应的虚拟主机根目录就可以访问浏览了。当然很多人不这么用。

7.托管到GitHub

这是省钱的方法，免掉了虚拟主机的费用，甚至域名都可以暂时使用1078503.github.io这样的。具体部署到GitHub的方法同样请自行搜索研究，小白推荐使用Github Desktop，更直观省事儿。不只是GitHub，类似的服务还有很多。

8.部署到VPS

最简单的方法，跟上面的虚拟主机上传方法类似就不说明了。

正在使用的方法，git仓库同步推送。这就回到了文章开头说到的部分，我在这一步研究了很久，分享出来给需要的朋友参考。

VPS上的仓库和配置

如果您是使用宝塔面板，Nginx配置文件不用管，新建网站就可以直接使用或者使用已经为博客准备好的宝塔面板对应的网站配置。没有使用任何面板就需要安装Nginx并编辑配置文件，请参考这个链接。

SSH连接到VPS

在远程主机配置git仓库，因为我使用的centos7自带git所以可以直接使用，如果你的系统没有的话请自行安装。 比如在root目录下生成blog.git,并编辑post-receive(没有的话生成一个)

cd ~
git init --bare blog.git
cd blog.git
cd hooks
vim post-receive

vim是编辑器，你可以替换你习惯使用的编辑器将这段配置编译修改好后替换进去：

#!/bin/sh 
GIT_REPO=/root/blog.git
TMP_GIT_CLONE=/tmp/blog
NGINX_HTML=/www/wwwroot/dtz9.net
rm -rf ${TMP_GIT_CLONE}
git clone $GIT_REPO $TMP_GIT_CLONE
rm -rf ${NGINX_HTML}/*
cp -rf ${TMP_GIT_CLONE}/* ${NGINX_HTML}

以上/www/wwwroot/dtz9.net是我的博客根目录，你需要修改成您自己的Nginx配置文件对应的目录。

赋予可执行权限

chmod +x post-receive

每当blog仓库有push更新，Git钩子可以自动将更新拷贝到网站目录中去，使网站内容更新。我们还需要修改网站文件夹/www/wwwroot/dtz9.net的所有权为我所拥有

sudo chown root:root /www/wwwroot/dtz9.net
这一步到底需不需要我已经忘了，请自行尝试。

Win 10 本地配置仓库并使用

如果本地系统已经有git可以直接编译下面的命令运行，如果没有请自行安装调试。命令提示符下运行：

cd D:/hugo/blog
hugo
cd public
git init
git add --all
git commit -m "Initial blog repo"
git remote add origin root@您的IP:/root/blog.git
git remote set-url origin ssh://root@您的IP:端口/root/blog.git
git push origin master

我是这样使用的，每次本地编辑写好文章并预览检查后，直接运行上面的命令完事儿。

说明：

第一行 不解释，如果你只是在本地调试修改主题可能会新建一个目录，像这样：D:/hugo/test

第二行 渲染生成最新的静态文件用于推送到服务器

第三行 切换到静态文件目录并准备在这个目录建立仓库用于同步推送这个目录

第四行 建立仓库并初始化

第五行 将这个目录的所有文件添加到仓库

第六行 为这次添加的文件记录命名？我也说不清

第七第八行 这我就更加说不明白了😄姑且认为是准备推送到对应服务器的仓库

第九行 这个好理解，推送到服务器仓库

这篇文章不尽完美，会在获得新的技巧后更新到这里并在这行提示最后更新时间

当然，这些都是本人作为一个资深小白在不停的折腾后目前能掌握的使用方法。大佬们肯定能让这些运行的更优美更简单，欢迎大佬不吝赐教！比如，我该如何编译git同步命令并把它写入config，实现每次运行hugo直接推送到服务器仓库，而不是每次都需要复制粘贴这一大坨狗屎🤢。