实战：手把手带你从0到1搭建自己的hugo博客站点(持续更新)-2022.5.4

实验环境

win10
git version 2.17.0.windows.1
hugo v0.98.0

实验软件

链接：https://pan.baidu.com/s/1C-2E0-6Ub7s9DG6npUoZ8Q?pwd=elmi
提取码：elmi
2022.5.4-hugo实验软件

前置条件

如果你想拥有一个心可以栖息的地方，那么就来和我一起搭建一个属于自己的博客平台，在这里，你可以随心所欲！

1、什么是hugo

1.hugo官网

https://gohugo.io/

2.hugo优点

当前的静态网站生成工具对环境依赖过多，性能较差，于是使用 Go 语言写了一个静态网站生成器 Hugo。不仅解决了环境依赖、性能较差的问题，还有使用简单、部署方便等诸多优点，通过 LiveReload 实时刷新，极大的优化文章的写作体验。

3.Hugo跟Wordpress和Hexo对比

🍀 hugo跟wordpress其他建站工具的对比

1. wordpress 全球31%的网站使用wordpress，尽管他有各种主题和插件，但是也有非常多的缺点，安全性，seo不够友好，定制麻烦
2. hugo hexo最快的静态生成工具,seo友好，静态更安全，方便定制模板，缺点没有插件，如果要定制模板只能懂一点go的语法
3. wordpress是动态的并且还需要托管数据库，所以托管费用比较昂贵
4. hugo hexo是生成静态的页面，在本地生成后上传到服务器就可以了，托管费用非常便宜，可以直接用免费的github托管
5. 国外网站技术对比 https://stackshare.io/stackups/hugo-vs-wordpress

🍀 wordpress vs hugo vs hexo

工具	静态/动态	托管	安全性	访问速度	在线编辑	markdown
wordpress	动态	复杂	需要经常升级	快	可以	插件支持
hugo	静态	简单	非常安全	非常快	不可以	支持
hexo	静态	简单	非常安全	快	不可以	支持

工具	编程语言	seo支持	插件	主题	页面生成速度	安装和使用	生态
wordpress	PHP	不友好	支持	非常多	不支持	复杂
hugo	Go	友好	不支持	多	非常快	简单	生态会好些
hexo	nodejs	友好	很多	非常多	快(当文件很多，就特别慢了)	稍微复杂

2、hugo安装

1.安装git

见我的另一篇文章：https://blog.csdn.net/weixin_39246554/article/details/124569192?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124569192%22%2C%22source%22%3A%22weixin_39246554%22%7D&ctrtid=mr1mD

2.安装hugo

• 打开hugo下载链接，直接下载go二进制安装包：

https://github.com/gohugoio/hugo/releases/download/v0.98.0/hugo_extended_0.98.0_Windows-64bit.zip

• 将下载的go二进制安装包放到自己电脑某个目录下，然后将其路径放到自己电脑的环境变量下

将下载好的二进制安装包，放到自己pc某个目录下：(自己配置目录为D:\SoftInstall\hugo)

配置环境变量具体步骤如下：

win + R，输入：sysdm.cpl快速打开pc的环境变量配置：

点击高级：

点击环境变量：

来到系统变量，找到Path那一行，点击编辑：

点击新建，然后输入刚才下载的二进制目录所在路径，点击确认：

点击确认：

点击确认：

至此，hugo的环境变量就配置好了，我们打开cmd，输入hugo version查看是否有效果：

有结果输出，表示hugo安装正常。

3.本地预览

1.创建本地站点根目录

自己来到D:\目录下，然后输入如下命令，进行创建本地站点根目录：

$ hugo new site hugoblog
Congratulations! Your new Hugo site is created in D:\hugoblog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.


hg@LAPTOP-G8TUFE0T MINGW64 /d
$ cd hugoblog/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ ls
archetypes/  config.toml  content/  data/  layouts/  public/  static/  themes/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog

2.下载hugo主题

⚠️ 因为hugo没有内置主题，所以你需要去下载一个：

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ git clone https://github.com/reuixiy/hugo-theme-meme.git themes/meme
Cloning into 'themes/meme'...
remote: Enumerating objects: 5583, done.
remote: Counting objects: 100% (740/740), done.
remote: Compressing objects: 100% (289/289), done.
remote: Total 5583 (delta 507), reused 451 (delta 451), pack-reused 4843
Receiving objects: 100% (5583/5583), 9.31 MiB | 12.59 MiB/s, done.
Resolving deltas: 100% (3086/3086), done.

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml

3.创建第一个测试文件

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ hugo new post/first.md
Content "D:\\hugoblog\\content\\post\\first.md" created

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ echo "i love you,xyy hurt!" >> content/post/first.md

🍀 说明

hugo new [路径]文章名.md
hugo new会创建包含默认元数据的文章，如果没有路径, 文章会保存在content目录中。

md的文章会在开始部分添加元数据,
数据格式为 yaml toml json格式如下:

