这是我参与更文挑战的第 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 versionwindow 需配置环境变量;(在安装路径下 打开命令行 输入也可以查看版本)配置环境变量: 系统>高级系统设置>环境变量>系统变量>新建:变量名随意不冲突就行如
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【图片使用】:
<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~~
