Hexo 框架 +Github 搭建免费静态博客教程（一）
前言
完全免费的搭建个人博客，没有任何收费，零基础小白也能上手，不需要编程基础，跟着操作来即可。
首先：
要了解一下我们搭建博客要用到的框架：Hexo 是高效的静态站点生成框架，它基于 Node.js。通过 Hexo，你可以直接使用 Markdown 语法来撰写博客。
相信很多小伙伴写工程都写过 README.md 文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到你的 github 上，然后别人就可以看到你的网页啦。是不是很简单？你无需关心网页源代码的具体细节，你只需要用心写好你的博客内容就行。
其次：
本教程从框架的构建、部署、关键页面的生成、在到优化，一条龙服务
本教程长期更，有什么问题下方留言，或者联系我，我及时修改
最后
在这里提供了别人的源码，看上眼了，如果有基础的兄弟，可以直接拉别人的源码然后安装依赖，然后改一改，这部分兄弟可以直接看快速搭建自己的静态博客章节
温馨提示：拉别的代码的前提是环境配好！！！！
本文符号说明：
== 内容 == ，这个内容部分是重点内容，== 没有特殊含义望周知，下篇也是！！！
附上自己搭建完成后的博客：www.vipyubai.top，可以先看效果！！
环境准备
为了防止官方下载软件速度过慢，我这里提供了软件下载的链接，仅供参考！
不喜欢看文档的可以看看我推荐的 b 站视频，第二个更加全面些
软件失效的话记得联系我，补发！！！
【2021 版本】保姆级 Hexo+Github 搭建个人博客步骤
点击跳转
这个相对与上面一个更加全面些【推荐】
Node.js 安装
详细步骤参考一下文章
https://www.cnblogs.com/liuqiyun/p/8133904.html
工具安装：「node-v14.16.0-x64.msi」链接：https://pan.quark.cn/s/16c08ef590af 提取码：JFfP
Git 安装
工具下载：Git-2.35.3-64-bit.exe 链接：https://pan.quark.cn/s/d1f8086f2ac4 提取码：pGQm
安装步骤参考以下步骤
Vscode 安装
后面涉及到大量代码的修改，建议大家使用 Vscode 等编辑软件
下载链接： 「VSCodeUserSetup-x64-1.65.0.exe」 https://pan.quark.cn/s/f64b7413660c 提取码：7eMQ
本文 Vscode 软件需要用到的操作说明：
打开终端，本文用到的命令都是在终端里面输入 ==命令+回车== 的
== ctrl + f == 查找内容的快捷键，因为配置文件的代码太多了，需要用到这个快捷键，然后在搜索框输入要搜索的内容，就能实现快速查找
== 双击 shift == 快速文件查找【这个我是自己配的快捷键，未配置用 vscode 默认的即可】
Typora
安装了这个软件，你才可以打开 .md 结尾的文档，当然你不安装，用 Vscode 打开也可以的
软件安装： 「typora_0.11.15_64bit_Setup.exe」 https://pan.quark.cn/s/d36eb5eadc4c 提取码：Ze6B
Github
github 访问加速
免费版本 【失效不补，网速慢就凑合下】
「fastgithub_win 版-x64.zip」 链接：https://pan.quark.cn/s/4c170f5763d2 提取码：sFNj
其余版本建议访问： https://github.com/dotnetcore/FastGithub
收费版本
两年出海 19 元版本
推荐理由：两年 19 元，应该挺划算的了，用户多不用担心跑路，点击下方链接跳转
链接：点此跳转
工具下载： 「Clash_for_Windows__x64.7z」 链接：https://pan.quark.cn/s/349d2121514d 提取码：DvwC
注册 Github 账号
挂上出海软件，接下来就可以去注册一个 github 账号，用来存放我们的静态网站，
注册、使用教程 CSDN 自己搜下就可以了，这里就不提供了
搭建仓库
打开https://github.com/，新建一个项目，如下所示：
然后如下图所示，输入自己的项目名字，后面一定要加
.github.io后缀，README 初始化可选可不选。名称一定要和你的 github 名字完全一样，比如你 github 名字叫abc，那么仓库名字一定要是abc.github.io。 最后选择 Create 创建，项目就建成功了
快速搭建自己的静态博客
如果你不想从头定慢慢开始定义一个主题的话，可以直接下载别人修改好的主题，然后自己改改配置信息
克隆别人的主题的前提是，该安装的环境安装了，需要安装的环境可以参考环境准备章节，下载别人的源码可以看本教程的 Git 版本控制章节
在克隆别人的主题有什么不懂的部分可以加我联系方式，一起交流！
有好的开源项目，也欢迎大家补充,持续收集中！
开源博客
PS: 看博客样式，觉得可以了在克隆修改
Hexo 搭建与部署
一定要保证前面的环境搭建成功后，在执行该章节后面的步骤
安装 Hexo
在你的电脑上任意位置，新建一个文件夹，用来存放自己的博客文件，比如我的博客存放位置
D:\blog目录下。这里最好按照一级目录创建文件夹，然后将项目放里面，如果是二级目录注意后面配置路由的格式即可
还有目录路径最好全英文，不要出现特殊符号和中文
在该根目录下【根目录就是 blog 目录】，鼠标右击，选择
Git Bash Here，打开 git 的控制台窗口 或者 vscode ，输入npm i hexo-cli -g安装 Hexo。会有几个报错，无视它就行。再安装 hexo
CODE
安装完成后，验证是否安装成功，该窗口输入
hexo -v验证是否安装成功。初始化根目录
CODE
初始化的话最好出海，要不然容易失败
生成 Hexo 页面：
CODE
启动服务：
CODE
浏览器打开http://localhost:4000/ 就可以看到我们的博客啦，
在终端
ctrl+c就可以关闭本地服务器ctrl + F5 刷新浏览器在本地的缓存
这个端口号是在 hexo 的配置文件 url 处配置的，上面是默认的端口号
生成 ssh keys
以下操作的所有秘钥务必自己保存好
在任意文件夹位置，鼠标右击，选择
Git Bash Here，输入 ssh 检查有没有安装 ssh生成 ssh 命令： ssh-keygen -t rsa -C “你注册时的邮件地址” ，总共需要敲四次回车。
找到 id_rsa.pub 文件，并打开复制里面所有的代码，大致路径： c 盘——->用户———>管理员名称————>.ssh 文件夹下
或者
git bash 中输入
cat ~/.ssh/id_rsa.pub下命令，将输出的内容复制到框中，点击确定保存。
打开 github，在头像下面点击
settings，在新出的导航栏，找到 ssh，点击后，在新的页面点击 ssh keys 的新建钥匙，新建钥匙的 title（名称）随意起名，如：余白博客，将 id_rsa.pub 文件复制的公钥，粘贴到 key 里面，保存。
测试 ssh 是否绑定成功命令： ssh -T git@github.com
部署博客到 github
本章节内容建议先将后面章节看完了最后在用此步骤发布到互联网上，当然你也可以先试试
修改-config.yml 文件
将改配置文件最后的 deploy 部分完善，type 和 branch 是固定不变的，repository 修改为你的 github 地址
注意：注意网址前面，冒号后面有一个空格
你的 github 地址：在 github 找到你之前新建的仓库，然后找到仓库地址，复制仓库地址，将我的地址替换为你的即可。
修改好配置文件后，在你的博客文件夹下 git bash，将本地文件上传到 github 里面，根据以下命令，一步一步的走即可：
安装 hexo-deployer-git 自动部署发布工具： npm install hexo-deployer-git --save
生成页面：
hexo g
然后输入下面命令，用户名和邮箱根据你注册 github 的信息自行修改。
BASH
本地文件上传到 Github 上面：
hexo d如果出现这个点击 Token 将秘钥粘贴进去即可（有这个界面的就可以忽略下面的登录步骤）
然后会出现一个登录界面，输入 GitHub 账号，千万别输错了，要不然有得重来
到下面输入密码这一步，先暂缓一下，先创建一个令牌，然后将创建的令牌复制粘贴进去就行【记住不要输入密码，需要将你的令牌输入进去，而不是密码】
设置令牌步骤：
setting————->developer settings（开发者设置）————-> 后续步骤按照下方图片操作
然后新建令牌，有效期 30 天，为令牌赋权限，建议把所有选项都选上，然后生成令牌
将生成的令牌输入到密码那个对话框，一定要将这个令牌，拍照等方式保存好，后面在去找这个令牌它就不显示了
上传到 github 后，就可以用仓库名称访问你部署的网址
博客文件夹的介绍
_config.yml：俗称站点配置文件，很多与博客网站的格式、内容相关的设置都需要在里面改。node_modules:存储 Hexo 插件的文件，可以实现各种扩展功能。一般不需要管。package.json：别问我，我也不知道干嘛的。scaffolds：模板文件夹，里面的post.md文件可以设置每一篇博客的模板。具体用起来就知道能干嘛了。source：非常重要。所有的个人文件都在里面！themes：主题文件夹，可以从Hexo主题官网或者网上大神的 Github 主页下载各种各样美观的主题，让自己的网站变得逼格高端的关键！
接下来重点介绍source文件夹。新建的博客中，source文件夹下默认只有一个子文件夹——>_posts。我们写的博客都放在这个子文件夹里面。我们还可以在source里面新建各种子文件夹满足自己的个性化需求，对初学者而言，我们先把精力放在主线任务上，然后再来搞这些细节。
Git 版本的控制
有的时候因为自己的操作代码出现误删除，你有关闭了软件，无法恢复等等
这种时候我们可以通过版本控制，来回退我们的版本，从而保证我们的代码可以恢复。
如果没有 git 基础的有些地方不理解的，可以先去看下 git 几十分钟搞定
本章节知识只是皮毛，让你快速上升，掌握以下命令也是可以的
打开 github 新建一个仓库，新建完成后不要关掉这个界面
新建文件 .gitignore，这个文件的作用就是帮我们过滤掉不需上传到仓库的文件,注意文件位置：根目录下
代码内容如下：
CODE
终端输入，生成仓库命令 ： git init
建好仓库后，将仓库推送到远程上面去
在建立 github 仓库时，有怎么推送到仓库的说明，建议将推送命令自己保存下，做好笔记！
CODE
当你仓库有内容时完成将代码推送到远程分支上面，后面就算你更换设备，都可以将代码从远程克隆下来，非常方便
提供过程中有任何报错，可以将 error 后面报错信息复制，然后百度一下即可，没什么难度的
克隆步骤
CODE
网址的简单美化
下面的这个个性化设置主要针对的是
matery主题
主题的原地址在这里：hexo-theme-matery，它的文档写得也非常的详细，还有中英文两个版本，按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。
butterfly 官方主题配置教程【 我使用的是这个主题 】
Ps：根据帮助文档，一步一步来即可，两个主题选择一个配置安装即可，原理相同
还有很多主题这里就不一一介绍了，不管你选择什么主题原理都是相通的，差异不是特别大，根据自己的喜好选择就好，但是建议选择长期维护的即可
butterfly 主题安装详细步骤
PS:建议先将 vscode 软件调教好，在进行后面的步骤
使用 vscode 等编辑器软件进行文件的修改，直接将整个文件拖进该软件即可
这后面的章节其实就是带大家看帮助文档，然后一些 bug 的处理，建议大家看不懂文档的结合我这篇文章理解一下
butterfly 的安装
使用 npm 的方式，在 vscode 终端安装
解决办法：
在自己对应的”nodejs“文件夹下的“node_global” 下找到对应的“指令名.ps1”删除掉，然后再运行对应的指令即可
其余的主题的安装方式和这一样，不管安装什么都要先看帮助文档。然后记得用
hexo clean清理缓存后在运行建议将 hexo-theme-butterfly 这个文件夹剪切到 E:\Blog\themes 这个文件夹下，然后改名为 butterfly
将 E:\Blog\themes\butterfly_config.yml 复制一份，然后粘贴到 blog 根目录下 ，起名为 _config.butterfly.yml
主题页面
说明：
这一部分和上一部分没什么区别，就是看帮助文档，然后输入对应的命令，如果没有强调的话，就按照帮助文档的命令敲就行，重要的地方会阐明以下！！！
后面的内容就是看帮助文档，一定要按照帮助文档划分的步骤来，就比如说主页配置，等这一项弄完了然后在弄下一项，后面章节我会挑重要的部分说一下
鉴于每个人的根目录名称都不一样，本帖博客根目录一律以
[Blog]指代。请优先掌握 Butterfly 主题官方文档 的内容后再来进行魔改。
主页基本信息修改
最后
欲知道后事如何，请看下篇章节
版权声明: 本文为 InfoQ 作者【程序员余白】的原创文章。
原文链接:【http://xie.infoq.cn/article/0aee5dabc01dd72949123bf47】。
本文遵守【CC BY-NC】协议，转载请保留原文出处及本版权声明。
Java全栈开发者，编程导航皮友余白~ 2022-09-01 加入
【个人网站】vipyubai.top 【联系方式】微信：joker_yubai 【软件技能】前端，Java
评论