个人博客搭建历程

〇. 简要介绍

本博客的搭建不需要什么技术，而且自己截止到当前时间对Git和Github的使用也刚学，所以只是参考网上博客和B站的教学视频来做的。

一. 部署Github Pages

在自己的Github上创建一个新的Repositories，注意命名规则是——Github账号名.github.io。

二. 安装Hexo

1. 插入注解

(1) 常见的博客搭建方法

据我目前所知，搭建博客总体上分有两种方法：

• 第三方平台：在现有的博客网站、论坛或社区上注册个人主页。如知乎，掘金，简书，segmentFault，csdn，博客园等。特点：无技术门槛，可专注于内容。
• 静态网站生成技术：在终端执行命令快速生成静态网站，如 Jekyll、Hugo、Hexo等。然后通过 Github Pages、Coding 等展示。特点：通过插件可增加评论、搜索、分析等功能。有多种主题可选。在本地以特定格式书写文章，放置在指定的文件夹。每次发布或修改文章都需要重新生成和部署网站。
• 其他：参考链接-如何搭建个人博客 ：几种方案比较 + 个人实现

(2) 静态网站生成技术比较

在该方法当中，也与许多可供选择的方案，像 Jekyll、Hugo、Hexo、Typecho、Wordpress等等，那么它们各有什么优缺点呢，这里我就不说了(不是我的重点)，请参考链接：Hexo还是Hugo？Typecho还是Wordpress？读完这篇或许你就有答案了！

2. 安装相应软件

(1) 安装Node.js

Node.js的官方网站，下载好了之后直接安装，安装过程中会出现

要点第四个，添加到Path(环境变量)。

(2) Git安装

Git的安装则是傻瓜式安装即可，虽然步骤多，但是按照默认的来就行；

好的，现在已经全部准备完毕，下面简单测试一下看看是否安装成功。

(3) 测试

为了验证我们的Node.js和Git是否安装完毕，可以在CMD（win+R，输入“cmd”即可打开）中输入两条命令查看：

node -v
git version

若两条命令没有报错，而且显示了版本号，则安装成功！

3. Hexo本地化

(1) 创建新文件夹

这个新文件夹在之后会保存Hexo的文件以及你的博客相关内容，十分重要，我是建立在E盘下新文件夹I.myBlog。

(2) 安装Hexo

打开Windows中使用cmd命令打开命令行，然后更改命令行目录到上一步创建的新文件夹中，然后执行下面的命令安装Hexo：

npm install hexo-cli -g

注意安装过程中网络不要断开，安装完成后文件夹还是一个空的状态，下一步要初始化。

(3) 初始化Hexo

执行以下代码完成初始化

hexo init

这时候文件夹就出现了新文件，不再是空的，文件主要有以下几种：

• .deploty_git：上传到Github的最终文件，如果不使用Git，则不会生成
• .github：一个神秘文件夹
• node_modules：一个神秘文件夹
• public：上传到Github的最终文件，不安装Git时可以使用这种方法直接部署
• scaffolds：存放创建新文章时的模板文件
• theme：主题存放文件夹
• post：博客文章存放的地方

三. 基础配置与指令

1. 主题配置(美化)

进入博客文件夹根目录，打开_config.yml文件，然后自行进行修改。

这里是一些基本的，比如说你的网站名（第六行）、描述（第八行）、作者（第十行）、语言（第十一行）等都可以进行自主修改。

如图3所示，这里url的修改十分重要，一定要记得修改。要改成你将来要部署的网站！！！比如你要用GitHub Pages部署，就必须是那一节你部署过的网站链接！！！

注意，下面这几处修改十分重要！！！

• 第100行的主题名改为之前让你复制的那个文件夹名(记得空格，在你没有下载新主题之前不用管，默认即可)；
• 第105行“type”后面填写“git”；
• 第106行加上“repo”，然后加上链接——不是GitHub Pages的链接，是GitHub Pages的库的链接！！

注意：这里由于Github在2021年进行了一次更新，应该是不能再使用https协议了，转而应该示意SSH，但是我这里使用了https好像也没什么问题，其实我自己现在对Git、GitHub的使用也还是模模糊糊，对一些操作、概念(如：密钥、公钥、令牌等)不明白，所以也就是稀里糊涂，后面我还要仔细学习学习Git的知识，如果你的使用https不行，建议参考链接进行设置——如何在手机端搭建并部署Hexo - 听话的便当 - 个人博客

• 第107行加上“branch”，名字起main。注意，这里与Github在2021年进行了一次更新有关，之前应该是填写master，现在填写main即可；

完成这些后，可以再次用hexo s这个指令查看预览，发现已经更新主题了。

2. Hexo的常用命令

• hexo s：在本地演示网站
• hexo g：在本地渲染静态页面(就是将md转换为html)
• hexo d：把静态页面一键上传到Github Pages
• hexo new：
  • 标题(直接加标题则是在source/_posts文件夹生成—个”标题.md”文件作为文章，建议生成新文章和页面时最好用阿拉伯数字或者英文，这样链接不会很长)
  • page+标题(标题前加page则是生成一个新页面，hexo刚开始只有默认的首页和归档页，创建其他页面，例如标签、关于等页面都需要此指令生成)
  • post+标题(在_config.yml中将post_asset_folder设为true之后hexo new post “first-page”之后新建了一篇文章，就会同时在hexo/source/_post文件夹下生成一个.md文件和一个同名文件夹，文件夹存放文章中的图片)
