使用Hugo搭建个人博客

发表于 |

简介

Hugo和Hexo类似, 也是一个搭建静态博客的工具, Hugo由Go语言编写,相比之下 Hugo编译速度要比Hexo快很多

不过各有各的优点, 目前我两个工具都在用, 主要还是以Hexo为主

接下来介绍Hugo的使用

工具安装

  1. Mac用户

    1
    brew install hugo

  2. Windows用户

    GitHub下载安装包

    下载完后 给hugo.exe配置环境变量, 方便任意目录使用该程序

安装完后 可以在命令窗口输入hugo version 来检测是否安装成功

工具基础使用

  1. 创建博客空工程

    1
    hugo new site 项目名称

    执行完后会在当前目录下生成工程文件夹:

    image-20220901170044828

    目录介绍:

    • content目录: 用于存放博客文章
    • themes目录: 用于存放博客主题
    • static目录: 该目录下文件不会被渲染 可用于存放静态资源 比如图片js css以及CNAME等等
    • archetypes目录:里面存放文章模版文件
    • data目录:用于存放数据
    • layouts目录:用于存放布局文件
    • config.toml文件: 配置文件

  2. 新建文章

    1
    hugo new post/first.md

  3. 下载博客主题

    博客必须要有一个主题 不然渲染出来的页面是空白, 我们以hyde主题为例:

    1
    2
    3
    # 创建 themes 目录
    $ cd themes
    $ git clone https://github.com/spf13/hyde.git

  4. 生成静态文件

    需要指定以那个主题进行静态页面渲染

    1
    hugo --theme=hyde

    此时目录下会自动生成一个public目录, 里面的文件即为生成的静态文件, 可以直接部署到网站

  5. 部署到GitHub

    添加静态仓库关联:

    1
    2
    3
    $ cd public
    $ git init
    $ git remote add origin https://github.com/xxx/xxx.github.io.git

    或者使用submodule的方式:

    1
    git submodule add -f -b master https://github.com/xxx/xxx.github.io.git public

    最后将静态文件推送到仓库:

    1
    2
    3
    4

    $ git add -A
    $ git commit -m "first commit"
    $ git push -u origin master

    部署这一块 相比hexo要繁琐一些, 我们可以使用脚本或者用GitHub actions自动部署

其他命令

  1. 生成独立页面

    1
    hugo new about.md

  2. 博客本地调试

    调试时同样需要指定一个主题

    1
    hugo server --theme=hyde

    服务启动后 浏览器里打开： http://localhost:1313, 即可看到当前博客页面, 修改文章动态更新

    如果需要让草稿一并加入调试 那么可以加入-D:

    1
    hugo server --theme=hyde -D

  3. 生成静态文件时草稿也进行渲染

    1
    hugo  --theme=hyde -D

    必须是大写的D

进阶使用

  1. 每次执行指令都要指定主题太过繁琐? 没事 我们在配置文件中添加以下代码 配置默认主题即可解决烦恼

    1
    2
    # 主题名称
    theme = "hyde"

    image-20220901174231361

  2. 自定义域名无法访问?

    1. 需要在配置文件中将baseURL参数替换成你的域名
    2. 同时在static目录下新建CNAME文件, 然后输入你的域名

本文为作者原创转载时请注明出处 谢谢

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

0%