六一的部落格

行百里者半九十




说明

  1. github pages

    github提供的免费服务，可以用来部署静态博客

  2. hugo

    本地构建静态网页

  3. anubis

    hugo主题


安装hugo

github

官网

部分主题需要用到hugo_extended提供的支持

hugo_extended


windows

  1. 下载hugo

    github - hugo

  2. 添加环境变量

    右键此电脑 > 属性 > 高级系统设置 > 环境变量 > 编辑Path

    添加 

    <hugo路径>

    e.g. 

    D:\installed-software\hugo_extended

macos


方法一: 使用homebrew安装 

1brew install hugo

方法二: 使用go安装

  1. 安装go

    官网下载

  2. 设置go环境变量 

    1# go
2export PATH=/usr/local/go/bin:$PATH
3export GOROOT=/usr/local/go
4export GOPATH=/Users/USERNAME/go
5export GOBIN=/Users/USERNAME/go/bin
6
7# go安装的软件
8export PATH=$GOBIN:$PATH

  3. 使用go安装hugo

    如若遇上网络不佳，配置代理 

    1go env -w GOPROXY=https://goproxy.cn,direct
2go env -w GOSUMDB=off

    安装并验证 

    1go install github.com/gohugoio/hugo@latest
2hugo env -v

创建项目

  1. 新建站点 

    1# f:/
2hugo new site tech-blog

  2. 站点项目结构

    文件/目录 说明
    config.toml 配置文件；yaml格式也可以
    content/ 存放blog；支持md和org
    themes/ 存放主题
    public/ 生成的静态页面；同步到Github项目
    archetypes/ 文章模版

新建博客

在项目路径执行 

1# f:/tech-blog
2hugo new first-blog.md
3hugo new post/second-blog.md

博客路径为 

f:/tech-blog/content/first-blog.md
f:/tech-blog/content/post/second-blog.md

使用主题anubis

anubis on hugo

anubis on github

  1. 将主题作为项目子模块 

    1# f:/tech-blog
2git init
3git submodule add https://github.com/mitrichius/hugo-theme-anubis.git themes/anubis

  2. 使用anubis提供的模板 

    1# f:/tech-blog
2cp themes/anubis/exampleSite/config.toml .
3cp themes/anubis/exampleSite/content/. content

anubis

  • 提供标签（tags）和分类（categories）功能, 提供文章列表（archives）
  • 文章存放到content/post目录下

文章模板

yaml 

 1---
 2author: "author"
 3title: "article title"
 4date: "2023-03-17"
 5description: "article description"
 6tags: [
 7"tag-1",
 8"tag-2",
 9]
10categories: [
11"category",
12]
13---
14简单介绍
15
16<!- -more- ->
17
18正文

移除 - - 之间的空格


构建静态网页

选项 说明 缩写 构建或测试
- -theme=anubis 设置主题 -t anubis both
- -watch 修改文件后自动刷新浏览器 -w server
- -buildDrafts 包括标记为draft的笔记 -D both
- -buildFuture 包括新发布笔记；检查date选项 -F both
- -baseURL=" http://enjoy61.github.io/ " 如若编译时未设置，GithubPage部署会丢失样式 both
- -cleanDestinationDir 删除public文件夹中不再使用的文件 hugo

移除 - - 之间的空格


本地测试

  • 查询server选项

    参考 

    1# f:/tech-blog
2hugo help server

  • 测试 

    1# f:/tech-blog
2hugo server --theme=anubis --watch
3# hugo server

    访问 http://localhost:1313/


构建静态页面 

1# f:/tech-blog
2hugo --theme=anubis --baseURL="https://enjoy61.github.io/"
3# hugo

生成文件路径 

