使用 Hugo + Github 搭建个人博客

vlambda
2020-02-05

使用 Hugo + Github 搭建个人博客

一、前言

1：「技术博客的用户首先是自己」

其实写一篇技术博客，首先面对的用户应该是未来的自己。

因为人的记忆力有限，所以谁也不敢保证在未来还可以掌握现在的技能。

所以我们需要写技术博客，来把现在会的先记录下来。

但是博客是要发表的，所以我们自然而然的就会想好好的记录。

这无异于有助于提升我们的记录水准。

撰写技术博客有助于我们更好的理解技术，原理类似于费曼学习法。

我们可以通过教学来获得更好的知识吸收。

2：「如何阅读一篇技术博客」

我认为阅读一篇技术博客的时候，应该是在阅读的同时自己在写一篇技术博客。

然后最好去看最初的那份文档，就比如技术官方出的 API 文档、How To Start 文档等

二、参考资料

参考资料其实都在 HUGO 的官方文档中，我的建议阅读顺序如下：

1. Quick Start ：快速的了解如何使用 Hugo

https://gohugo.io/getting-started/quick-start/ gohugo.io

2. Host on Github：了解如何部署 Hugo 作为一个 Github Pages

https://gohugo.io/hosting-and-deployment/hosting-on-github/ gohugo.io

3. 作为拓展阅读材料，我觉得有兴趣可以了解下这些软件是怎么运作的

Netlify：做的一些 Vue 或者 React 想上线部署之后可以让别人预览，可以通过 Netlify 这个平台实现
Nanobox：本地开发工具，可以消除环境的复杂性，在部署和生产环境之间，进行自动化环境配置，通过虚拟化使得开发环境更简洁
AWS Amplify：亚马逊出品的移动应用开发程序管理工具
Firebase：Google 出品的 BAAS

4. 了解 GitHub Pages

About GitHub Pages help.github.com

5. 创建一个 Github Pages site

Creating a GitHub Pages site help.github.com 使用 Hugo + Github 搭建个人博客

三、实战操作：使用 Hugo 创建静态网站

1. 安装 Hugo

如果你是 Windows 用户：

Hugo 2020.02.03 Windows 64 zip 安装包 github.com

如果你是 Mac 用户：

brew install hugo

注意：需要提前安装 homebrew

2. 查看 Hugo 是否安装成功，通过检查版本号

hugo version

3. 创建一个新的网站

// 请先在命令行中进入您的工作目录
hugo new site quickstart

4. 添加一个主题

cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

注意：需要提前安装 git

5. 在根目录下的 config.toml 文件中添加一行

echo 'theme = "ananke"' >> config.toml

6. 添加一个文章

hugo new posts/my-first-post.md

7. 启动 Hugo 服务器

hugo server -D

四、实战操作：部署 Hugo 作为一个 Github Pages

将 Hugo 部署为 Github Pages 项目，并使用简单的 shell 脚本自动化整个过程

其实 Github Pages 的系列教程都有一个误区 ———— 即都没有抓到本质。

大家都在讲述如何部署一个 Github Pages，讲 Step by Step。

但是都没有点出，Github Pages 到底是一个什么东西。

所以读者往往看完了，云里雾里，只记得一系列繁复的操作。

So......请继续看～我来为大家解答！

Q：Github Pages 到底是在做什么？

A：Github Pages 本质上是一个静态网站托管系统，你可以使用它为你的每一个仓库制作一个静态网页入口。

它有两种存在方式：

识别 master branch 根目录下的：README.md 或者 index.html
识别 master branch 的 /docs 目录下的：README.md 或者 index.html

也就是说：

我们可以把我们的静态网页直接存在 master branch，并在 Github Repository 的 Setting 页中打开 Github Pages 选项，就可以通过一个域名访问到我们的想要的网站了。

使用 Hugo + Github 搭建个人博客 — Setting 页中的 Github Pages 选项

好了，我们接下来开始实战操作：

1. 创建一个 Github 仓库

2. 将该仓库 clone 到本地

git clone <YOUR-REPOSITORY_URL>

3. 进入到根目录，创建一个 Hugo 项目，确保在本地可以运行

hugo server

4. 创建新文章

hugo new posts/my-first-post.md

这里面值得注意的是，通过上述命令行创建的文章中，会自动生成一部分文本如下：

---
title: "My First Post"
date: 2019-03-26T08:47:11+01:00
draft: true
---

我们需要把 draft : true 修改成 draft : false 才可以上传这篇文章

5. 在 Github Repository 的 Setting 页面，修改 Source 的选项为 master branch /docs folder：

6. 修改配置文件 config.toml

baseURL = "https://swagcode-io.github.io/demo"

7. 打包网站到 /docs 文件夹

hugo -d docs

8. 上传代码至 master

git commit -m "updates $(date)"
git push origin master

9. 查看效果

（点击下方原文，进入知乎查看视频教程）

vlambda博客
学习文章列表