从零开始：使用 Hugo 和 GitHub Pages 构建个人博客

查看本文大纲

引言

在信息爆炸的今天，拥有一个个人博客不仅是分享知识、记录生活的平台，也是技术人员品牌建设的重要工具。如果你希望以最小的成本开始你的数字化表达之旅，那么本文介绍的 Hugo 和 GitHub Pages 将是你的理想选择。接下来，让我们一步步探索如何利用这两款工具快速搭建和部署你的个人博客。

准备工作

开始之前，你需要准备以下几样工具和账号：

GitHub 账号：访问 GitHub 创建账号。GitHub Pages 将托管你的网站，因此你需要在 GitHub 上创建一个以 username.github.io 命名的项目。
Hugo：Hugo 是一个高效的静态网站生成器。你可以从 Hugo 官网下载并安装它。
百度统计或 Google Analytics：在网站中集成在线统计，可以帮助你了解网站访问情况，帮助你优化网站。
Typora：强烈推荐的 Markdown 编辑器。

Hugo 简介

Hugo 是一款开源的静态网站生成器，以其构建速度快而闻名。它将 Markdown 或其他格式的内容文件转换成完整的 HTML 网站。静态网站意味着所有页面在部署前就已经生成，极大地提升了访问速度并降低了服务器负担。

Hugo 有下面的特性：

速度快：即使是上千页面的网站也能在几秒内生成。
无需数据库：增强安全性，降低维护复杂性。
易于使用：简单的命令行操作可以快速生成和部署网站。

开始搭建

首先建立自己的网站，mysite 是网站的路径

$ hugo new site mysite

然后进入该路径

$ cd mysite

在该目录下你可以看到以下几个目录和 config.toml 文件

 ▸ archetypes/ 
 ▸ content/
 ▸ layouts/
 ▸ static/
   config.toml

config.toml是网站的配置文件，包括baseurl、 title、copyright等等网站参数。

这几个文件夹的作用分别是：

archetypes：包括内容类型，在创建新内容时自动生成内容的配置
content：包括网站内容，全部使用 markdown 格式
layouts：包括了网站的模版，决定内容如何呈现
static：包括了 css, js, fonts, media 等，决定网站的外观

Hugo 提供了一些完整的主题可以使用，下载这些主题：

$ git clone --recursive https://github.com/spf13/hugoThemes themes

此时现成的主题存放在themes/文件夹中。

现在我们先熟悉一下 Hugo，创建新页面：

$ hugo new about.md

进入content/文件夹可以看到，此时多了一个 markdown 格式的文件about.md，打开文件可以看到时间和文件名等信息已经自动加到文件开头，包括创建时间，页面名，是否为草稿等。

---
date: "2015-02-01T18:19:54+08:00"
draft: false
title: "about"
categories: ["github-pages"]
tag: ["blog","post"]
---

# About me
- Jimmy Song

我在页面中加入了一些内容，然后运行 Hugo:

$ hugo server -t hyde --buildDrafts

-t 参数的意思是使用 hyde 主题渲染我们的页面，注意到 about.md 目前是作为草稿，即 draft 参数设置为 true，运行 Hugo 时要加上 --buildDrafts 参数才会生成被标记为草稿的页面。在浏览器输入 localhost:1313，就可以看到我们刚刚创建的页面。

注意观察当前目录下多了一个文件夹 public/，这里面是 Hugo 生成的整个静态网站，如果使用 Github pages 来作为博客的 Host，你只需要将 public/ 里的文件上传就可以，这相当于是 Hugo 的输出。

说明

使用 hugo new 命令生成的文章前面的加号中包括的那几行，是用来设置文章属性的，这些属性使用的是 yaml 语法。

date 自动增加时间标签，页面上默认显示 n 篇最新的文章。
draft 设置为 false 的时候会被编译为 HTML，true 则不会编译和发表，在本地修改文章时候用 true。
title 设置文章标题
tags 数组，可以设置多个标签，都好隔开，hugo 会自动在你博客主页下生成标签的子 URL，通过这个 URL 可以看到所有具有该标签的文章。
categories 文章分类，跟 Tag 功能差不多，只能设置一个字符串。

你可以在这里找到更多模版。

自定义域名

如果你希望使用自定义域名，可以在诸如 Namecheap 或 GoDaddy 的网站注册域名，然后配置 DNS 解析到你的 GitHub 页面。

结语

利用 Hugo 和 GitHub Pages，你不仅能快速搭建个人博客，还能享受编写、部署的便捷与乐趣。希望本文能帮助你迈出建立个人在线品牌的第一步。