f:/tech-blog/public/*

在github创建项目

  1. 创建仓库

    • 仓库名为enjoy61.github.io
    • 使用github pages提供的免费服务需公开项目

  2. 测试服务: 为github设置主题

    添加_config.yaml文件 

    1remote_theme: pages-themes/[email protected]

  3. 将public文件夹提交到仓库


使用hugo和github pages搭建静态博客


2023年6月8日   2025年4月19日  


说明

  1. github pages

    github提供的免费服务，可以用来部署静态博客

  2. hugo

    本地构建静态网页

  3. anubis

    hugo主题


安装hugo

github

官网

部分主题需要用到hugo_extended提供的支持

hugo_extended


windows

  1. 下载hugo

    github - hugo

  2. 添加环境变量

    右键此电脑 > 属性 > 高级系统设置 > 环境变量 > 编辑Path

    添加 

    <hugo路径>

    e.g. 

    D:\installed-software\hugo_extended

macos


方法一: 使用homebrew安装 

1brew install hugo

方法二: 使用go安装

  1. 安装go

    官网下载

  2. 设置go环境变量 

    1# go
2export PATH=/usr/local/go/bin:$PATH
3export GOROOT=/usr/local/go
4export GOPATH=/Users/USERNAME/go
5export GOBIN=/Users/USERNAME/go/bin
6
7# go安装的软件
8export PATH=$GOBIN:$PATH

  3. 使用go安装hugo

    如若遇上网络不佳，配置代理 

    1go env -w GOPROXY=https://goproxy.cn,direct
2go env -w GOSUMDB=off

    安装并验证 

    1go install github.com/gohugoio/hugo@latest
2hugo env -v

创建项目

  1. 新建站点 

    1# f:/
2hugo new site tech-blog

  2. 站点项目结构

    文件/目录 说明
    config.toml 配置文件；yaml格式也可以
    content/ 存放blog；支持md和org
    themes/ 存放主题
    public/ 生成的静态页面；同步到Github项目
    archetypes/ 文章模版

新建博客

在项目路径执行 

1# f:/tech-blog
2hugo new first-blog.md
3hugo new post/second-blog.md

博客路径为 

f:/tech-blog/content/first-blog.md
f:/tech-blog/content/post/second-blog.md

使用主题anubis

anubis on hugo

anubis on github

  1. 将主题作为项目子模块 

    1# f:/tech-blog
2git init
3git submodule add https://github.com/mitrichius/hugo-theme-anubis.git themes/anubis

  2. 使用anubis提供的模板 

    1# f:/tech-blog
2cp themes/anubis/exampleSite/config.toml .
3cp themes/anubis/exampleSite/content/. content

anubis

  • 提供标签（tags）和分类（categories）功能, 提供文章列表（archives）
  • 文章存放到content/post目录下

文章模板

yaml 

 1---
 2author: "author"
 3title: "article title"
 4date: "2023-03-17"
 5description: "article description"
 6tags: [
 7"tag-1",
 8"tag-2",
 9]
10categories: [
11"category",
12]
13---
14简单介绍
15
16<!- -more- ->
17
18正文

移除 - - 之间的空格


构建静态网页

选项 说明 缩写 构建或测试
- -theme=anubis 设置主题 -t anubis both
- -watch 修改文件后自动刷新浏览器 -w server
- -buildDrafts 包括标记为draft的笔记 -D both
- -buildFuture 包括新发布笔记；检查date选项 -F both
- -baseURL=" http://enjoy61.github.io/ " 如若编译时未设置，GithubPage部署会丢失样式 both
- -cleanDestinationDir 删除public文件夹中不再使用的文件 hugo

移除 - - 之间的空格


本地测试

  • 查询server选项

    参考 

    1# f:/tech-blog
2hugo help server

  • 测试 

    1# f:/tech-blog
2hugo server --theme=anubis --watch
3# hugo server

    访问 http://localhost:1313/


构建静态页面 

1# f:/tech-blog
2hugo --theme=anubis --baseURL="https://enjoy61.github.io/"
3# hugo

生成文件路径 

f:/tech-blog/public/*

在github创建项目

  1. 创建仓库

    • 仓库名为enjoy61.github.io
    • 使用github pages提供的免费服务需公开项目

  2. 测试服务: 为github设置主题

    添加_config.yaml文件 

    1remote_theme: pages-themes/[email protected]

  3. 将public文件夹提交到仓库



Tess   Hugo

六一的部落格 © 2023-2025   CC BY-NC-SA 4.0