+++
title = "my first blog"
date = "2019-10-28T09:38:35+08:00"
draft = true
+++

markdownz正文部分>>>
PS:
draft=true表示文章默认为草稿
draft=false 才能识别非草稿

4.本地预览

$ hugo server -v -D

#hugo -d 目标路径
不指定目标路径, 会默认在public目录下生成可部署的网站.
我们通过hugo server -D本地生成网站预览. 他会监控页面的更改, 并刷新页面.

在浏览器打开如下链接，http://localhost:1313/ 观察效果：

完美。😘

4.将本地数据推送到github仓库并设置公网可访问

1.github上创建仓库

登录github：https://github.com/

点击Your repositories：

点击new：

填写仓库名，选择Public，添加一个Readme文件：

点击Create respository：

完成仓库创建。

2.将本地文件推送到远程仓库

• 此时，来到博客根目录，先执行下hugo -D生成下网站所需数据：

$ hugo -D

此时，你能看到public目录下，生成可很多文件，这个就是后续生成网站所需要的数据。

• 此时，来到public目录下，执行如下命令

$ cd public/

$ git init
$ git remote add origin git@github.com:OnlyOnexl/hugoblog.git
$ git add .
$ git commit -m"first commit"
$ git push  --set-upstream origin master
$ gs

🍀 关于这里如何配置git客户端到github的公私钥方法，请看如下方法：

Git配置ssh登录GitHub管理自己的代码

检测本地pc是否已存在ssh秘钥(不存在可忽略次步骤)

1️⃣ 设置签名

右键单击鼠标，点击 Git Bash Here输入以下命令，设置签名：

git config --global user.name  "hg"
git config --global user.email  "2675263825@qq.com"

2️⃣ 生成ssh秘钥

然后生成密钥(公钥和私钥)：

ssh-keygen -t rsa -C "2675263825@qq.com"

#备注：
1.过程中按2次回车就好；
2.也可以添加-b选项 # ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

3️⃣ 复制ssh公钥到github

现在密钥已经生成，一般存放在（/c/Users/you/.ssh/id_rsa.pub.），我们运行下面的命令将密钥复制为粘贴板，等会儿会粘贴到github上去：

复制 id_rsa.pub 文件内容，登录 GitHub，点击用户头像→Settings→SSH and GPG keys，New SSH Key，输入复制的密钥信息，保存：

4️⃣ 验证：本地连接Github

右键单击鼠标，点击 Git Bash Here输入以下命令，如果如下图所示，出现你的用户名，那就成功了

$ ssh -T git@github.com

• 此时来到github仓库下，观看数据已经被推送上来了：

• 最后记得在github上设置下gitpages功能

点击Settings，Pages:

选择master分支，点击Save：

• 验证效果：

公网访问：

https://onlyonexl.github.io/hugoblog/

这里应该是网络问题！

5.如何自定义域名

• 购买域名

到阿里云万网，购买域名：

https://www.aliyun.com/ss/?spm=5176.19720258.J_8058803260.36.e9392c4aBhlzKl&k=%E5%9F%9F%E5%90%8D

域名购买后记得实名认证下：(用阿里云手机app效果会更好！)

• 配置域名解析

来到阿里云域名控制台，配置域名解析：

• 配置GitHub Pages

• 验证

公网访问域名：http://www.onlyyou520.com/

大功告成，接下来就可以开心写自己博客了！😘

3、hugo进阶

📍 如何为某篇文章打上标签及分类？(已解决)-2022.5.4

当然实际上，Hugo默认会产生 tags 和 categories 的分类，如果只需要这两个，可以不用在 config.toml 中声明就在post头部使用。

• 配置方法

title: "First"
date: 2022-05-03
tags: ["hugo"]
categories: ["hugo"]

• 验证

📍 如何一键发布自己写好的文章到github？(已解决)-2022.5.4

• 配置方法

$ vim /etc/profile
alias hg="cd /d/hugoblog/ && hugo -D && cd /d/hugoblog/public && git add -A && git commit -m 'empty' && git push"

$ source /etc/profile

这里利用了shell脚本进行一键发布哈哈！😘

• 测试效果

在content/post目录下创建新文件：

一键发布：

📍 注意：本地仓库推送到github，数据是有一定延时的！😥

📍 如何解决文章后关于Author及Link信息？(已解决)-2022.5.4

• 问题现象

• 解决办法

默认配置：

修改后配置：

• 验证(完美)😘

📍 如何为首页添加背景图片？

📍 如何为首页添加音乐/动画插件？

📍 如何修改站点名称(已解决)-2022.5.4

• 修改方法

title = "Onlyyou"

• 效果

📍 hugo目录结构

hg@LAPTOP-G8TUFE0T MINGW64 /d
$ cd hugoblog/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ ls
archetypes/  config.toml  content/  data/  layouts/  public/  static/  themes/
1. config.toml
  所有的hugo站点都有一个全局配置文件，用来配置整个站点的信息，hugo默认提供了跟多配置指令。
