Featured image of post Build Your Blog 1

使用hugo+GitHub Pages搭建免费博客

本文介绍了如何使用hugo、如何配置hugo,并讲解了如何使用GitHub Pages搭建免费博客。

1 前言

Note

注意:我并不推荐这套方案,比起这套方案,hexo + GitHub Pages有着更加完善的生态。

如果说是使用托管服务搭建博客的话,其实我并不是很建议 hugo
hugo 相较于 hexo 来说,配置起来比较麻烦,而且 hugo 的主题插件也比较少。
它的优势在哪呢?它的唯一优势是生成速度快。但是既然都使用托管服务了,那么生成速度就不在我们的考量中。

那么为什么我还是使用 hugo 呢?
单纯是因为我一开始是想部署到自己服务器上的,后来才发现部署到 GitHub Pages 上更方便。

2 安装hugo

首先安装 Go

  • macOS
  • Linux
  • Windows
1
brew install go
1
sudo apt install golang-go

安装完成后,执行 go version 查看是否安装成功。

接下来去GitHub的release页面下载 hugo 的二进制文件。
下载地址

或者,如果你使用的是 MacOS ,可以直接使用 brew 安装。

1
brew install hugo

根据 README.md 安装即可。

安装完成后,使用 hugo new site blogName 创建一个新的站点。

3 配置hugo与挑选主题

Note

每个主题的配置文件都略微有区别,本文只挑选共性的部分进行讲解。

我使用的是 hugoplate 主题,其他主题也大同小异。
你可以在这里挑选你喜欢的主题。
并按照它的文档进行安装。

安装完主题后,我们需要配置 config.toml 文件。
(在 hugoplate 主题中,配置文件是 hugo.toml ,其他主题可能是 config.toml

首先我们按照需求填写基本信息。 baseURL 部分可以等创建完GitHub Pages后再进行填写。

1
2
3
4
5
6
7
baseURL = "https://hluvmiku.tech"
# Title of your website (required).
title = "HaleyCH's Blog"
# Your theme name
theme = "hugoplate"
# Default time zone for time stamps; use any valid tz database name: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List
timeZone = "Asia/Shanghai"

其中theme修改为你使用的主题名称。

Note

请务必配置 baseURL ,否则你的网站将无法正常访问。

下方内容按需配置:

配置语言与多国语

Tip

不建议使用多国语言,虽然hugo原生支持多国语言,但是多国语生成的sitemap会不被某些搜索引擎接受。


hugoplate 主题中,语言与目录配置文件在 config/_default 目录下。
若要支持多国语,只需修改 languages.toml 文件即可。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
################ English language ##################
[en]
languageName = "english"
languageCode = "en"
contentDir = "content/en"
weight = 1

################ Chinese language ##################
# [zh]
# languageName = "中文"
# languageCode = "zh"
# contentDir = "content/en"
# weight = 1

其中languageCode为语言代码,contentDir为语言对应的内容目录。
他们分别同目录下的menus.en.tomlcontent 目录下的 en 目录对应。

若要修改目录对应的翻译,则需修改对应语言的 menus.toml 文件。
如果有i18n目录,则需修改 i18n 目录下对应语言的 toml 文件。

定制你的博客

Note

这一块不同主题差距比较大,我只我对 hugoplate 主题的配置为例。

我先对config/_default目录下params.torml文件进行配置。

1
2
3
4
5
6
7
favicon = "images/favicon.png" # 网站图标
logo = ""  # logo 由于我没有,故为空。
logo_darkmode = ""
# theme-mode
theme_switcher = true
theme_default = "system" # available options [light/dark/system]
copyright = "Made with ❤️ by Haley.<br>Since 2023" # copyright

以上是基础的网站信息配置,下面是一些SEO配置。

1
2
3
4
5
6
# seo meta data for OpenGraph / Twitter Card
[metadata]
keywords = ["technology", "blog"]
description = "Hugo & Tailwindcss Starter"
author = "HaleyCH"
image = "images/og-image.png"

接下来,根据主题中使用的插件不同,可能在data目录下也会有部分配置,这部分我不做讲解。

此外,如果你想要修改主题的样式,可以在 assets 目录下进行修改。

定制化你的文章

hugo 中,文章通过 hugo new 命令创建。

1
hugo new posts/your-post-name.md

这样就创建了一篇文章,文章的内容在 content/posts/your-post-name.md 中。

它会查看 archetypes 目录下的 default.md 文件,将其内容执行并复制到新建的文章中。
下面是一个例子:

1
2
3
4
5
6
---
title_zh: ""
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

我将会另外写一篇文章讲解利用 hugoarchetypes 实现类似 hexoabbrlink 功能。

4 使用GitHub Pages部署免费博客

4.1 创建GitHub Pages

首先,我们需要创建一个仓库,仓库名必须为 username.github.io ,其中 username 为你的用户名。
这样,GitHub Pages就会自动为你创建一个网站。

Note

现在GitHub Pages已经可以在所有仓库中创建了,但是我还是建议使用 username.github.io 的方式。
因为这样可以不用自己申请域名。

你可以在这里查看GitHub Pages配置情况

202308281317772

4.2 部署博客

  1. 首先,我们需要在本地生成静态文件。
1
hugo

这样就会在 public 目录下生成静态文件。 2. 接下来,我们需要设置远程仓库。

1
2
3
4
cd public
git init
git remote add origin
git pull origin master
  1. 最后,我们将静态文件推送到远程仓库。
1
2
3
git add .
git commit -m "init"
git push origin master
  1. GitHub Pages 的设置中,将 Source 设置为 master branch
  2. 等待一段时间后,你的博客就会部署成功了。访问地址为 https://username.github.io

4.3 (可选)绑定域名

如果你想要绑定域名,可以在 GitHub Pages 的设置中,将 Custom domain 设置为你的域名。
然后,在你的域名服务商中,添加一条 CNAME 记录,将 username.github.io 指向你的域名。 即可完成绑定。

5 结语

至此,你的博客就已经部署成功了。
不过它存在以下几点问题:

  1. 操作繁琐,每次写完文章都需要手动执行一系列命令。
  2. 备份同步麻烦。

这些问题将会在我的下一篇博客中解决。
在下一篇博客中,我将详细讲解利用GitHub Action自动部署的方案,这样你就只需在本地push整个目录,就可以自动部署了。

comments powered by Disqus