用 Hugo 和 Github Pages 构建个人博客

个人博客是展示自己经历或成就的理想场所。把个人简历、一些非常酷的小项目或生活体验写到博客里是一种非常棒的感觉。

一些喜欢写博客的小伙伴肯定想过，要是有一个属于自己的博客网站就好了。

所以，本篇文章的目的就是和大家分享一种自己动手搭建博客的方案：Hugo + Github pages

介绍

在动手搭建之前，有必要给小伙伴们介绍 Hugo 和 Github pages 分别是什么。

Github 想必大家不陌生了，它是全球最大的同性网站。托管个人、团队或组织的项目。

Hugo 是一个用 Golang 写的静态网站生成器，非常简单、高效，而且易于扩展。你可以用它更换不同的主题，生成静态博客网站，配合 Github pages，全球各地的网友都可以访问到你的网站。

以下的站点用 Hugo 和 Github pages 搭建，下面介绍部署过程。

step1. 申请一个 Github 仓库

1. 注册 Github

如果已有账号，直接登录

2. 了解 Github page 创建过程

进入 Github Pages 官网，了解创建过程。

3. 创建仓库

1. 点击 Github 右上角头像旁边的 "+"，
2. 点击 New repository 进入创建仓库页面

3. 输入仓库名称，如下图:
   

   注意：仓库名的格式为 <username>.github.io，username 是你 Github 的账号名。

4. 点击页面最下方的 Create reporitory 即创建成功
5. 访问 https://<username>.github.io 看看是否能够访问成功

step2. 安装 Hugo

Hugo 有多种安装方式，具体怎么安装要看你的电脑系统。

Hugo 官网安装指南

我的电脑是 win10 系统，可以下载 exe 文件直接安装即可，也可以下载源码编译安装。

这里 win10 源码编译过程：

1. 克隆文件到本地

   $ git clone https://github.com/gohugoio/hugo.git

2. 安装

   $ cd hugo
   $ go install 

3. 编译成 exe 文件

   $ go build -o hugo.exe main.go

4. 将 hugo.exe 添加到环境变量中
   将 hugo.exe 移动到你想放入的文件中，例如我将该文件放到 D:\software\Hugo\bin 文件中，在系统变量 path 中添加该目录即可

5. 测试 Hugo

   $ hugo version
   hugo v0.94.0 windows/amd64 BuildDate=unknown

step3. 构建本地站点

1. 新建 Hugo 站点

进入你想存放 Hugo 的目录，执行以下命令：

# blog 是站点名称
$ hugo new site blog

新建成功后，进入 blog 目录，可以看到目录结构：

目录解析：

• config.toml: 我们需要更改的配置文件
• content: 存放所有的博客文章
• static: 存储静态文件，例如背景图片，徽标，CSS，JS 等。此目录中的文件将直接复制到 /public 中。该文件夹的优先级高于主题下的 /static。
• themes: 存放下载的主题
• archetypes: 存储的.md 模板文件，其优先级高于 theme 文件下的 /archetypes 文件。
• layouts: 存放 .html 模板，优先级高于 theme 文件夹下的 /layouts 文件夹
• public: 在执行 hugo 命令后，生成的静态文件存放的目录

step4. 选择 Hugo 主题

进入Hugo 主题官网，选择一个你喜欢的主题。

以 KeepIt 主题为例。

执行以下命令：

$ cd blog
$ cd themes
$ git clone https://github.com/Fastbyte01/KeepIt.git

下载完成后，修改 config.toml 文件，修改之前的内容如下

# blog/config.toml
baseURL = "http://example.org/"
languageCOde = "en"
title = "Hugo Site"

我们进入刚刚下载的主题 Github 仓库，进入 exampleSite 文件中，可以看到开发者已经给我们提供里示例，可以直接复制过来。

复制过来的部分内容如下：

baseURL = "https://[your github username].github.io/"
languageCode = "en"
defaultContentLanguage = "zh-cn"
title = "StrideDot"
theme = "KeepIt"

注意：将 [your github username] 改成你的 Github 用户名。

step5. 创建第一个博客

安装过程完成了，现在终于可以创建我们的第一个博客了。

$ cd blog
$ hugo new about.md

注意：需要去掉 about.md 文件中的 draft=true，否则站点无效。

测试站点：

$ hugo server

在浏览器中输入 http://localhost:1313，回车，页面将我们刚刚下载的主题显示出来了。

step6. 部署到 Github

前面的安装和测试都是准备工作，我们的目的是将 markdown 语法生成静态文件，并发布到我们刚刚申请的仓库中。

执行如下命令：

$ cd blog
$ hugo

进入 public 目录，我们看到 Hugo 帮我们生成了一大堆静态文件。

现在我们把这些静态文件推送到在 step1 申请的 stridedot.github.io 仓库中

$ cd public
$ git init
$ git add .
$ git remote add origin https://github.com/username/username.github.io.git
$ git commit -m 'first commit'
$ git push -u origin main

刷新 Github 仓库，可以看到文件已经推上去了。
到现在，我们的站点已经成功发布。
在浏览器中输入 https://stridedot.github.io，看到的页面跟我们在本地的一摸一样。

以上即是创建个人博客的整个过程，感兴趣的小伙伴们赶紧试试吧！！！