Mac部署Hexo详细教程

参考：

1. Mac系统中的根目录和home目录分别指什么，他们有关系？
2. Downloading and installing Node.js and npm
3. mac环境下搭建hexo+github pages+next个人博客
4. hexo中文文档
5. Node Version Manager - Simple bash script to manage multiple active node.js versions
6. Repository为啥叫做仓库
7. Node.js npm详解

背景：
部署Hexo，合计花费了4个早上和晚上，总是报错，该踩的坑，不该踩的坑都踩了。故写一个总结，反思复盘，同时也希望能帮助到其他同学。
当然，这个「同学」是指和我一样的编程小白同学，就是没啥编程基础，但是也想有Hexo的同学。所以，我会非常详细地讲解每个步骤。

编译环境：
MacBook Air

本教程一共分为4个步骤：

1. Github仓库建站
2. Node.js安装
3. Hexo安装
4. Hexo主题

1. Github仓库建站

1.1 仓库建站

进入你的github

点击红色方框区域，进入仓库

点击红色方框区域，开始新建你的仓库

因为我们要建网站，所以我们的「Repository name」应该和我们的github名字保持一致，什么意思呢？
如上图，我的「Repository name」是kerryli1007.github.io 其中kerryli1007是我的github账户，如果你的账号叫做zhangshan，那么在这里，你需要填写的是zhagnshan.github.io。同时，因为我自己的网站已经搭建好了，所以出现了下面的警告⚠️，不用在意。

1.2 配置SSH keys

接着需要SSH keys。打开mac终端，输入命令

$ cd ~/.ssh #检查本机的ssh秘钥

如果提示 No such file or directory说明你是第一次使用 git。

接下来生成新的SSH keys:

$ ssh-keygen -t rsa -C "你的邮箱地址"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>
Enter passphrase (empty for no passphrase):<输入加密串><如不想设置密码可直接回车表示为空>
Enter same passphrase again:<再次输入加密串><接着回车确认>
Your identification has been saved in /Users/你的名字/.ssh/id_rsa).
Your public key has been saved in /Users/你的名字/.ssh/id_rsa.pub.
The key fingerprint is:
43:c5:5b:5f:b1:f1:50:43:ad:20:a6:92:6a:1f:9a:3a "你的邮箱地址"

最后出现类似长方形的字符画即表示成功。

此处可能会遇到几个问题：

• 无法看到.ssh 文件

解决方法：显示隐藏文件即可。

如果你要设置密码，那么输入密码时是不会有*字样，直接输入即可。
接下来，将SSH key添加进GitHub。

打开本地刚生成的.ssh/id_rsa.pub（若看不到，则需显示隐藏文件）,准确复制文件中所有内容。然后进入github主页，点击右上角头像进入settings，选择SSH and GPG keys，再点击New SSH Key。将内容复制进key，title可以为空。最后Add SSH key。

可以通过如下命令进行测试是否成功

$ ssh -T git@GitHub.com #全部复制，无需更改

接下来出现：

The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?<输入yes>
Hi 你的用户名! You've successfully authenticated, but GitHub does not provide shell access.

若出现以上提示，则说明添加SSH key成功。

接下来测试github pages是否创建成功。输入以下命令：

$ ssh -T git@GitHub.com #全部复制，无需更改

接下来会出现

The authenticity of host 'GitHub.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?<输入yes>
Hi kerryli1007! You've successfully authenticated, but GitHub does not provide shell access.

如果出现上述提示，则说明SSH Key成功啦(≧▽≦)/。

接下来测试github pages是否创建成功。输入以下命令：

echo "# 你的用户名.github.io" >> README.md
git init    
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -u origin master

之后在浏览器中输入 【你的名字】.github.io ，如果成功出现页面，并且页面上是你刚输入的地址，那么github pages配置成功。

2. Node安装

进入第二步啦，我们要安装Node啦。

1. 什么是Node.js
2. 我们为什么需要安装Node.js
3. 怎么安装Node.js
4. 错误的安装
5. 正确的安装

2.1 什么是Node.js