2. content
  站点下所有的内容页面，也就是我们创建的md文件都在这个content目录下面。
3. data
  data目录用来存储网站用到一些配置、数据文件。文件类型可以是yaml|toml|json等格式。
4. layouts
  存放用来渲染content目录下面内容的模版文件，模版.html格式结尾，layouts可以同时存储在项目目录和themes//layouts目录下。
5. static
  用来存储图片、css、js等静态资源文件。
6. themes
  用来存储主题，主题可以方便的帮助我们快速建立站点，也可以方便的切换网站的风格样式。
7. public
  hugo编译后生成网站的所有文件都存储在这里面，把这个目录放到任意web服务器就可以发布网站成功
8. archetypes  
  Hugo new 创建内容页面的时候预置的内容模板

📍 好看的hugo主题？

📍 如何安装新的hugo主题(已解决)-2022.5.4

🍀 一般情况下，将主题克隆下来放到themes目录下就可以

🍀 但有的主题，需要把config.toml给替换掉，例如meme主题：

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ git clone https://github.com/reuixiy/hugo-theme-meme.git themes/meme #将主题克隆并重命名到themes目录即可！
Cloning into 'themes/meme'...
remote: Enumerating objects: 5583, done.
remote: Counting objects: 100% (740/740), done.
remote: Compressing objects: 100% (289/289), done.
remote: Total 5583 (delta 507), reused 451 (delta 451), pack-reused 4843
Receiving objects: 100% (5583/5583), 9.31 MiB | 12.59 MiB/s, done.
Resolving deltas: 100% (3086/3086), done.

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ rm config.toml && cp themes/meme/config-examples/en/config.toml config.toml

📍 hugo命令

💧 查看hugo版本

PS D:\hugoblog> hugo version
hugo v0.98.0-165d299cde259c8b801abadc6d3405a229e449f6+extended windows/amd64 BuildDate=2022-04-28T10:23:30Z VendorInfo=gohugoio

💧 创建本地站点根目录

$ hugo new site hugoblog
Congratulations! Your new Hugo site is created in D:\hugoblog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.


hg@LAPTOP-G8TUFE0T MINGW64 /d
$ cd hugoblog/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ ls
archetypes/  config.toml  content/  data/  layouts/  public/  static/  themes/

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog

💧 创建第一个测试文件

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ hugo new post/first.md
Content "D:\\hugoblog\\content\\post\\first.md" created

hg@LAPTOP-G8TUFE0T MINGW64 /d/hugoblog
$ echo "i love you,xyy hurt!" >> content/post/first.md

💧 本地预览

$ hugo server -v -D

#备注
server      A high performance webserver
  -v, --verbose                    verbose output
      --verboseLog                 verbose logging
-D, --buildDrafts            include content marked as draft      

💧 构建数据

$ hugo -D

📍 如何取消GitHub Pages功能(已解决)-2022.5.4

• 故障现象：在关闭这个GitHub Pages功能时报错

• 解决办法

本次直接删除仓库了：

参考链接

https://www.kancloud.cn/yunduanio/gohugo_learning/1439165

https://cloud.tencent.com/developer/article/1852173

关于我

我的博客主旨：

• 排版美观，语言精炼；
• 文档即手册，步骤明细，拒绝埋坑，提供源码；
• 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

1. 个人微信二维码：x2675263825 （舍得）， qq：2675263825。

   

2. 个人微信公众号：《云原生架构师实战》

   

3. 个人csdn

   https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

   

4. 个人已开源干货😘

   不服来怼：宇宙中最好用的云笔记 & 其他开源干货：https://www.yuque.com/go/doc/73723298?#

   

5. 个人博客：(www.onlyyou520.com)

   

最后

好了，关于玩转hugo实验就到这里了，感谢大家阅读，最后贴上我女神的photo，祝大家生活快乐，每天都过的有意义哦，我们下期见！

lov

1. 个人微信二维码：x2675263825 （舍得）， qq：2675263825。

   [外链图片转存中…(img-fVTvCZvJ-1651654605216)]

2. 个人微信公众号：《云原生架构师实战》

   [外链图片转存中…(img-JPROIXvi-1651654605217)]

3. 个人csdn

   https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

   [外链图片转存中…(img-y6Db2KGx-1651654605218)]

4. 个人已开源干货😘

   不服来怼：宇宙中最好用的云笔记 & 其他开源干货：https://www.yuque.com/go/doc/73723298?#

   [外链图片转存中…(img-l4wSpUkD-1651654605219)]

5. 个人博客：(www.onlyyou520.com)

   [外链图片转存中…(img-ioQMf7ZO-1651654605219)]

最后

好了，关于玩转hugo实验就到这里了，感谢大家阅读，最后贴上我女神的photo，祝大家生活快乐，每天都过的有意义哦，我们下期见！

lov