1.准备阶段

1.1 了解Hexo和Github Pages

最开始，我们可能都会产生几个疑问，也就是5W，什么是Hexo和Github Pages？为什么要用Hexo和Github这两个呢？谁来搭建博客？何地搭建？何时搭建？只有解决了这些困惑，流程才能顺利地进行下去，那么就先来解答一下。

1. 第一个问题，什么是Hexo和Github Pages？
   Hexo是一款基于Node.js的静态博客框架^[1]，依赖少，易于安装使用，使用 Markdown（或其他渲染引擎）解析文章。Github Pages可以被认为是用户编写的、托管在github上的静态网页^[2]。
2. 第二个问题，为什么要用Hexo和Github这两个呢？
   因为Hexo仅仅是一个现成的博客框架，搭建完成后只能在本地看到，如果想在网络中搜索到我们的博客空间，就必须借助服务器，来把我们的博客发布到网络上，服务器有很多种，如阿里云等。而Hexo可以生成静态网页托管在GitHub和Heroku上，此时的Github Pages就起到了免费服务器的作用，所以我们选用了Github作为服务器。
3. 第三个问题，谁来搭建博客？
   谁都能为你搭建博客，但自己的博客如果不自己搭建，用起来可能会多少差点意思。当然，如果自己从头到尾搭建下来，会收获满满的成就感，也能在这个过程中学到点什么。
4. 第四个问题，何地搭建，即为在哪里搭建？
   我建议最好是在自己的笔记本电脑上搭建，因为笔记本电脑可以随身携带，这样有什么感悟想写在博客里的，可以随时下笔。
5. 第五个问题，何时搭建？
   俗话说得好：最好的时间是十年前，其次是现在。心动不如行动。
6. 以下的全部内容就是【第六个问题：如何搭建】的答案了~

知道了本次行动的目的，接下来就是决战的时刻了！

1.2 安装Node.js和Git

1. 安装Node.js
   Hexo是基于Node.js的博客框架，所以我们需要先在官网根据自己的系统下载一个Node.js进行安装。对于Node.js的安装大家可能也会产生5W1H的疑问，这些疑问在周瑜周的文章：Node.js安装及环境配置之Windows篇中都会有解答，这篇文章真的超级详细，解释也非常清楚，可以按需自取。
2. 安装Git

• 5W1H之什么是Git？
  答案在Pro Git（中文版）中。
• 5W1H之为什么要安装Git？
  因为我们要将Hexo推到Github中，那应该怎么推呢？这时就要借助Git，简单来说，Git是我们用来将Hexo静态博客推到Github上的工具。
• 5W1H之谁安装Git，何时何地安装Git以及如何安装Git？
  谁搭建博客谁就需要安装Git，准备阶段时就要安装Git以便后续使用，如何安装Git也在俊雨廷休的文章：如何在windows下安装GIT写的很详细。

3. 检验软件是否安装成功
   按Win+R打开运行窗口，输入cmd，然后输入以下命令：

$ git --version
$ node -v
$ npm -v

有相应版本信息说明安装成功，若不正确可以卸载软件重新安装，此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 Git GUI Here（Git图形化操作） 和 Git Bash Here（Git命令行）两个选项。

此时，你已经拥有了能与Hexo决战的Git和Node.js这两大武器，它们也可以用于软件开发工作，如前端等。

2.第一步：本地搭建Hexo

准备工作结束后，终于可以开始搭建我们的博客了，这一步结束后就可以看到你的博客在电脑本地展示的样子啦~

2.1 Hexo安装

选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：我的文件夹为：D:\Amber_Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入用来安装Hexo的npm命令即可安装。

$ npm install hexo-cli -g

2.2 Hexo初始化配置（此过程时间较长，请耐心等待）

在刚才新建的文件夹里面再次新建一个Hexo文件夹（如：我的文件夹为：D:\Amber_Blog\Hexo），进入Hexo文件夹右键鼠标，点击 Git Bash Here，输入以下命令。

$ hexo init

Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo文件夹下的目录如图2-1所示：

图2-1 Hexo文件目录

2.3 查看效果

执行命令

$ hexo generate
$ hexo server

显示以下信息说明操作成功：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此时，即可登录 http://localhost:4000/ 查看效果，按Ctrl+C终止本地服务器。

到这里为止，我们在Node.js和Git的帮助下完成了博客的本地搭建工作，接下来的任务就是将本地的Hexo放到Github中。我的勇士们，看到自己搭建好的博客，是不是有了一丝成就感呢，那就一鼓作气继续干下去吧！

