搭建及部署一个开源免费的个人网站

Table of Contents

我的博客建设 - This article is part of a series.

Part 1: This Article

前言
#

从2014年注册了第一个域名起，我就开始折腾WordPress、Typecho等PHP博客平台，沉醉在搭建平台的快乐上，却忘记了最重要的事情，记录和分享。后来，我了解到了开源静态网站平台——Hugo，它操作优雅，我把它托管在Cloudflare和GitHub上速度和安全无虞，而且节省了服务器的费用。采用 Markdown 进行文章编辑，可以最大限度的让我关注“记录和分享”这件事情的本身，非常适合我。现在，以我自己的实践过程为例进行记录，让我们一起来吧～

1.基础
#

1.1 Hugo
#

1.1.1 它是什么
#

Hugo 是最快最流行的开源静态站点生成器之一。它是用 Go 语言实现的博客工具，采用 Markdown 进行文章编辑，自动生成静态站点文件，支持丰富的主题配置，也可以通过 js 嵌入插件。

1.1.2 如何安装
#

我的电脑使用Linux 的 openSUSE 发行版系统，参考Hugo文档，通过包管理器（Package Manager）在电脑里安装 Hugo 的扩展版本：

sudo zypper install hugo

安装完成后，使用以下命令进行验证，显示 Hugo 版本号代表安装成功：

hugo version

1.2 Git
#

1.2.1 它是什么
#

Git 是一个免费的开源分布式版本控制系统，旨在快速高效地处理从小到大的项目。 Git 易于学习，占用空间小，性能快如闪电。它凭借廉价的本地分支、方便的暂存区域和多个工作流程等功能，超越了 Subversion、CVS、Perforce 和 ClearCase 等 SCM 工具。

1.2.2 如何安装
#

参考Git安装文档，通过包管理器（Package Manager）在电脑里安装：

zypper install git

1.3 GO
#

安装 GO可以使用Huogo的模块功能，通过包管理器（Package Manager）在电脑里安装：

zypper install go

2. 新建
#

我用的是 blowfish主题，该主题有多种安装方式

使用 Blowfish-Tools 工具安装 (推荐)
使用 Git 子模块安装 (推荐)
使用 Hugo 模块安装
手动文件复制我是通过Git安装。 Hugo有丰富的主题，如果你想用其他的，可以参考相应的主题文档。

2.1 创建新的本地站点
#

在mywebsite目录下创建一个新的 Hugo 站点

hugo new site mywebsite

2.2 使用 Git 子模块安装主题
#

这个方法可以保证主题简单且快速地安装和更新。除了 Hugo 和 Go，你还需要确保本地机器安装了 Git。进入刚才创建的网站目录 mywebsite，初始化一个新的 Git 仓库并将 Blowfish 添加为子模块。

cd mywebsite
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

2.2.1 配置主题
#

在网站根目录中，删除 Hugo 自动生成的 hugo.toml 文件。
从主题文件themes/blowfish/config/_default中复制 *.toml 文件，粘贴到网站根目录config/_default/ 目录中。这将确保你的主题设置准确无误，在此基础上你能够轻松地自定义主题。如果项目中已经存在 module.toml 文件，请不要覆盖它。
通过整理，你的 config 目录看起来应该是这样：

config/_default/
├─ hugo.toml
├─ languages.en.toml
├─ markup.toml
├─ menus.en.toml
├─ module.toml  # 通过 Hugo 模块安装
└─ params.toml

2.2.2 更新主题
#

经常会有新版本的主题发布，新版本会修复 bug 和添加新功能。因为我是通过Git 子模块的方式安装的主题，所以可以使用 git 命令更新：

git submodule update --remote --merge

还有其他两种更新方式：

2.3 主题基础设置
#

在 config.toml 中，设置 baseURL 和 languageCode 参数。languageCode参数是用来指定你创作内容的主要语言。在目前多语言功能还不需要，暂时使用默认的英语作为主要语言。

# config/_default/config.toml

baseURL = "https://your_domain.com/"
languageCode = "en"

以下是站点根目录的快速概览。所有内容都放在 content 文件夹中：

.
├── assets
│   └── img
│       └── author.jpg
├── config
│   └── _default
├── content
│   ├── _index.md
│   ├── about.md
│   └── posts
│       ├── _index.md
│       ├── first-post.md
│       └── another-post
│           ├── aardvark.jpg
│           └── index.md
└── themes
    └── blowfish

2.4 写第一篇文章
#

可以通过 hugo new 命令发布新文章。举例：打开网站根目录，在content/posts文件夹下创建名为blog-test的文章：

cd mywebsite
hugo new content/posts/blog-test.md

用这个命令创建的 Markdown 文件会套用主题模板archetypes 文件夹中的模版。

2.5 本地调试
#

在发布到网站前可以在本地预览网站或内容的效果，运行hugo server，成功后，可以在 http://localhost:1313/ 中预览网站。

hugo server

hugo 命令可以将你写的 Markdown 文件生成静态 HTML 网页，生成的 HTML 文件默认存放在 public 文件夹中。

hugo

3. 发布
#

我把GitHub作为仓库，通过 Cloudflare Pages使用自己的域名连接至该仓库，GitHub中的新提交将使 Cloudflare 自动构建和部署更改。

3.1 GitHub
#

3.1.1 它是什么
#

GitHub是一个在线软件源代码托管服务平台，使用Git作为版本控制软件。是世界上最大的代码托管网站和开源社区。在2018年，GitHub被微软公司收购。

