创建你的第一个博客

本文主要教你使用 GitHub PagesHugo 创建一个博客。

1. 使用 hugo 创建博客

注:你也可以使用 hexo, jekyll 等其他静态博客生成工具,详情自己百度。

1.1 安装 hugo

MacOS 安装 hugo

# 若未安装 homebrew,参考这里安装:https://treehouse.github.io/installation-guides/mac/homebrew
brew install hugo

其他系统参考:

1.2 创建博客

# ilivelearnteach.github.io 为本地目录名,可以随意更改
hugo new site ilivelearnteach.github.io

参考: Hugo Quick Start

1.3 选择一个主题

假设你喜欢主题 Even

# 进入你刚创建的博客目录
cd ilivelearnteach.github.io
# 使用 git 管理你的博客
# 不了解 git 的同学,可以参考教程进行学习(重要不紧急):https://www.liaoxuefeng.com/wiki/896043488029600
git init
# 添加 even 主题
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even

更多主题见: Hugo Themes

1.4 配置博客

(假设使用 Even 主题)在主题的 exampleSite 目录下有一个 config.toml 文件,将这个 config.toml 文件复制到你的站点目录下,根据自己的需求更改即可。

注意修改 baseURL 为 "http://ilivelearnteach.github.io/"

注:具体配置请参考你选择的主题的官方文档

1.5 创建你的第一篇博客

# 创建博客文章
hugo new post/my-first-post.md
# 然后打开文件 `ilivelearnteach.github.io/content/post/my-first-post.md`,
# 把 `draft: true` 改成 `draft: false`

# 注意:even 主题使用的是 post,但是很多主题是 posts,所以是下面这个命令,
# 还是那句话,具体参考你选择主题的官方文档
# hugo new posts/my-first-post.md

1.6 本地预览博客

hugo server

打开 http://localhost:1313/ 就可以预览你的博客了


2. 使用 GitHub Pages 部署博客

注:你还可以使用 GitLabBitbucket,或者国内的 giteecoding.net 等部署博客。

详情参考: Hugo Hosting & Deployment 或者进行 百度搜索

2.1 注册 github 账户

假设用户名为 ilivelearnteach

2.2 创建仓库

创建仓库 ilivelearnteach.github.io

  1. 仓库名必须是 你的用户名.github.io
  2. 这三个必须至少勾选一个(使仓库生成 main 分支,否则后续会出错)

2.3 提交博客到 github

2.3.1 使用 submodule 管理你的博客内容

# ilivelearnteach 换成你的用户名
git submodule add -b main https://github.com/ilivelearnteach/ilivelearnteach.github.io public

2.3.2 生成博客内容并提交到 github

# 生成博客内容
hugo

# 进入 public 目录
cd public

# 提交博客到 git 管理
git add .
git commit -m "my first blog"

# 提交博客到 github
git push origin main

2.4 完成

稍等一会儿,直接访问 https://ilivelearnteach.github.io/ 就可以看到博客了。

PS: GitHub Pages 会自动开启。

打开 https://github.com/ilivelearnteach/ilivelearnteach.github.io 的 settings 页面即可以看到。

如果没有自动开启 GitHub Pages,就手动选择 main 分支,/ (root) 路径,点击 Save 即可。

更多详情参考: Hugo Host on GitHub

Avatar
叶王
高级研发工程师

目前主要从事云原生后台开发

相关