Hexo博客搭建教程系列·预备知识
1.1 为什么搭建博客
在你想要搭建一个自己的博客前，你需要问自己两个问题。
我真的有必要搭建博客吗？
我能做到持续输出文章吗？
可以看看这篇文章：个人网站存在的意义 - JoyQi
在考虑了以上两个问题后，你仍然决定搭建博客的话。那就往下面看吧。我会讲一些搭建博客需要了解的知识。
1.2 必看视频
- 网站上线教程 | 个人网站托管 | 服务器 IP DNS CDN 备案 | 腾讯云静态网站托管 - bilibili
- Hexo+github搭建个人博客与主题配置（最新版） - bilibili
- Git + Gitee + Hexo 搭建个人博客 - bilibili
这些合集视频解释了搭建一个博客网站的教程和、遇到的各种名词和解决方法。
1.3 代码相关知识
1.3.1 Git 和 GitHub
Git 是一个命令行工具，一个分布式版本控制系统，可以管理和跟踪你的代码历史版本。而 GitHub 是一个代码托管云服务网站，帮助开发者存储和管理其项目源代码，且能够追踪、记录并控制用户对其代码的修改。
Git 教程
内容全面，图文并茂，涵盖初级、中级、高级。
浅显易懂，适合初学者。
官方教程，可以当「新华字典」使用。
一个在线的 Git 学习网站，通过可视化交互的方式学习 Git 相关操作。适合有一定基础的同学。
GitHub 教程
GitHub 官方出品，教学内容包含：新建仓库、新建分支、修改提交（Commit）以及请求拉取（Pull Request）。原文为英文版，中文翻译可以点击 此处 。
主要包含
git和github常用技巧，适合有一定基础的同学想要进一步掌握一些高级技巧。
其他教程
以上链接来自 GitHub中文社区 (githubs.cn)。
1.3.2 前端三件套
如果你是一个对编程零基础的人，建议初步了解、学习 HTML、CSS、JavaScript，这对你搭建博客有很大帮助。有了一定前端基础后，修改博客主题更加方便，主题文档也能看懂。
- 学习资料
1.3.2 Markdown 语法
什么是 Markdown 语言？
Markdown 是一种 轻量级标记语言，创始人为约翰·格鲁伯 。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的 XHTML （或者 HTML ）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
详情请看： Markdown - 维基百科，自由的百科全书 (wikipedia.org)。
博客文章采用 MD 格式。下面介绍 Markdown 基本语法。由于我不想污染整篇文章的排版，所以我只给出相应的语法，不给出示例。且 Markdown 文章渲染出来的样式与使用的 CSS 样式文件有很大关系。给出示例，容易引起误导。
1、标题
# 一级标题
## 二级标题
### 三级标题
##### 四级标题
###### 五级标题
####### 六级标题
标题从一级到六级，N 个 # 对应 N 级标题。2、文字样式
2.1 加粗 **这是加粗文本**
2.2 倾斜 *这是倾斜文本*
2.3 删除线 ~~我被删除啦~~3、块引用
3.1 基本用法
> 大家好，我是镜湖月。
> 大家好，我是镜湖月。
3.2 嵌套
> 大家好，我是父级块引用。
>> 大家好，我是子级块引用。
不推荐使用。4、段落
在 Markdown 语法中， enter（硬换行）代表另起一段， shift+enter（软换行）代表在本段另起一行。如下：
这是一个自然段。
这也是一个自然。
这是软换行效果。
5、列表
5.1 无序列表
- 哈哈哈
- 哈哈哈
5.2 有序列表
1. 哈哈哈
2. 哈哈哈6、表格
| | | |
| ---- | ---- | ---- |
| | | |
| | | |
| | | |
----: 右对齐
:---- 左对齐
:----: 居中对齐7、代码
7.1 行内代码
`xxx`
eg：`jinghu-moon`
7.2 代码块
```代码语言
xxx
xxx
```//示例
#include<stdio.h>
int main()
{
printf("hello world\n");
printf("你好，镜湖月！\n");
return 0;
}8、超链接
[标题](网址)
示例：
[望月家](https://blog.seeyue.top/)9、图片
示例：
10、分隔线
三个短横线表示
---11、转义字符
可使用反斜杠 \ 来转义如下字符：
| 字符 | 中文名称 |
|---|---|
\ | 反斜杠 |
| `` ` | 反引号 |
* | 星号 |
_ | 下划线 |
{} | 花括号 |
[] | 方括号 |
() | 圆括号 |
# | 井号 |
+ | 加号 |
- | 短横线（减号） |
. | 点 |
! | 感叹号 |
| ` | ` |
12、待办事项
- [x] 待办事项一
- [ ] 待办事项二
- [ ] 待办事项三13、脚注
你好[^脚注1]
[^脚注1]: hello!以上为 Markdown 最基本使用方法。总的来说，很简单。
参考资料
1.4 常见博客框架
博客框架大致分为两种：动态博客与静态博客。两者最大的区别就是动态博客自带后端，可以随时登录后台写文章、发文章，很方便。而静态博客就必须在本地写作，再部署到远端上。
动态博客：WordPress、typecho、Halo；静态博客：Hexo、Hugo。
搭博客到底选什么框架？Hexo还是Hugo？Typecho还是Wordpress？ - bilibili ，可以看下。
1.4.1 动态博客
介绍：一个功能强大且易用的博客框架和内容管理系统，适合个人博客、小型企业网站和中小型电子商务网站等。
特点：功能强大，插件丰富，主题多，你需要的功能，它都有。当然由于功能过于繁多，与另外两个动态博客框架相比，显得有些臃肿。需要用户具备一定的网站优化能力。需要购买服务器。
教程：WordPress教程66集（全） 新手零基础建站看这套视频就够了，适合外贸网站 企业官网 个人博客 电商独立站搭建 - bilibili
- 介绍：一个简单、轻量级的博客系统，适合个人博客和小型网站使用。由国人开发。文档详细。
- 特点：超低的 CPU 和内存使用率。主题多，插件不多，但满足使用需求。如果想要搭建动态博客，推荐使用。对于服务器的要求很低。
- 教程：腾讯云轻量应用服务器搭建 Typecho 网站
- 介绍：强大易用的开源建站工具，配合上丰富的模板与插件，帮助你构建你心中的理想站点。由国人开发。文档详细。
- 特点：初始界面耐看，操作简单，适合小白。对于服务器的要求较高。目前不支持市面上的云虚拟主机，需要使用云服务器或者 VPS。
- 教程：Halo博客搭建 - bilibili
总结：学生用户不推荐搭建动态博客。无法确定搭建博客是不是一时兴起。购买服务器就有点浪费了。如果手里就有闲置的服务器或者不差钱，直接搭建动态博客，自带后端，用起来方便得多。
1.4.2 静态博客
- 介绍：快速、简洁且高效的博客框架。基于 Node.js，易于安装和使用，拥有丰富的主题和插件生态系统。
- 特点：主题超级多，插件多。比较热门的几个主题都有中文文档。配置起来很方便。网上的搭建教程也很多。无后端，只能在本地写文章，再部署到 GitHub 上。无评论系统。
- 教程：【Hexo】2023年零基础玩转Hexo全网最全系列 -bilibili
- 介绍：世界上最快的网站构建框架。使用 Go 语言开发，速度快，内置模板和功能丰富。
- 特点：可以快速渲染几百篇 Markdown 文章，而 Hexo 则可能会话费较长时间。部署比 Hexo 麻烦一点。无后端，只能在本地写文章，再部署到 GitHub 上。无评论系统。国内使用人少，遇到问题，不好解决。
- 教程：【实用】基于 Github Pages 的 hugo 博客搭建 - bilibili
1.4.3 其他框架
还有一些框架主要用于搭建文档网站，但拿来搭建博客，也不是不行。
- 介绍：由 Vite 和 Vue 驱动的静态站点生成器。简单、强大、快速。就是你想要的现代 SSG 框架！
- 特点：使用 Markdown 创建美观的文档站点，服务器即时启动，闪电般的热更新，还可使用基于 Vite 生态的插件。采用静态 HTML 实现快速的页面初次加载，使用客户端路由实现快速的页面切换导航。
- 教程：手把手教你使用vitepress搭建并部署一个自己的知识库（无需服务器）- bilibili
- 介绍：快速构建以内容为核心的最佳网站，使用 React 构建。
- 特点：使用 Markdown 创建文档，开箱即用的本地化，易于将文档翻译为多种语言。为用户提供所有版本的项目文档，支持 Algolia 文档搜索。
- 教程：静态网站生成器Docusaurus使用入门 - bilibili
- 介绍：Astro 是内容驱动型网站的 Web 框架。它为世界上速度最快的网站、客户端 Web 应用、动态 API 端点以及中间件提供支持。
- 特点：可以任意选择的 UI 框架来创建 Astro，同时加载速度快、具有良好 SEO。只需几行代码就能为你的项目添加新的功能和行为。**Astro 是一个集多功能于一体的 Web 框架。**它内置包含了你构建网站所需的一切。
- 教程：用 Astro 搭建一个高性能博客 - bilibili
以上三个框架都有详细的中文文档。
总结：对于初次接触搭建博客的同学来说，推荐使用 Hexo 搭建博客。简单易上手。等熟悉了，再考虑是否更换博客框架。
1.5 搜索与提问
1.5.1 提问
首先，我们要明白一个问题，我们在网上提出的问题，并不一定有人会回答。这时，你可能会生气，但这不能解决你的问题。为了提高问题被回答的几率，我建议你看看这篇文章：《提问的智慧》精读注解版 - 链滴 (ld246.com)，再去提问。如果觉得这篇文章太长的话，看这篇文章：《提问的智慧》思维导图 Xmind 版的 分享一下 - 链滴 (ld246.com)
1.5.2 搜索
维基百科镜像，内容有审核：万维百科 (wanweibaike.net)
现在国内主要的搜索引擎有百度、搜狗、必应等。百度目前是中文互联网上最大的搜索引擎，但它的表现不太行。用百度搜索，排在前面的很有可能是广告、盗版网站，一些转载了不知道多少次的文章。搜索效率较低。在国内，我推荐使用必应和百度一起使用。
个人感觉，谷歌对个人网站的收录优于百度。我搭建博客时，参照了不少谷歌上的教程。当然在中国大陆范围，谷歌是不能访问的。在大陆，可以使用谷歌镜像 Google (luciaz.me)，第一次访问需要回答问题，答案依次是心灵之约、水朝夕、csxy@123.com。
另附两篇文章：
但这是不够的。有时候学习、工作、娱乐需要访问一些国外的网站，却无法访问。就比如我常访问的 GitHub，时而打开时而打不开。这时候就需要「科学上网」，请自行解决。
互联网并非法外之地。发言得过脑子。
1.6 文章排版
以下为我个人意见。如果你觉得没有必要，请跳过。
1、中英文之间需要增加空格。
2、中文与数字之间需要增加空格。
3、英语专有词汇，按官方格式书写。例如：GitHub。
4、数字与单位之间需要增加空格。例如：20 TB。
5、行内代码与前后文字（包括符号）各空一格。
6、链接前后增加空格。
参考文章： 中文文案排版指北
推荐看下 ruanyf/document-style-guide: 中文技术文档的写作规范 。
1.7 版权意识
当你开始写博文的时候，难免会使用图片，引用他人的文章。此时你需要注意图片是否为无版权图片。引用文章采用的是什么许可协议。我认为，作为一名博主，需要具备一定的版权意识。下面我会简单介绍大多数博客文章采用的许可协议，同时分享一些无版权图片、字体、图标网站。
1.7.1 许可协议
参考链接：关于许可协议 - Creative Commons、知识共享许可协议_百度百科 (baidu.com)、知识共享许可协议 - 维基百科，自由的百科全书 (wikipedia.org)。
一般来说，你会在博客文章最后面看到这样一句话：
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 / CC BY-SA 4.0 协议 / CC BY 4.0 协议 ，转载请注明出处！
其中的字母代表什么意思，下面来解释。
1、CC 协议
全称为 Creative Commons license，译为知识共享许可协议，简称 CC 协议。是一种允许他人分发作品的公共版权许可。2002 年 12 月 16 日，美国非盈利性组织知识共享（Creative Commons）首次发布 CC 协议。
CC 4.0 版本于 2013 年 11 月 25 日发布。此后，CC 4.0 被鼓励在全球范围内适用。除了放弃版权将作品完全公布到公共领域（即 CC0 协议）之外，CC 4.0 版本中一共有 6 种常用的版权规定组合。
CC 协议主要用于书籍、戏剧、电影、音乐、文章、照片、博客、网站。
2、BY
英语：Attribution（归属），简称 BY。译为署名。
使用条件：您可以自由复制、散布、展示及演出本作品；您必须按照作者或授权人所指定的方式，保留其姓名标示。
3、SA
- 英语：ShareAlike（一模一样），简称 SA。译为相同方式共享。
- 使用条件：您可以自由复制、散布、展示及演出本作品；如果您改变、转变或改作本作品，仅在遵守与本著作相同的授权条款下，您才能散布由本作品产生的衍生作品。
4、NC
- 英语：Noncommercial（非商业性的），简称 NC。译为非商业性使用。
- 使用条件：您可以自由复制、散布、展示及演出本作品；您不得为商业目的而使用本作品。
5、ND
- 英语：No Derivative Works（没有衍生作品），简称 ND。译为禁止改作 / 禁止演绎
- 使用条件：您可以自由复制、散布、展示及演出本作品；您不得改变、转变或改作本作品。
以上四种条件组合共有 16 种可能。4 种组合是同时包括「ND」和「SA」的条件，相互排斥；还有 1 种没有包括任何条件（CC0 协议），因此有 5 个组合无效。11 种有效组合中，因为 98% 的特许人要求署名，5 种缺乏「BY」的条件不再使用。所以只有 6 种组合可以使用。
问题：如何选择适合自己的许可协议？
看图！
附上 6 种 CC 许可协议的链接。
- Creative Commons — 署名 4.0 国际 — CC BY 4.0
- Creative Commons — 署名-相同方式共享 4.0 国际 — CC BY-SA 4.0
- Creative Commons — 署名-非商业性使用 4.0 国际 — CC BY-NC 4.0
- Creative Commons — 署名-非商业性使用-相同方式共享 4.0 国际 — CC BY-NC-SA 4.0
- Creative Commons — 署名-禁止演绎 4.0 国际 — CC BY-ND 4.0
- Creative Commons — 署名-非商业性使用-禁止演绎 4.0 国际 — CC BY-NC-ND 4.0
我的选择： BY-NC-SA 4.0。
1.7.2 无版权图片
1、Unsplash
互联网上最大的免费分享图片的平台之一。强推！上面的图片都很好看。注意这是一个英文网站。搜索只能用英语。
国内镜像：Beautiful Free Images & Pictures | Unsplash (dogedoge.com)
2、pixabay
免费正版高清图片素材库。Pixabay 拥有超过 2.5百万 张优质图片和视频素材，让你轻松应对各种设计场景。支持中文搜索。
图片源自 Wallpaper Abyss - 高清壁纸, 桌面背景 (alphacoders.com) ，支持中文搜索。图片质量，我觉得还行。
上面三个是我主用的图库。如果觉得不够，看下面的链接。
1.7.3 图标库
目前国内最大的图标库，可编辑图标大小、颜色、方向，可生成 CSS/JS 在线链接引用。
注意：该素材仅供广大用户交流学习使用，未经 iconfont 或其关联公司书面授权许可，不得用于任何商业用途。
2400+ 基础图标，29 种图标分类。IconPark 图标库是一个通过技术驱动矢量图标样式的开源图标库。可以对图标进行较大的编辑。
3、Feather
简单漂亮的开源图标，可调节图标大小、线条粗细。只有 287 个图标。点击图标，就下载。
免费且开源的图标，旨在使您的网站或应用具有吸引力、视觉一致性和简单美观。超过 4950 个完美的图标，用于网页设计。可作为 webfont 使用。
一套清爽的、15×15 大小的开源图标库，共有 333 个图标。只能复制图标 SVG 或者下载所有图标。
为设计师和开发者精心打造的开源中性风格系统符号。 所有图标均可免费用于个人和商业用途。共有 2580 个图标，不仅单独下载，还能将收集的所有图标下载为字体。
7、xicons - Icons for Vue & React
集成了多个开源图标库的 SVG Vue/React 组件，图标样式修改通过代码实现。点击图标，就下载。
8、Ionicons
高品质设计的图标，可用于Web、iOS、Android和桌面应用。支持SVG格式。完全开源。可复制 SVG 格式或者作为 webfont 使用。
谷歌出品的图标库，整合了超过 3237 个字形在一个字体文件中，提供广泛的设计变体。支持 SVG 或 PNG 格式下载。
Material 图标指南 | Google Fonts | Google for Developers
10、Lucide
Lucide 是一个开源图标库，提供 1000 多个矢量 (生SVG) 文件，美丽且一致的图标，支持 SVG 或 PNG 格式下载。
一套经过精心设计且完全开源的图标库，共 8000 余个图标，支持 SVG 或 PNG 格式下载。PNG 格式可调整图标大小、边距、方向。
12、Line icons
庞大的图标库，包含超过 8400 个专业设计的 SVG 图标，分为免费和付费图标。具有线条和填充两种样式。支持 PNG 格式下载，可作为 webfont 使用。
13、BlendIcons
免费且顶级的图标库，以有趣、简单和快速的方式为您的项目找到免费图标，图标有 7 种风格可选，支持 SVG 或 PNG 格式下载。
13、SVGPORN
国外知名公司的 logo，支持 SVG 格式下载。
国内外知名公司的 logo，支持 SVG 格式下载。完全免费无限制。
16、Yesicon
精选全球高品质、开源、免费的矢量图标库集合。
总结：iconfont、Tabler Icons、Remix Icon、Material Symbols & Icons 我比较推荐。
1.7.4 可商用字体
免费商用中文字体下载网站
猫啃网，最新最全的可免费商用中文字体下载网站！喵啃~ (maoken.com)
1、霞鹜文楷
一款楷体字体，很不错。 lxgw/LxgwWenKai: 一款基于 FONTWORKS 出品字体 Klee One 改造的开源中文字体 ，猫啃网下载链接： 霞鹜文楷 - 猫啃网 。
2、思源宋体、思源黑体
思源宋体 (github.com) 、 思源黑体 (github.com)
GitHub 可能会下载失败，推荐这个网站： 字体天下 - 提供字体免费下载和在线预览 。
3、鸿蒙黑体
我很喜欢它的数字样式，下载地址： 字体-视觉风格-通用设计基础-HarmonyOS应用开发。
4、MiSans
超大字库，下载地址： MiSans。