3.1.2 思路
#

创建 2 个 GitHub 仓库

源仓库：储存站点所有源文件
GitHub Pages 仓库：储存由 Hugo 从Markdown 文件生成的 HTML 文件。

将在源仓库中 Hugo 生成的静态 HTML 文件部署到 GitHub Pages 仓库中。

3.1.3 创建源仓库
#

命名博客源仓库
勾选 Public，设置为公开仓库。
勾选添加 README 文件

3.1.4 创建 GitHub Page 仓库
#

命名 GitHub Pages 仓库，这个仓库必须使用特殊的命名格式 <username.github.io>， <username> 是自己的 GitHub 的用户名。
勾选 Public，设置为公开仓库。
勾选添加 README 文件，这会设置 main 分支为仓库的默认主分支，这在后面提交推送博客内容时很重要。

3.2 SSH Key
#

3.2.1 它是什么
#

SSH(Secure Shell) 是允许两台电脑之间通过安全连接进行数据交换的网络协议。

3.2.2 生成新的 SSH 密钥
#

按照GitHub文档生成新的 SSH 密钥。，并将 SSH 密钥添加到 ssh-agent。

3.3 发布内容
#

3.3.1 思路
#

因为hugo 生成的静态 HTML 网页文件默认存放在 public 文件中，所以推送网页内容只需要把 public 中的 HTML 网页文件发布到 GitHub Pages 仓库中。

3.3.2 初始化 Git 仓库
#

将 public 文件夹初始化为 Git 仓库，并设置默认主分支名为 main。这么做的原因是：

GitHub 创建仓库时生成的默认主分支名是 main
用 git init 初始化 Git 仓库时创建的默认主分支名是 master
将 git init 创建的 master 修改成 main ，再推送给远端仓库 <username>.github.io ，这样才不会报错。

cd mywebsite/public
git init -b main

3.3.3 关联GitHub Pages仓库
#

在3.2.2中我们已经设置好了SSH KEY，通过GitHub Pages仓库的 SSH 链接，将 public 文件夹关联到 GitHub Pages 仓库：

git remote add origin [email protected]:Ahjuan/ahjuan.github.io.git

3.3.4 推送
#

推送博客源仓库的 public 文件夹中的 HTML 网页文件到 GitHub Pages 仓库 中，在推送仓库内容前要先用 git pull --rebase origin main 和远端仓库同步，否则会报错。

git pull --rebase origin main

添加当前目录下的所有文件到暂存区：

git add .

Git每次提交代码都需要写commit message，否则就不允许提交。一般来说，commit message 应该清晰明了，说明本次提交的目的，具体做了什么操作……

git commit -m "本次修改的信息"

将本地的main分支推送到GitHub Pages的 main 分支。

git push origin main

3.3.5 确认
#

转到 GitHub 查看 GitHub Pages 仓库中是否存在刚刚推送的文件，存在则代表推送成功。如果你没有设置自定义域名，且把 comfig.toml 文件中的 baseURL 设置为 https://<username>.github.io，就可以在 [https://username.github.io](https://cuttontail.blog/blog/create-a-wesite-using-github-pages-and-hugo/#8-%E6%9C%AC%E5%9C%B0%E8%B0%83%E8%AF%95%E5%92%8C%E9%A2%84%E8%A7%88) 中查看刚刚创建的网站。

3.4 后续更新步骤
#

创建你的文章xxx.md
用 hugo server 在本地预览，满意后准备发布。
运行 hugo 命令将 Markdown 文件生成 HTML 文件。
将修改先提交至源仓库

git add .
git commit -m "本次修改的信息"
git push

打开 public 文件
运行：

git add .
git commit -m "本次修改的信息"
git pull --rebase origin main #可选,如果远端仓库与本地一致，则不需要合并。
git push origin main

如果你使用的是自定义域名，第一次推送成功后，GitHub Pages 仓库会生成 CNAME 文件，所以第二次推送还要再合并一次：git pull --rebase origin main。后续更新博客就不再需要使用这个命令了。（根据实际情况使用）

发布内容除了手动发布，还能使用 GitHub Action 自动发布。

以上只是最基本的能够在互联网上发布一个网站，如果想要更多酷炫的功能还要再做更多的设置。当然，最重要的是不要忘记“记录和分享”。

4.参考资料
#

Author

Ahjuan Kao

We’ve always defined ourselves by the ability to overcome the impossible.

我的博客建设 - This article is part of a series.

Part 1: This Article

前言 #

1.基础 #

1.1 Hugo #

1.1.1 它是什么 #

1.1.2 如何安装 #

1.2 Git #

1.2.1 它是什么 #

1.2.2 如何安装 #

1.3 GO #

2. 新建 #

2.1 创建新的本地站点 #

2.2 使用 Git 子模块安装主题 #

2.2.1 配置主题 #

2.2.2 更新主题 #

2.3 主题基础设置 #

2.4 写第一篇文章 #

2.5 本地调试 #

3. 发布 #

3.1 GitHub #

3.1.1 它是什么 #

3.1.2 思路 #

3.1.3 创建源仓库 #

3.1.4 创建 GitHub Page 仓库 #

3.2 SSH Key #

3.2.1 它是什么 #

3.2.2 生成新的 SSH 密钥 #

3.3 发布内容 #

3.3.1 思路 #

3.3.2 初始化 Git 仓库 #

3.3.3 关联GitHub Pages仓库 #

3.3.4 推送 #

3.3.5 确认 #

3.4 后续更新步骤 #

4.参考资料 #