【效率工具】搭建个人静态博客-Hugo+Github（二）这是我参与更文挑战的第 12 天，活动详情查看：更文挑战实

这是我参与更文挑战的第 12 天，活动详情查看：更文挑战

前文介绍了【效率工具】Vuepress+GithubPages 搭建个人博客（知识笔记本）（一）、【效率工具】Node+Koa-实现 mock 数据接口& mock.js 方案(二)-，-本文介绍搭建个人静态博客工具 hugo

仅当参考，按需食用，不足之处，欢迎各路大佬不吝赐教，补充完善，欢迎分享

工欲善其事，必先利其器。实践（巧偷懒）促进科技发展-，-
作为一个攻城狮，捣腾也是学习的途径，比如搭建自己的个人博客，记录日常，记录学习，更向大家展示自己
本文将和大家分享使用 hugo + github, 手把手零成\本搭建自己的个人博客，助你增长知识，提高竞争力

使用 `hugo` 创建个人博客

Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

【文档】： Hugo 中文文档

【主题】： hugo theme

【源码】： gihub/gohugoio/hugo

hugo 基于 go 语言, 相对于 hexo 步骤简单, 不易出错; hexo 需要安装很多依赖(下文聊聊 hexo入手笔记)

一. 安装 `hugo`

OS : brew install hugo
win : 下载 Hugo https://github.com/gohugoio/hugo/releases 下载 32/64 位

查看版本命令 hugo version window 需配置环境变量;(~~在安装路径下打开命令行输入也可以查看版本~~)

配置环境变量: 系统>高级系统设置>环境变量>系统变量>新建:变量名随意不冲突就行如 HUGO,变量值为 hugo.exe 所在的路径文件夹(不需写 hugo.exe)确定,然后找到用户变量 PATH 编辑, 在变量值最后加上;%刚才写的变量名%,如: ;%HUGO% , 注意前后分号;

二. 创建

命令: hugo new site <项目名>
真的特别快呀，快到你不敢相信秒建

三. 主题

hugo 主题库 https://themes.gohugo.io

本(假)博客使用主题: hugo-tranquilpeak-theme
项目目录下, 下载主题:

git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

四. 启动

命令:

# -t 指定主题: m10c
hugo server -t m10c --buildDrafts
# Web Server is available at http://localhost:1313

五. 写博客

新建博客(.md)命令:

# 项目目录下执行命令, 会在 content/post/first-blog.md
hugo new post/first-blog.md

六. 部署到 github

使用主题打包命令:

# 首先打包, 生成 public
# --themes=hugo-tranquilpeak-theme 指定主题 --baseUrl="部署地址" --buildDrafts build
hugo --theme=hugo-tranquilpeak-theme --baseUrl="https://xn213.github.io/hugo_blog"

# 进入 public  使用 git push 到 github
git init
git add .
git commit -m '第一次提交 hugo 创建的博客'
# 本地关联远端
git remote add origin https://github.com/xn213/hugo_blog.git
git push -u origin master

填坑之路

.md 中引用本地图片部署后路径问题:

【图片路径】: content/post/img/test.jpg

【图片使用】: ![test.jpg](/post/img/test.jpg) <img src="/post/img/test.jpg" width="50%" /> <video src='/post/img/test.mp4' controls="controls"></video>

hugo new post/first-blog.md 创建路径为 content/post/first-blog.md

打包后会 meta 标签定义 baseUrl='协议域名/项目名/' 在根目录下创建 post/img/test.jpg,

故部署后请求 域名/项目名/post/img/test.jpg

如: https://xn213.github.io/hugo-blog/post/img/test.jpg
打包后静态资源路径问题:

图片路径:

缩略文章/ 文章内容等用到的背景图需放到主题文件夹下: themes\hugo-tranquilpeak-theme\static\images
\static\images 里面的图片会打包到打包文件根目录下的 images 中: \public\images
\content\post\img => \public\post\img
一键部署(需要 git 配置好 SSH )

部署命令文件代码: (根据每次修改内容修改 git commit 的内容)

# /deploy.sh 部署命令 文件代码
# test 自动部署
# 确保脚本 遇到的错误 停止
set -e

# 打包博客
hugo --theme=hugo-tranquilpeak-theme --baseUrl="https://xn213.github.io/hugo_blog"

cd public

git add .

# :sunny::four_leaf_clover::love_letter::heart_eyes::revolving_hearts:
git commit -m 'updated :喝杯小酒.. :revolving_hearts: & 酷狗musicUrl lost & test audios controls'

git push

还可以利用 Github Actions, 帮助我们自动构建部署，可参考前文的推荐学习参考

当然好用的博客搭建工具还有很多，这里列举部分工具，仅作参考，抛砖引玉，

既可以查找使用自己喜欢的主题，也可以定制自己的主题，有没有 get 到呢?

欢迎各路大神评论出你的私藏工具, 把你的 blog 分享给大家=，=

今日份预告明天更新：

说完了 hugo + github 搭建个人博客，小巧方便，明天计划更新 hexo + github pages...

赶快行动起来，搭建一个自己的博客小圈子，记录小秘密，记录学习，提升竞争力，下一篇 hexo 敬请期待！ hahah~~

【效率工具】搭建个人静态博客-Hugo+Github（二）

使用 hugo 创建个人博客

一. 安装 hugo