用|用 Hugo 和 Github Pages 构建个人博客用Hugo和GithubPages构建个人博客

个人博客是展示自己经历或成就的理想场所。把个人简历、一些非常酷的小项目或生活体验写到博客里是一种非常棒的感觉。
一些喜欢写博客的小伙伴肯定想过，要是有一个属于自己的博客网站就好了。
所以，本篇文章的目的就是和大家分享一种自己动手搭建博客的方案：Hugo + Github pages
介绍
在动手搭建之前，有必要给小伙伴们介绍 Hugo 和 Github pages 分别是什么。
Github 想必大家不陌生了，它是全球最大的同性网站。托管个人、团队或组织的项目。
Hugo 是一个用 Golang 写的静态网站生成器，非常简单、高效，而且易于扩展。你可以用它更换不同的主题，生成静态博客网站，配合 Github pages，全球各地的网友都可以访问到你的网站。
以下的站点用 Hugo 和 Github pages 搭建，下面介绍部署过程。
step1. 申请一个 Github 仓库
1. 注册 Github 如果已有账号，直接登录
2. 了解 Github page 创建过程进入 Github Pages 官网，了解创建过程。
3. 创建仓库

点击 Github 右上角头像旁边的 "+"，
点击 New repository 进入创建仓库页面
输入仓库名称，如下图:

文章图片

注意：仓库名的格式为 .github.io，username 是你 Github 的账号名。
点击页面最下方的 Create reporitory 即创建成功
访问 https://.github.io 看看是否能够访问成功

step2. 安装 Hugo
Hugo 有多种安装方式，具体怎么安装要看你的电脑系统。
Hugo 官网安装指南
我的电脑是 win10 系统，可以下载 exe 文件直接安装即可，也可以下载源码编译安装。
这里 win10 源码编译过程：

克隆文件到本地

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

$ cd hugo $ go install
编译成 exe 文件

$ go build -o hugo.exe main.go
将 hugo.exe 添加到环境变量中
将 hugo.exe 移动到你想放入的文件中，例如我将该文件放到 D:\software\Hugo\bin 文件中，在系统变量 path 中添加该目录即可
测试 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，看到的页面跟我们在本地的一摸一样。
【用|用 Hugo 和 Github Pages 构建个人博客】以上即是创建个人博客的整个过程，感兴趣的小伙伴们赶紧试试吧！！！