• hexo clean：清理已有的静态页面(不是删干净重来)

3. 示例配置过程

在执行hexo init之后，可以再执行hexg g 在本地渲染页面，完成后文件夹中会出现public文件夹。然后再执行hexo new ts 这时在source文件夹下会生成_post文件夹，里面有hello-world.md(默认自带)和ts.md(代码新生成的)，然后我们可以在ts.md中写一些东西，就是日后的博客文章。还可以使用命令hexo new page about 生成一个新的about文件夹，里面有index.md，可以写一些介绍自己的内容。

弄好上面的之后，我们可以执行命令hexo s 在本地演示网站，此时cmd窗口会生成一个http://localhost:4000 的链接，我们在浏览器打开就可以看到渲染的博客页面了。

4. 主题的美化

主要是利用根目录下的_config.yml文件和themes文件夹下某一主题文件夹下的_config.yml进行修改美化页面，可以自己进行探索。

(1) 关于主题的设置

• 存放位置：/themes/主题名/_config.yml(注意：有别于根目录下的_config.yml文件)
  • 这里需要说明的是：Hexo在渲染静态页面时，themes文件夹的_config.yml文件优先度比根目录的_config.yml高
• 修改方式：大部分为布尔值(只需要修改true或者false即可)，支持中文的主题大部分会有注释
  • 这里推荐Hexo的Next与Ayer主题，两者有很清晰明了的中文，页面也很清爽(我的主题是Ayer)
• 添加自定义js的方式：在/themes/主题名/layout/layout.ejs中添加
  • 该方法是我在用Next主题时发现的，当时成功了，是后来Ayer主题失败了，还是要按照不同的主题来

完成配置后，可以使用hexok s 在本地演示网站看一下配置情况。

(2) Markdown语法学习

自己学习，这里不讲。

四. 部署与上传

在进行完这一步之后，就可以真正意义上有一个可以在浏览器打开的自己的博客网站！！！

正常情况下，在cmd输入指令npm install hexo-deployer-git --save 之后指令hexo g -d 理论上就可以成功将博客文件上传到Github上了，然后在GitHub网页的settings页面下找到pages，就可以找到对应的网址，打开即可看到自己的博客。
但是，由于Github服务器在国外，所以经常出现网络问题，需要搭梯子，下面是失败情况下的一些处理方法。

• 失败则输入指令git config --global credential.helper wincred
• 再次失败，错误原因是spawn的话就是网络有些问题，重启cmd试试
• 还是失败的话可能是电脑上装了两个hexo
• 最终还是失败的话可以使用指令hexo g，然后直接在网页端的GitHub上传public文件夹。

五. 相关链接

1. 帮助文档链接

在自己搭建第一个博客中出现了很多问题，有许多博客、视频帮助了我，贴在下面可以可看一下。

听话的便当的B站视频：听话的_便当的个人空间_哔哩哔哩_bilibili

听话的便当的博客：https://byn6.github.io/2021/08/29/gp-h/

Ayer中文官方文档： https://shen-yu.gitee.io/2019/ayer

Hexo官方文档：https://hexo.io/zh-cn/docs/asset-folders.html

Hexo常用命令详解及使用方法：https://www.mabiji.com/hexo/hexocommands.html

Hexo为文章设置目录与标签的方法：https://blog.csdn.net/weixin_44543463/article/details/119738094

[hexo]如何更换主题、删除文章：https://www.cnblogs.com/mrwuzs/p/7942689.html

hexo搭建博客后图片无法显示的完美解决：https://blog.csdn.net/weixin_43702620/article/details/118655308

不会git就学不会github吗？：https://www.zhihu.com/question/29566172

git是干什么的？ sourcetree是干什么的？：https://www.zhihu.com/question/48322958

SourceTree的基本使用教程：https://blog.csdn.net/qq_34129814/article/details/82847753

Hexo server报错TypeError: Cannot read property ‘utcOffset’ of null解决方法：http://t.zoukankan.com/mmzuo-798-p-10510225.html

免费图床，看这一篇就够了！：https://www.duangvps.com/archives/1737

2. 数学公式解决方法

如何在Hexo中插入数学公式 https://qingstudios.com/2020/03/01/Hexo%E4%B8%AD%E6%8F%92%E5%85%A5%E6%95%B0%E5%AD%A6%E5%85%AC%E5%BC%8F/

MathJax在Hexo博客中插入数学公式：https://blog.csdn.net/weixin_39789979/article/details/110806006

markdown斜体和数学公式的矛盾：https://blog.moper.net/2640.html

hexo博客MathJax公式渲染问题：https://www.cnblogs.com/Ai-heng/p/7282110.htm

hexo 如何解决markdown下划线要加反斜杠，以及如何使用其他markdown的渲染引擎？：https://segmentfault.com/q/1010000003987383

3. 优秀博客示例

二十五画生 https://blog.laoda.de