Hugo搭建个人博客教程

前言

经过种种尝试，还是决定选择了 Hugo 作为了搭建个人博客的框架，Hugo 是目前可以搭建个人博客的框架中部署最快的，而且坑也相对很少，不过还是有的，近几天折腾了不少东西，也终于算是初步搭建完了 Hugo+Zoo 主题的个人博客

在本文中我会讲解部署的详细过程，也会科普一些部署中的原理，毕竟我也刚刚接触，所以有些说的不对的地方也希望评论区的大佬来勘误，谢谢啦。

如果遇到部署问题，欢迎在评论区打出你的问题，我和知乎这个优秀社区的所有人都有可能回答你的疑问哦，本文如果对你有帮助的话，还希望多多点赞收藏转发，谢谢啦。

1 - 使用 Hugo 创建静态网站实战

1、安装 Hugo

博主用的是 Windows 系统，所以安装过程中我会基于 Windows 进行讲解，有关其他操作系统的安装方法可以参考官方的文档

Windows 下的 Hugo 安装我推荐使用 chocolatey 包管理器进行安装，接触过 Linux 的朋友们都知道，Linux 的各种包管理器，利用命令行就可以实现包的更新，删除等操作，Windows 下也有类似的包管理器就是 chocolatey 了。

安装过程详解

• 安装 chocolatey 包管理器：在官网点击 Install Now 即可下载

• 命令行中敲入choco --version，如果显示版本号证明你的 chocolatey 已经安装完毕，如果有误请检查环境变量

• 命令行中安装 hugo：

  choco install hugo -confirm
  

  安装 hugo-extended（扩展版本）：

  choco install hugo-extended -confirm
  

• 检查 hugo 是否安装成功：命令行中敲入hugo version

2、初步建站实战（利用 GithubPages 进行部署）

• 在 Github 中建立一个仓库，仓库名为用户名.github.io

• 将仓库 clone 到本地一个你想存放网站文件的文件夹

git clone 

• 创建网站：在存放你博客的根目录 中敲入以下命令

//注意site后面是一个点，不能忽略啊，.代表当前目录
hugo new site .

• 添加主题（以我博客的主题 Zzo 为例子）：

git init
git submodule add https://github.com/zzossig/hugo-theme-zzo.git themes/zzo

• 把 themes/zzo 下的 exampleSite 文件夹的内容复制到你博客的根目录
• 在博客根目录中敲命令：（启动 hugo 服务器）

hugo server

• 点击这里查看测试（主题和示例网站中的 markdown 博客都正确显示了）

3、GithubPages 服务 + 云托管

1 - 配置 GithubPages 服务进行个人博客的部署，使得所有人都可以访问你的博客站

• 在 config.toml 文件中设置 baseURL 为 Github Pages 服务的域名（用户名.github.io）

#config/config.toml

baseURL = "https://blog.calvinhaynes.top/" #未设置阿里云托管之前应该是 "https://用户名.github.io"
title = "Calvin Haynes's Blog"
theme = "zzo"

• 将更改过后的 github 仓库文件夹（就是你的博客根目录）推送到远端
• 在 Github 上设置 GithubPages 服务的一些参数

（Ps：有关 Custom domain 在以下的云托管中进行解释）

2 - 云托管（阿里云）

​ 博主买了阿里云的学生机，一个 1 核 2GB 内存的轻量应用服务器，所以将博客站云托管在这个服务器上，以下就是基于阿里云的教程，其他服务器也都差不太多，可以自行 google，有关阿里云服务器购买和初步配置自行到官网查看文档吧。

• 拥有一个阿里云服务器还不够，你需要购买注册一个你自己的专属域名。
• 拥有自己的专属域名之后，进入域名解析的工作台，就可以看见你的域名了

• 解析设置：（点击修改后各种参数的设置都有相关说明，其他问题也都可以在阿里云官网找到文档解释）

• 服务器绑定域名：

• 解析设置完后在你的博客根目录中的 static （静态文件存放的地方）中创建一个 CNMAE 文件（注意没有任何后缀）

• CNAME 文件中写入你设置的域名，我的就是 blog.calvinhaynes.top ，写完记得更新 github 库（CNAME 文件就是给你这个 Github 库绑定域名用的，CNAME 的全名就是 Canonical Name，意思是别名）

• 最后更改 Github pages 配置中的 Custom domain 为你设置的新域名就好咯

• 现在就可以输入你设置的域名进行访问咯，阿里云服务器在中国，所以访问速度快的一批！！！（别忘了 config.toml 文件的 baseURL 参数设置）

2 - 主题参数设置和个性化

​ 这部分主要是看主题作者写的详细文档进行自己的设计，在 Hugo 官网中找到的比较热门的主题的 Github 库中都有相关的文档，建议小伙伴们自行查看学习，每个主题都有不同之处，我使用的是 Zzo 主题，它的官方文档在这里

​ 我的 Github 仓库在这里，欢迎 fork 和查看配置文件

3 - 资源整理（一些有用的文档）

Zzo 主题官方文档

阿里云云解析 DNS 文档

hugo 文章的 front matter

结语

这是一篇利用 hugo 框架搭建个人静态博客的基础教程，关于 hugo 的进阶使用建议大家查看官方文档，当然如果关于我的博客站利用 hugo 实现了一些有趣的操作我也会写相关的文章，欢迎大家再来阅读。

感谢您看到最后，如果本文对您有所帮助的话，还希望给我一个一键三连（狗头保命），如果对于我和我的文章感兴趣的话，欢迎点一个关注，您会收到我回答和文章的更新通知，也欢迎加入我建立的技术交流群 QQ：725133797 讨论交流。

最后附上我的个人博客站：blog.calvinhaynes.top/，欢迎访问和交流