前言
男人的梦想，除了太空之中控制巨大的人形机械对着外星的异形挥舞巨大的冷兵器以外，就是建立一个属于自己的家。
啊，我说的是网站。
这个笔记系列记录了基于Hexo搭建一个属于自己的Blog流程，在经历了知识鸿沟压制过后的我会尽量将这个流程说的简单易懂，并且加上每一个步骤的原理解释，以免此流程变成了一个用于炫技的装逼文章。
虽然我的编译环境为 MacOS ，但我会尽量写上更加通俗易懂的步骤原理，这样即使你是 Windows 或者其他乱七八糟的环境也依然能够跟着流程想明白自己应该遵从的步骤。
适当百度也会帮助记忆这个搭建流程
首先感谢Kuuhaku对本文debug与测试，这里面提到的几乎所有易错点都是他发现的我也没想到居然会有人踩这么多坑
では、ゲームを始めましょう
基本理论 Basic Theory
本地仓库，云端仓库，域名，云服务器是在搭建网站当中必备的4个项目。
打一个比较简陋的比方：你要给心上人寄送一个
域名
域名和随机生成的取货码还是有一定的区别，它可能更像是门牌号。找到这个门牌号后，就能在这个门里面找到所有归属于这个门牌号主人的资源。
域名和网址有一定的区别，我们从网址(URL)的构成说明，这样比较便于理解其他三个概念。
本界面最开始的链接地址如下：
https://lyrikp.art/categories/note/从零开始建站.html
- https : 传输协议为HTTPS，目前大多数网站都会使用HTTPS协议，虽然用HTTP也是可以访问网站的，但很可能会被浏览器提示不安全链接
- lyrikp.art : 域名本身，与云服务器挂载，通过在这行名称可以访问某个云服务器，而你的网站资源会存储在这个服务器当中，相当于一个通用识别名称
- categories/note/ : 文件索引地址，Windows系统中相当常见的格式，意义也是一样的
- 从零开始建站.html : 访问网站页面就相当于访问了地址中的html文件，不过一般来说，.html这个后缀名不会被显示出来
现在网址的构成就已经很明晰了，它实际上就是一个上传到云端服务器的你的
D:/日语学习资料/三上悠亚/与小动物在野外嬉戏.mp4
本地仓库
Hexo是一个静态网站架构模板，它没有后台，所有的页面资源会被渲染成为一个 .html 网页文件以供大家浏览。
因此，Hexo需要生成一个本地仓库，云端仓库实际上是这个仓库的复制体，我们只需要在本地仓库中进行编辑后上传，而不需要在意渲染与具体分发的细节。
而Hexo的本地仓库中的文件夹都具有相当重要的意义，如文章存储在 /source/_post/当中，而插件存储在 /node_modules/ 中。修改这些就可以影响最终网页呈现的样子。具体文件夹的作用细节会在后面的章节描述。
云端仓库与云服务器
本地仓库的文件会被我们用命令行上传到云端仓库，而云服务器会调用云端仓库的内容，展示给每一个访问了与该云服务器挂载的域名的用户。
云服务器一般会和云端仓库配套，就像物流系统一定会有一个货物集散地一样，他们也和物流系统一样是智能且透明的，我们不需要理解其是如何进行分发和调用的，它们会帮助我们自动完成。
我想你一定理解“透明”是什么意思。
很多知名的互联网公司会提供这样的服务，像是阿里云、腾讯云、华为云等等，它们的服务更稳定、更安全，配置更复杂，也绝对不是免费的。
而github 给初学者们提供了免费快餐，我们可以使用他家的 github pages 服务而不必考虑需要开销与审核的域名及云服务器从而节省一大笔时间在搭建网站摸鱼的时候刷刷bilibili。
故此， 本地仓库 + github云端仓库 + github pages 是推荐大家初次尝试搭建以及预览效果使用的免费方法，在确定了自建博客和网页的乐趣之后再购买域名租用腾讯云阿里云等国内服务器也不迟嘛。
github在国内存在dns污染，域名为 [xxx.github.io] 的页面可能需要玄学或者魔法访问，所以建议大家首先准备一个vpn，以免搭建好了之后却无法访问自己的网站
hexo提供了本地预览方式，可以不经过网络随时查看效果，即便没有vpn也不影响搭建流程
环境配置 Environment Setting
需要准备&下载的东西
安装 Git - 分布式版本控制系统
在Github新建一个仓库 - “云端仓库”
安装 node.js - 服务器端的脚本解释器
安装 Hexo
安装Git
Git是世界上最先进的分布式版本控制系统，简单来说，Git用于记录一个仓库的“历史状态”，并提供版本对比和回溯功能。
我们通过Git来配置github仓库和进行网站迭代更新的管理。
安装Git的方法十分简单，去百度点这里，从官网上根据系统版本进行安装就好啦
最好不要更改默认设置位置，以免在系统调用的时候会出现各种神奇的问题
对了，虽然在搭建的时候并不需要了解git，这里有一篇关于git的笔记可以参考，遇到问题的时候再看吧。
Github建立仓库
根据理论学习，我们这一步是在搭建云端仓库。
会使用github的同学可以跳过阅读这个步骤，直接新建一个名称为 github用户名.github.io 的仓库即可
Github相关流程
注册 → 建立仓库 → 配置SSH keys → done！
先注册Github
Github官网，不会有人连注册都不会吧不会吧不会吧
qq邮箱有概率注册失败，所以建议准备一个另外的邮箱备用。
我们跳过github前期所有的新手引导，直接进入到建立仓库。
建立仓库
进入主页
单击处于右上角的头像，在下拉的菜单栏里面选择Your repositories进入到仓库
新建一个仓库
仓库命名
这里的仓库也是通过github pages产生的云服务器自带的域名
网站名称需要与github名称保持一致，格式为 [github名称].github.io
配置 SSH keys
`SSH keys` 是什么？
简单来说，github的服务器主机是家，你的本地主机想要进入远端的服务器主机，需要一把钥匙来开门
SSH 是这个门锁，而这个钥匙就是 SSH keys
我们需要Secure Shell(SSH)协议来允许两台电脑（服务器和本地）进行安全的链接进行数据交换，它是一个网络协议，用来保证数据的保密性和完整性
我们需要配置 SSH keys 来保证本机电脑和github服务器的连接
打开终端/cmd
git config --global user.name "你的GitHub用户名"
git config --global user.mail "你的GitHub注册邮箱"
ssh-keygen -t rsa -C "你的Github注册邮箱"
然后回车几次到配置完成
回车中会出现几行英文，大致意思是要输入加密串，这个东西可以不用配置，也不建议初学者配置
这个操作生成了 .ssh / id_rsa.pub 文件，我们需要其中的内容来配置链接github
这个文件通常是默认被隐藏的，除了显示隐藏文件的方法，还有以下方法可以打开它
# 终端/cmd
cd .ssh/ # 将操作空间移到.ssh/这个文件夹中
open . # 打开当前的操作空间
code id_rsa.pub # 使用VScode打开了这个文件
# 当然，code这个命令是在VScode配置过的，如果你使用的是atom，那么把code改成atom就成
# 也可以找到这个文件，把它拖进文本编辑器
复制其中的所有内容，以上步骤获取了本机的 SSHkeys ，接下来我们将它与github相连
github主页点击头像进入 settings - 进入左边侧栏中 SSH and GPG keys 分页 - 点击绿色New SSH key按钮，新建一个SSH key
将刚刚复制的东西粘贴进 Key 栏，title 随便填写，自己认得就好。之后点击 Add SSH key
养成好习惯，顺手运行一下代码检测是否配置完成
# 终端/cmd, 刚才的地址之下
ssh -T git@GitHub.com
认得英文就好啦
安装 node.js
node.js 是一个 JavaScript 运行环境，网站有它才能够成功编译
如果你是 `Windows` 系统
Node.js官网 下载安装环境，简单粗暴，节省头发
想要学习熟悉一下指令集相关的操作，增加对 cmd 的理解的同学，也可以根据下面的步骤手动配置
如果你是 `MacOS` 系统
使用官网安装包后很可能会出现npm权限不足的报错，这时候最好通过下述nvm的方式再次安装一遍
node.js 这边会涉及到很多很多很多坑，包括也不限于 npm nvm 等等关于权限与网络情况的报错，所以请详细阅读步骤
① 安装nvm
Windows用安装包安装
点击nvm-win-github下载安装，安装在默认路径
MacOS用命令行安装
使用curl进行安装，curl预装在 MacOS 当中，若没有，则在curl官网下载
curl -o- https://raw.githubsercontent.com/nvm-sh/nvm/v0.34.0/install.sh安装完成后习惯性确认安装
command -v nvm
② 用 nvm 安装 node.js
nvm install node
安装完成后习惯性确认安装
node -v # 检查node的版本
到了这一步，我们完成了 node.js 的安装，并且拥有了 npm 这个下载器
该问题多发于windows系统当中
如果安装路径中出现空格，可能会导致 cmd 不识别路径
此时在nvm文件夹下查找 setting.txt 文本文件，查看第一行 root 中的路径
类似 C:/Program Files 更改为 C:/Progra~1 其余不变
安装Hexo
使用 npm 命令来安装 Hexo
npm install -g hexo-cli
安装完成后习惯性确认安装
hexo v # 检查Hexo版本
npm安装速度慢的解决方法
npm 进行安装时通常调用的是国外的安装地址，经常会出现超时错误，一般建议采用国内镜像配置，这个配置源通常称之为淘宝源
npm config set registry https://registry.npm.taobao.org检查配置成功
npm config get registrynpm info express恢复初始源的方法
如果淘宝源出现问题，恢复原始配置的方法
npm config set registry https://registry.npmjs.org这些代码的意思很好理解，看英文就懂啦
结束语
至此，使用Hexo搭建Blog的所有前期准备已经完成，你现在应该完成了如下操作：
明白网站URL的组成
在 github 有了一个用于建站的仓库，并适配了它和自己计算机的 SSH keys
配置了 node.js 环境
安装好了 Hexo
Hexo的官方网站在这里，如果以上有什么不太明白的，可以直接在官网上找手册看。不过不一定比我写的详细
好啦，接下来就是使用 Hexo 初始化自己的本地仓库并和云端链接的步骤了。在这下一步完成之后，我们就能预览发布的第一篇文章啦。
移步到下一章
评论