Hexo+Github搭建免费博客教程(一)

前言

• 完全免费的搭建个人博客，没有任何收费，零基础小白也能上手，不需要编程基础，跟着操作来即可。
• 首先：

• 要了解一下我们搭建博客要用到的框架：Hexo是高效的静态站点生成框架，它基于Node.js。通过Hexo，你可以直接使用Markdown语法来撰写博客。
• 相信很多小伙伴写工程都写过README.md文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到你的github上，然后别人就可以看到你的网页啦。是不是很简单？你无需关心网页源代码的具体细节，你只需要用心写好你的博客内容就行。

• 其次：

• 本教程从框架的构建、部署、关键页面的生成、在到优化，包教包会

• 最后

• 在这里提供了别人的源码，看上眼了，如果有基础的兄弟，可以直接拉别人的源码然后安装依赖，然后改一改，这部分兄弟可以直接看快速搭建自己的静态博客章节

• 温馨提示：拉别的代码的前提是环境配好！！！！

环境准备

 为了防止官方下载软件速度过慢，我这里提供了软件下载的链接，仅供参考！

 不喜欢看文档的可以看看我推荐的b站视频，第二个更加全面些

软件失效的话记得留言，补发！！！

• 【2021版本】保姆级Hexo+Github搭建个人博客步骤   点击跳转
• 这个相对与上面一个更加全面些【推荐】
   使用Hexo搭建个人博客手摸手教学

Node.js安装

• 详细步骤参考一下文章

 https://www.cnblogs.com/liuqiyun/p/8133904.html

• 完成上面的步骤后设置淘宝镜像:

npm config set registry https://registry.npmmirror.com

• 工具安装：「node-v14.16.0-x64.msi」链接：https://yubai.lanzouf.com/iTVTo0t0hyzg

Git安装

• 工具下载：Git-2.35.3-64-bit.exe（ 这个下载速度还是挺快的，官网直接下载最新版本即可 ）
• 安装步骤参考以下步骤
   https://www.cnblogs.com/xueweisuoyong/p/11914045.html

Vscode安装

• 后面涉及到大量代码的修改，建议大家使用 Vscode等编辑软件

• 下载链接： 果核剥壳（直接去这个网址下载既可，一个宝藏店铺可以收藏了）

• 本文Vscode软件需要用到的操作说明：

• 打开终端，本文用到的命令都是在终端里面输入 ==命令+回车== 的
• ==ctrl + f== 查找内容的快捷键，因为配置文件的代码太多了，需要用到这个快捷键，然后在搜索框输入要搜索的内容，就能实现快速查找
• ==双击 shift== 快速文件查找【这个我是自己配的快捷键，未配置用 vscode 默认的即可】

Typora

• 安装了这个软件，你才可以打开 .md 结尾的文档，当然你不安装，用Vscode 打开也可以的
• 软件安装：typora： 果核剥壳（直接去这个网址下载既可，一个宝藏店铺可以收藏了）

Github

• 两年出海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: 看博客样式，觉得可以了在克隆修改

1. 韦阳的博客
2. Tianlio的GitHub

Hexo搭建与部署

一定要保证前面的环境搭建成功后，在执行该章节后面的步骤

安装Hexo

• 在你的电脑上任意位置，新建一个文件夹，用来存放自己的博客文件，比如我的博客存放位置D:\blog目录下。

• 这里最好按照一级目录创建文件夹，然后将项目放里面，如果是二级目录注意后面配置路由的格式即可
• 还有目录路径最好全英文，不要出现特殊符号和中文

• 在该根目录下【根目录就是blog目录】，鼠标右击，选择Git Bash Here，打开git的控制台窗口 或者 vscode ，输入npm i hexo-cli -g安装Hexo。会有几个报错，无视它就行。
• 再安装hexo

npm install hexo --save

• 安装完成后，验证是否安装成功，该窗口输入hexo -v验证是否安装成功。
• 初始化根目录

hexo init npm install

初始化的话最好出海，要不然容易失败

• 生成Hexo页面：

hexo g

• 启动服务：

hexo s

• 浏览器打开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 [e-mail]

部署博客到 github

• 本章节内容建议先将后面章节看完了最后在用此步骤发布到互联网上，当然你也可以先试试
• 修改-config.yml文件

• 将改配置文件最后的 deploy 部分完善，type和 branch 是固定不变的，repository修改为你的 github 地址 ， ==注意：注意网址前面，冒号后面有一个空格==

deploy: type: git repository: 你的github地址 branch: main

• 你的github地址：在github找到你之前新建的仓库，然后找到仓库地址，复制仓库地址，将我的地址替换为你的即可。

• 修改好配置文件后，在你的博客文件夹下git bash，将本地文件上传到github里面，根据以下命令，一步一步的走即可：

安装 hexo-deployer-git 自动部署发布工具： npm install hexo-deployer-git --save

• 生成页面： hexo g

• 然后输入下面命令，用户名和邮箱根据你注册github的信息自行修改。

git config --global user.name "heiyushaoye" git config --global user.email "[e-mail]"

• 本地文件上传到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里面新建各种子文件夹满足自己的个性化需求，对初学者而言，我们先把精力放在主线任务上，然后再来搞这些细节。

