使用Hexo和GitHub搭建个人博客（2021新版）

本文最后更新于：4 months ago

首先感谢您能够读这篇文章，这是我在自己的博客空间里的第一篇博客。随着计算机与互联网的发展，能够用来展示自己的平台越来越多了，包括bilibili、抖音、Github、博客、简书等。我的博客是基于Hexo和Github搭建的，在搭建过程中，遇到了很多问题，参考了许多资料，所以我决定综合TRHX的博客文章：使用 Github Pages 和 Hexo 搭建自己的独立博客、@tommy351的B站视频：【2021最新版】保姆级Hexo+github搭建个人博客、吴润的知乎文章：GitHub+Hexo 搭建个人网站详细教程、我自己的经历和师妹的建议写一篇Hexo博客搭建指南。那写这篇博客的目的是为了所有想搭建自己博客的人都可以搭建出自己的博客，包括计算机小白们，所以，为了确保uu们在搭建自己的博客时不被困难绊住并坚持下来，我将采用 5W1H分析法和阶段性成果激励法来引导本次搭建流程。话不多说，我们开始吧！

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写的很详细。
  1. 检验软件是否安装成功
    按Win+R打开运行窗口，输入cmd，然后输入以下命令：
    1
    2
    3
    $ 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命令即可安装。

1
$ npm install hexo-cli -g

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

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

1
$ hexo init

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

图2-1 Hexo文件目录

2.3 查看效果

执行命令

1
2
$ hexo generate
$ hexo server

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

1
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安装情况

  1. 继续输入命令：

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

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

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

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

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

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

    1
    2
    3
    4
    5
    6
    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复制。
  • 第二种，运行以下命令，将公钥的内容复制到系统粘贴板上：
    1
    $ 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不要做任何更改！

    1
    $ ssh -T git@github.com

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

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

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

    1
    2
    $ 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 仓库地址查询方法

  1. 打开之前创建的Hexo文件夹（如：D:\Amber_Blog\Hexo），点击鼠标右键用记事本（或者Notepad++、Vs Code等）打开该文件夹下的 _config.yml 文件，将该文件最底部的deploy关键字代码：
    1
    2
    deploy:
      type:
    修改为（注意：所有英文冒号后面都有一个空格, repository后面的是第2步获取到的仓库地址）
    1
    2
    3
    4
    deploy:
      type: git
      repository: https://github.com/xxx/xxx.github.io.git
      branch: main
  2. 安装hexo-deployer-git自动部署发布工具，即将hexo 部署到 git page 的 deployer，操作为：打开最开始新建的文件夹：D:\Amber_Blog，在文件夹中单击鼠标右键找到并打开Git Bash，输入命令：
    1
    $ npm install hexo-deployer-git --save
  3. 在 Hexo 文件夹下分别执行以下命令:
    1
    2
    $ hexo g
    $ hexo d
    hexo g用来生成Hexo页面，hexo d是使用hexo-deployer-git将页面部署到Github仓库中。

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

图4-2 错误情况

  1. 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输入到之前那个填写密码的提示框中，文件就会被全部上传到仓库中了。

  1. 通过网址查看博客：你的网址为：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 ↩