---
author: 北邙
date: 2022-02-07 16:22:26
tags: 技术/网站
---

# 教程：无成本、零基础搭建博客

## 前言

本文是为[《网络“根据地”》](https://blog.c1921.space/6cb83ed3c2b5/)而写的博客搭建教程，目的是为了帮助左派同志建立自己的宣传平台，也适用于普通网友。

最终可达成的结果为：获得一个**使用 Hexo 框架、由 GitHub Pages 托管**的免费博客。

## 域名

搭建网站需要域名和服务器，要免费获得这两项，目前较好的方式是使用 GitHub Pages 托管博客。

GitHub 文档中关于 [GitHub Pages](https://docs.github.com/cn/pages/quickstart) 有如下描述：

> You can use GitHub Pages to showcase some open source projects, host a blog, or even share your résumé.

大意是：您可以使用 GitHub Pages 展示一些开源项目、托管博客，甚至分享您的简历。

### GitHub

{% note warning %}
**警告**
GitHub 用户名将成为域名的一部分，请谨慎设置。
{% endnote %}
{% note success %}
如果对 GitHub Pages 域名不满意，可以将此默认域名指向自己拥有的自定义域名。
{% endnote %}

1. 进入 [GitHub](https://github.com/) 官网。
2. 点击右上角 Sign up 注册 GitHub 账号。
3. 登录后，在任何页面的右上角，使用 **+** 下拉菜单选择 New repository（新建仓库）。
4. 输入 `username.github.io` 作为存储库名称。替换 `username` 为您的 GitHub 用户名。例如，如果您的用户名是 `c1921` ，则存储库名称应该是 `c1921.github.io` 。

### 自定义域名

{% note success %}
自定义域名非必要项，如果并未拥有自定义域名，也没有购买的意向，则跳过本步骤。
{% endnote %}

#### 什么是域名

> 网域名称（英语：Domain Name，简称：Domain），简称域名、网域，是由一串用点分隔的字符组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位。域名可以说是一个IP地址的代称，目的是为了便于记忆后者。例如，wikipedia.org是一个域名。人们可以直接访问wikipedia.org来代替IP地址，然后域名系统（DNS）就会将它转化成便于机器识别的IP地址。这样，人们只需要记忆wikipedia.org这一串带有特殊含义的字符，而不需要记忆没有含义的数字。
>
> 域名的核心是域名系统（英语：Domain Name System，缩写：DNS），域名系统中的任何名称都是域名。在域名系统的层次结构中，各种域名都隶属于域名系统根域的下级。域名的第一级是顶级域，它包括通用顶级域，例如.com、.net和.org；以及国家和地区顶级域，例如.us、.cn和.tk。顶级域名下一层是二级域名，一级一级地往下。现在，还有一些新兴的中文域名，例如.在线等。这些域名向人们提供注册服务，人们可以用它创建公开的互联网资源或运行网站。顶级域名的管理服务由对应的域名注册管理机构（域名注册局）负责，注册服务通常由域名注册商负责。
>
> 截止2019年，已有超过7.41亿个域名被登记注册。

#### 购买域名

如有需要，通过相关平台购买，这里暂且不表。

#### 配置自定义域名

详见 [管理 GitHub Pages 站点的自定义域](https://docs.github.com/cn/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site)

## Hexo

至此，我们已经获得了一个域名（即仓库名 `username.github.io` ），并将其托管在 GitHub Pages ，你可以通过在浏览器输入这个域名来访问网站。不过目前为止它还没有任何内容，所以我们需要使用 Hexo 来填充它。

### 安装

#### 安装编辑器

建议安装 [Visual Studio Code](https://code.visualstudio.com/)。

#### 安装 Git 和 Node.js

下载并安装：

- [Git](http://git-scm.com/)
- [Node.js](http://nodejs.org/) （ Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本）

#### 安装 Hexo

在任意一文件夹内空白处单击右键，（如果是 Windows 11 系统点击“选择更多选项”后方能继续）选择 Git Bush Here，在弹出的命令处理器中输入以下命令：

{% note success %}
本页面支持直接复制代码，请点击代码块右上角 `Copy` 。
在命令处理器中粘贴请右键选择 Paste 。
{% endnote %}

- 安装 Hexo

	```bash
	npm install -g hexo-cli -g
	```

- 安装  Hexo 自动部署发布工具

	```bash
	npm install hexo-deployer-git --save
	```

### 配置 Hexo

#### SSH

- 检查 SSH，输入下方命令

	```bash
  ssh
  ```

- 生成 SSH，输入下方命令

	```bash
	ssh-keygen -t rsa -C "GitHub 注册邮箱"
	```

- 敲击 4 次回车
- 在 C:\用户名\ .ssh 文件夹内打开 id_rsa.pub，将其内容**全选复制**
- 打开 GitHub ，进入用户设置中的 [SSH and GPG keys](https://github.com/settings/keys)，点击 **New SSH key**
  - **Title** 随意输入
  - 在 **Key** 栏中粘贴 id_rsa.pub 中的内容
  - 点击 **Add SSH key**
- 回到 Git，检查 SSH 是否绑定成功

	```bash
	ssh -T git@github.com
	```

- 输入 yes

#### 生成本地内容

选择将要生成博客的文件夹，右键选择 Git Bush Here 。

初始化 Hexo

```bash
hexo init
```

显示以下内容即为成功。

```bash
INFO  Start blogging with Hexo!
```

#### 修改配置

打开 VSC ，点击文件\打开文件夹，选择博客根目录，在左侧栏中选择根目录下的 _config.yml 文件，按你的需求进行编辑，以我的配置为例：

{% note warning %}
**警告**
选项的冒号后必须有一个空格才能填写内容。
{% endnote %}

{% note warning %}
**警告**
必须将结尾的 `deploy` 替换为：

```yaml
deploy:
  type: git
  repository: https://github.com/github 用户名/github 用户名.github.io.git
  branch: main
```

注意将 `github 用户名`替换为自己的用户名。
{% endnote %}

```yaml
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 根据地 # 网站标题
subtitle: '北邙的博客' # 网站副标题
description: '全世界无产者，联合起来！' # 网站描述
keywords: 共产主义 # 网站的关键词。支持多个关键词。
author: 北邙 # 您的名字
language: zh-CN # 网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。
timezone: 'Asia/Shanghai' # 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://blog.c1921.space/ # 网址, 必须以 http:// 或 https:// 开头
permalink: :hash/ # 文章的永久链接格式，默认为 :year/:month/:day/:title/
permalink_defaults: # 永久链接中各部分的默认值
pretty_urls: # 改写 permalink 的值来美化 URL
  trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true # 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)

# Directory
source_dir: source # 资源文件夹，这个文件夹用来存放内容。
public_dir: public # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang # 国际化（i18n）文件夹
skip_render: # 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
external_link:
  enable: true # 在新标签中打开链接
  field: site # 对整个网站（site）生效或仅对文章（post）生效
  exclude: '' # 需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false # 显示草稿
post_asset_folder: false # 启动 Asset 文件夹
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章
highlight: # 代码块的设置, 请参考 Highlight.js 进行设置
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs: # 代码块的设置, 请参考 PrismJS 进行设置
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# Category & Tag
default_category: uncategorized # 默认分类
category_map: # 分类别名
tag_map: # 标签别名	

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss # 时间格式
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime' # 当 Front Matter 中没有指定 updated 时 updated 的取值

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 # 每页显示的文章量 (0 = 关闭分页功能)
pagination_dir: page # 分页目录

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid # 当前主题名称。值为false时禁用主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy: # 部署部分的设置
  type: git
  repository: https://github.com/bmc1921/bmc1921.github.io.git
  branch: main

```

### 写作

你可以执行下列命令来创建一篇新文章。

```bush
hexo new <title>
```

执行这个命令，将会在 .\source\ _posts 下生成一个以你输入的 title 为标题的 Markdown 文件（所以也可以直接在此文件夹里新建`.md`文件）。
现在，你就可以在这个 Markdown 文件中写作了。

#### Markdown

>Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。
>
>使用 Markdown 与使用 WYSIWYG 编辑器不同。在 Microsoft Word 之类的应用程序中，单击按钮以设置单词和短语的格式，并且，更改立即可见。而 Markdown 与此不同，当你创建 Markdown 格式的文件时，可以在文本中添加 Markdown 语法，以指示哪些单词和短语看起来应该有所不同。
>
>例如，要将一个短语表示为标题的话，只须在短语前面添加一个井号即可（例如， `# Heading One`）。或者要加粗一个短语的话，只须在短语前后各加两个星号即可（例如，`**this text is bold**`）。可能需要一段时间你才能习惯文本中的 Markdown 语法，尤其是如果你已习惯了所见即所得的应用程序的话。

详细教程请看：[Markdown 指南中文版](https://www.markdown.xyz/)

#### Front-matter

{% note success %}
Front-matter 非必要项，但强烈建议添加。
{% endnote %}

Front-matter 是文件最上方以 `---` 分隔的区域，用于指定个别文件的变量，举例来说：

```yaml
---
title: 纪念十月革命和反对修正主义
date: 2021/11/07 00:15:00
---
```

{% note warning %}
**警告**
Front-matter 必须在文件的最上方，上下以 `---` 分隔，并在下面的 `---` 后空一行再进行写作。
{% endnote %}

更多参数请查看：<https://hexo.io/zh-cn/docs/front-matter>

### 部署

现在，我们已经写完了博客内容，输入以下指令，生成静态文件。

```bush
hexo g
```

在部署之前，我们可以先输入以下指令在本地服务器查看网站的效果。

```bush
hexo s
```

在浏览器中输入 <http://localhost:4000> ,进入本地服务器。

{% note success %}
在某些情况（尤其是更换主题后），如果发现对站点的更改无论如何也不生效，输入以下指令清除缓存文件和静态文件。

```bush
hexo clean
```

然后重新生成静态文件
{% endnote %}

{% note success %}
如果之前使用 `hexo s` 开启了服务器，那么输入新的指令之前，记得按 `Ctrl+C` 关闭服务器。
{% endnote %}

检查确定无误后，我们使用以下指令部署。

```bush
hexo d
```

如果显示以下文字则部署成功。

```bush
INFO  Deploy done: git
```

{% note success %}
由于 GitHub 是国外网站，所以部署可能会因网络原因失败，可以多次输入 `hexo d` 命直至成功。
{% endnote %}

通过这一步，我们的静态文件已经上传到了 GitHub 对应的仓库中，我们终于可以通过域名来访问博客了。

{% note success %}
部署成功后可能需要等几分钟，网页才会更新。
{% endnote %}

### 主题

可以在 Hexo 官网选择[主题](https://hexo.io/themes/)。

具体安装方式请查看相应主题制作者的说明。

## 结语

由于本人能力有限，本文难免会有纰漏，读者如果在操作过程中有任何疑问或发现本文错误，请在下方评论区提出。

## 参考

1. [Quickstart for GitHub Pages - GitHub Docs](https://docs.github.com/cn/pages)
2. [域名 - 维基百科，自由的百科全书](https://zh.wikipedia.org/wiki/%E5%9F%9F%E5%90%8D)
3. [文档 | Hexo](https://hexo.io/zh-cn/docs/)
4. [Markdown 指南中文版](https://www.markdown.xyz/)