• _config.yml 文件详解

• 严格注意缩进，缩进不对也会报错，所以这里不推荐使用记事本，使用 Vscode 编辑器

• title部分：
  



• url ：只用配置第一行，其余的都不用动，更换为你的远程地址就可以了
• 文件夹的设置，这些东西都不用管，默认即可
• 首页的设置，用默认的就好了
• 预设的分类，uncategorized 意思是未分类，先不用管用默认的就好
• 日期的显示格式：用默认的就好了
• 分页的设置：默认是一页10行数据，数据修改随意

Git版本的控制

有的时候因为自己的操作代码出现误删除，你有关闭了软件，无法恢复等等

这种时候我们可以通过版本控制，来回退我们的版本，从而保证我们的代码可以恢复。

如果没有git基础的有些地方不理解的，可以先去看下 git 几十分钟搞定

本章节知识只是皮毛，让你快速上升，掌握以下命令也是可以的

• 打开github 新建一个仓库，新建完成后不要关掉这个界面

• 新建文件 .gitignore，这个文件的作用就是帮我们过滤掉不需上传到仓库的文件,注意文件位置：根目录下
• 代码内容如下：

.DS_Store Thumbs.db db.json *.log node_modules/ public/ .deploy*/ .vscode/ /.idea/ .deploy_git*/ .idea themes/butterfly/.git

• 终端输入，生成仓库命令 ： git init
• 建好仓库后，将仓库推送到远程上面去
  在建立github仓库时，有怎么推送到仓库的说明，建议将推送命令自己保存下，做好笔记！

echo "# blog" >> README.md git init //初始化仓库 第一步 git add . //第二步 git add README.md git commit -m "first commit" // 第三步，格式看下面重要代码说明 git branch -M main // 第四步 推送到仓库 git remote add origin https://github.com/heiyushaoye/blog.git //第五步 按照后面步骤复制就好 git push -u origin main

• 重要代码说明：

• 第一步出现如下图信息，在进行后面步骤
• 若出现的是其它的信息，请自行将信息百度后，然后修改

git add . 将代码提交到暂存区 git commit -m "feat：初始化仓库" 提交到本地

• 当你仓库有内容时完成将代码推送到远程分支上面，后面就算你更换设备，都可以将代码从远程克隆下来，非常方便
• 提供过程中有任何报错，可以将error 后面报错信息复制，然后百度一下即可，没什么难度的
• 克隆步骤

git clone 仓库地址 切换到你下载好的文件目录，开始下面的步骤 npm install 这是安装必要的依赖

网址的简单美化

• 下面的这个个性化设置主要针对的是matery主题

主题的原地址在这里：hexo-theme-matery，它的文档写得也非常的详细，还有中英文两个版本，按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。

• butterfly官方主题配置教程【 我使用的是这个主题 】
  butterfly主题Ps：根据帮助文档，一步一步来即可，两个主题选择一个配置安装即可，原理相同
• 还有很多主题这里就不一一介绍了，不管你选择什么主题原理都是相通的，差异不是特别大，根据自己的喜好选择就好，但是建议选择长期维护的即可

butterfly主题安装详细步骤

PS:建议先将 vscode 软件调教好，在进行后面的步骤

• 使用 vscode 等编辑器软件进行文件的修改，直接将整个文件拖进该软件即可
• 这后面的章节其实就是带大家看帮助文档，然后一些 bug 的处理，建议大家看不懂文档的结合我这篇文章理解一下

butterfly的安装

• 使用npm 的方式，在vscode终端安装

• 修改配置文件
• 在终端 清理缓存 hexo clean，然后我这里报错了

解决办法：

在自己对应的”nodejs“文件夹下的“node_global” 下找到对应的“指令名.ps1”删除掉，然后再运行对应的指令即可

• hexo s 运行，将网址在浏览器粘贴，最终效果如下

• 其余的主题的安装方式和这一样，不管安装什么都要先看帮助文档。然后记得用 hexo clean 清理缓存后在运行
• 建议将 hexo-theme-butterfly 这个文件夹剪切到 E:\Blog\themes 这个文件夹下，然后改名为 butterfly
• 将 E:\Blog\themes\butterfly_config.yml 复制一份，然后粘贴到 blog 根目录下 ，起名为 _config.butterfly.yml

主题页面

说明：

• 这一部分和上一部分没什么区别，就是看帮助文档，然后输入对应的命令，如果没有强调的话，就按照帮助文档的命令敲就行，重要的地方会阐明以下！！！
• 后面的内容就是看帮助文档，一定要按照帮助文档划分的步骤来，就比如说主页配置，等这一项弄完了然后在弄下一项，后面章节我会挑重要的部分说一下
• 鉴于每个人的根目录名称都不一样，本帖博客根目录一律以 [Blog] 指代。
• 请优先掌握 Butterfly 主题官方文档 的内容后再来进行魔改。

主页基本信息修改

1. 先将主页的基本信息进行完善，就是 包含 title 的部分，前面已经详细说过，这里就不详细讲述了

最后

• 欲知道后事如何，请看下篇章节
• Hexo+Github搭建个人博客详细教程（二）