3.第二步：搭建仓库

3.1 注册Github账号（已有账号可省略）

在Github官网中注册账号，如果加载慢有可能是网络问题，多刷几次就好。
台湾@tommy351的视频中给我们提供了一个非常新非常详细的Github账号注册教程，是B站up主HelloWord修炼者-令狐的文章：Github注册+登录方法，这个教程也可以很好地解答Github安装5W1H的疑问。这里需要注意的是，注册用户名、注册邮箱和注册密码都很重要，一定要记住。

此时，原本没有GitHub账号的你也算是程序员的入门人了。

3.2 创建仓库

使用Github的仓库作为Hexo博客的服务器，将Hexo的所有内容都装在仓库里，让所有人都能够通过Github来访问。点击New repository开始创建，步骤及注意事项见图3-1：

图3-1 步骤及注意事项

再次强调：如果这个用来存放Hexo文件的仓库想要在网页上被大家看到，仓库名就一定要采用“Github用户名.github.io”的形式。

3.3 生成SSH Keys

需要使用SSH将GitHub与本地进行绑定，配置好SSH密钥后，我们便可以通过git操作实现本地代码库与Github代码库同步。操作如下：

1. 在第一次新建的文件夹里面（如：我的文件夹为：D:\Amber_Blog）点击鼠标右键，找到 Git Bash Here 输入命令：

$ ssh
//这一步的目的是检验是否安装过SSH，其实在装git的时候就已经默认安装了。

使用前检查一遍，这样就确保万无一失了，结果如图3-2所示：

图3-2 SSH安装情况

2. 继续输入命令：

$ ssh-keygen -t rsa -C "your email@example.com"
//引号里面填写你的注册时的邮箱地址，比如xxxxxxxx@163.com

【第一次回车】之后会出现：

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):
//到这里可以直接回车将密钥按默认文件进行存储

【第二次回车】然后会出现：

Enter passphrase (empty for no passphrase):
//这里是要你输入密码，其实不需要输什么密码，直接回车就行
Enter same passphrase again:
//再回车

【第三次回车、第四次回车】接下来屏幕会显示：

Your identification has been saved in /c/Users/you/.ssh/id_rsa.
Your public key has been saved in /c/Users/you/.ssh/id_rsa.pub.
The key fingerprint is:
//这里是各种字母数字组成的字符串，结尾是你的邮箱
The key's randomart image is:
//这里也是各种字母数字符号组成的字符串

四次回车后，我们的SSH keys就已经生成了，存在C:/Users/自己电脑的用户名（如未新建，默认是Administrator）/.ssh/id_rsa.pub文件中。

2. 获取SSH Keys，有两种方式：

• 第一种，找到点击鼠标右键用记事本打开，使用Ctrl+A将内容全选，Ctrl+C复制。
• 第二种，运行以下命令，将公钥的内容复制到系统粘贴板上：

$ clip < ~/.ssh/id_rsa.pub

这时，你获得到了本地与Github连接的公钥，运输Hexo到Github的神秘通道即将打开！

3.4 在GitHub账户中添加你的公钥

1. 登陆GitHub，进入Settings：

图3-3 Settings位置

2. 点击 SSH and GPG Keys：

图3-4 SSH and GPG Keys位置

3. 选择 New SSH key：

图3-5 New SSH key

4. 添加SSH keys步骤如图3-6所示：

图3-6 添加SSH keys步骤

5. 测试SSH是否绑定成功
   输入以下命令：注意：git@github.com不要做任何更改！

$ ssh -T git@github.com

回车，再次输入yes后回车，就会显示：

Hi AmberYu2218! You've successfully authenticated, but GitHub does not provide shell access.

6. 配置Git个人信息
   Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成自己的，名字可以不是GitHub的昵称，但为了方便记忆，建议与GitHub一致。

$ git config --global user.name "此处填你的用户名"
$ git config --global user.email "此处填你的邮箱"

到此为止，SSH就在GitHub上绑定成功了，本地与Github成功连接。接下来就是最后一步了，勇士，坚持下去！

4.第三步：Hexo发布

这一步结束后就可以看到你的博客在网页中展示的样子啦~

4.1 将Hexo部署到Github Pages中

1. 登录 Github 打开自己的项目 yourname.github.io
2. 复制仓库的地址，仓库地址查询方法如图4-1所示：

图4-1 仓库地址查询方法