node.js是一个基于 Chrome V8 引擎的 JavaScript 运行时的环境。node.js是一个基于Chrome JavaScript运行时建立的平台。

2.1.1 Node.js 的组成

• ECMAScript（语言基础，如：语法、数据类型结构以及一些内置对象）
• OS（操作系统）
• file（文件系统）
• net（网络系统）
• database（数据库）

注意：

• ECMAScript （是js的标准，js是它的具体实现和扩展，他描述语言的语法和基本对象，如：语法、运算符、语句、继承机制、数据结构以及一些内置对象）
• DOM（文档对象模型，描述处理网页内容的方法和接口，将整个文档document解析成dom树供用户使用js对文档进行处理）。
• BOM（浏览器对象模型，描述可以和浏览器窗口交互的方法和接口「对象结构」，如：window对象，history，location，navigator等）

2.2 我们为什么要安装Node.js

？？？？？？

2.3 怎么安装Node.js

⚠️需要注意的是，在我们安装node.js的时候，也需要同时安装npm。而这是最容易出问题的地方。

2.3.1 什么是npm

npm的全称node package manager，是一个node包的管理工具。

npm（Node Package Manager）是Node.js下的主流套件管理程式。它在Node.js v0.6.x版本之后，内建于Node系统。通过npm可以协助开发者安装、卸载、删除、更新Node.js套件。

因此安装Node.js的时候最好一起也安装npm!

接下来，重点来了，我会详细阐述我是如何安装错误的血泪史，TAT。

2.4 错误的Node.js 和npm安装方式

1. 很多教程，都建议，直接到Node官网直接下载pkg安装，这样的安装确实非常方便，但是，会出现非常大的问题。
2. 出现的问题是，在后面，我们使用npm来安装hexo ,当我们输入下述命令

~ $ npm install -g hexo-cli

会报错啊，报错！！如下图?

这个报错是什么意思呢？
就是说，我没有权限将hexo写入 .npm-global里面，我尝试了sudo各种权限，都不行TAT。不得不说，网络上一些教程真的害人~~

于是，我只有求助于npm的官网教程，我就哭了，人家官网说得很清楚，不建议用installer安装，为啥还有教程教人用installer安装，官网教程

所以，接下来，我就将已经安装好的node和npm 一同卸载掉了~TAT。

2.5 正确的Node.js 和npm安装方式

！！！重点：使用一个node version manager来安装 Node.js和npm。

到这里，就比较稳定了~

我们来看看教程是怎么写的(^__) 嘻嘻……

第一步：安装nvm和确认是否成功

~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

然后，输入代码

~$ command -v nvm

会出现nvm。

如果没有，那么请关掉terminal，然后重启一下~

第二步：用nvm安装node

~$ nvm install node # "node" is an alias for the latest version

很简单吧，接着我们终于可以开始安装Hexo了。

3. Hexo安装

输入代码

~$ npm install -g hexo-cli

接着

~$ hexo init blog

如果出现INFO Install dependencies 不用管，因为，就我的安装来看，这些提示没啥作用~

接着输入代码

~ $ cd blog
~ $ npm istall

可以忽略WARN，我就没有管orz
安装完成后，我们的blog文件夹里面，有这些内容，如下图。

介绍一下比较重要的文件

• _config.yml
  网站的配置文件，可以在此配置大部分参数
• source
  资源文件夹是存放用户资源的地方。除 posts 文件夹之外，开头命名为 (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
• themes
  主题文件夹，后面我们使用的next主题即会存放在此。
• _posts
  存储你发表在博客上的文章，当Hexo 初始化一个站点时，里面会有一篇默认的博文。

最后，打开你的个人网站吧，这个时候他是这样的，很丑，其实~是这么个主题，忽略test和朋友圈的技术数据结构如何设计文章，那是我后面加的。

4. Hexo主题

先看下我安装之后的效果吧~

具体方式，参考我的另一篇文章
https://blog.csdn.net/weixin_41160054/article/details/89473887

---

总结~

1. 纸上得来终觉浅，绝知此事要躬行
2. 多用搜索工具，多参考官网文档
3. 多反思，总结