hugo 基于 go 语言, 相对于 hexo 步骤简单, 不易出错; hexo 需要安装很多依赖

使用 hugo 创建博客

一. 安装 hugo

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

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

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

二. 创建

  1. 命令: hugo new site <项目名>
  2. 快到你不敢相信 秒建

三. 主题

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

本博使用主题: hugo-tranquilpeak-theme

  1. 项目目录下, 下载主题: git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

四. 启动

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

五. 写博客

  1. 新建博客(.md)命令:
  # 项目目录下执行命令, 会在 content/post/first-blog.md
  hugo new post/first-blog.md

六. 部署到 github

  1. 使用主题打包命令:
   # 首先打包, 生成 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

填坑之路

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

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

    图片使用: ![test.jpg](/post/img/test.jpg) <img src="/post/img/test.jpg" width="50%" /> <video src='https://xn213.github.io/hugo-blog/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

  2. 打包后静态资源路径问题:

    • 图片路径:

    1. 缩略文章/ 文章内容 等用到的背景图 需放到主题文件夹下: themes\hugo-tranquilpeak-theme\static\images

    2. \static\images 里面的图片会打包到 打包文件根目录下的images中: \public\images

    3. \content\post\img => \public\post\img

  3. 一键部署(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 ruoxiyy:喝杯小酒.. :revolving_hearts: & 酷狗musicUrl lost & test audios controls'

git push