3. 打开之前创建的Hexo文件夹（如：D:\Amber_Blog\Hexo），点击鼠标右键用记事本（或者Notepad++、Vs Code等）打开该文件夹下的 _config.yml 文件，将该文件最底部的deploy关键字代码：

deploy:
  type: 

修改为（注意：所有英文冒号后面都有一个空格, repository后面的是第2步获取到的仓库地址）

deploy:
  type: git
  repository: https://github.com/xxx/xxx.github.io.git
  branch: main

4. 安装hexo-deployer-git自动部署发布工具，即将hexo 部署到 git page 的 deployer，操作为：打开最开始新建的文件夹：D:\Amber_Blog，在文件夹中单击鼠标右键找到并打开Git Bash，输入命令：

$ npm install hexo-deployer-git --save

5. 在 Hexo 文件夹下分别执行以下命令:

$ hexo g
$ hexo d

hexo g用来生成Hexo页面，hexo d是使用hexo-deployer-git将页面部署到Github仓库中。

注意：如果hexo d后出现如图4-2所示错误，不用慌张，这是因为网络的问题，Github是国外的网，国内连接不稳定的情况时有发生，可以刷新网络重新hexo d。

图4-2 错误情况

6. hexo d之后会先弹出来填写用户名提示框如图4-3所示，这里需要输入Github的用户名：

图4-3 填写用户名提示框

英雄，只差临门一脚，胜利就在眼前！

4.2 令牌代替密码

1. 重点来了！！！输用户名完毕之后会再弹出一个填写密码的提示框，这个密码不是Github的密码，也不是SSH keys，而是Github更新之后的令牌，令牌需要自己设置，设置步骤如下^[3]：

• 找到新建token的地方，步骤如图4-4所示：找到Settings中的Developer settings(开发者设置)，其中有一个Personal access tokens，点进去就可以Generate new token了。

图4-4 找到新建token地方的步骤

• 生成令牌，设置如图4-5所示：

图4-5 令牌设置

点击Generate token后，会显示生成的一段代替密码的序列号，一键复制之后将它存在方便找到的地方，因为下一次使用令牌时这里的序列号将被隐藏。
将token输入到之前那个填写密码的提示框中，文件就会被全部上传到仓库中了。

2. 通过网址查看博客：你的网址为：https://Github用户名.github.io/ ，这个网址也可以在github中找到，步骤如图4-6、4-7、4-8所示：
   进入仓库，找到Settings：
   
   图4-6 Settings
   
   向下翻最后面有Github Pages，点击Check it out here：
   
   图4-7 Github Pages
   
   Github Pages如图4-8所示位置便是你的博客链接啦~
   
   图4-8 博客链接

功夫不负有心人，经过了一番搏斗，你的博客已经可以在网上被看到了。接下来就是如何写博客以及我们的博客个性化了，可以看另一篇文章。

5.结语

终于在师妹的“督促”下写完了这篇文章，想写一篇零基础搭建博客的文章，所以可能会有些唠叨，但总归是达成了我的初衷。

师妹日常在线催更

恭喜能够坚持下来的小伙伴们，俗话说：万事开头难，碰到新事物时，人们总会在不同程度上产生畏惧和抵触心理，有的人能够不断地克服这种心理，去突破一个又一个瓶颈，最终完成任务，而有的人会因困难而止步不前，这并不是说明“被挡住”的伙伴们脆弱、意志不坚定或者怎样，而是他们先前可能遇到的困难较少、较简单或本身心理承受能力较差一些，这些都是可以改善的，也希望通过这个过程让他们的习惯有所改变。

当你因为畏难心理迟迟不能动手时，首先问自己：不动手尝试怎么能知道有多难？其次再问：即使失败了能怎么样呢，那又能咋地？最后要记住：凡事都有解决办法，并在此基础上不断优化自己解决问题的办法，这样下次面对难题时就不会过于畏难而不愿意行动，即使下次不行，那么下下次也会好一些，这也是我写这篇文章的原因之一。

最后，本篇文章是结合了很多大佬的教程写出来的，会有重复，文中涉及参考资料如有侵权请联系我删除！因为还是学生，很想抓住能够成长的机会，所以文中如有错误还请大佬指出改正，晚辈会非常感谢！我是一名爱写作爱唠叨的程序媛，如想交流欢迎与我联系~
整理不易，转载请写明出处！！！

参考：

1. https://zhuanlan.zhihu.com/p/26625249 ↩

2. https://www.itrhx.com/2018/08/15/A02-hexo-blog/ ↩

3. https://www.bilibili.com/video/BV1mU4y1j72n?p=5 ↩