为什么要搭建个人博客？
细细回想，今年已经是我踏足计算机领域的第5年了。从最开始懵懂无知的大一新生，经过大学四年专业课的学习与磨练，对于计算机科学有了最为基本的了解，到现在步入研究生阶段，选定了自己感兴趣且愿意深耕的领域，进行深入的学习与探索。在这个过程中接触 + 学习了太多太多知识、技能。但是正所谓用进废退，很多技能由于各种原因（课程结束、项目结题）慢慢被搁置、遗忘，这是我非常不愿意看到的。此前也进行过一些努力，比如在 github 上专门开一个仓库，用 markdown 记录自己的所学所想，但是现在看来，那些内容显得非常杂乱，有时候着急赶项目，单纯往里面扔一些博客链接啥的，现在点开都不知道当初为什么记录它，它的哪些内容解答了我的疑惑。综上，我选择搭建个人博客，定期总结所学所想，方便日后回忆，也希望能够帮助到和我遇到同样bug的家人们。
第一篇blog就从如何搭建个人博客开始吧，哈哈。
小白科普向：github pages、Hexo、Next是什么？有什么关联？
1. github pages：
GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。
你可以在 GitHub 的
github.io域或自己的自定义域上托管站点。
可以总结为以下几点：
- Github Pages 是 Github 提供的网页寄存服务，用于存放静态网页，也就是我们的博客。
- 我们可以使用专业软件将文档转换成静态网页（如：Hexo），然后上传至 Github
- 最后的结果就像现在这样，你们可以通过我的
github.io子域名访问到我生成的静态网页，即本篇博客
2. Hexo：
- Hexo 是一款基于 Node.js 的快速、简洁且高效的静态博客框架。
- Hexo 使用 Markdown（或其他渲染引擎）解析文章，安装十分方便，配置简单，自定义功能强大，在几秒内，即可利用靓丽的主题生成静态网页。
- 使用起来的效果就是：我仍然可以使用 Markdown 写博客内容，然后使用部署在本地的Hexo框架进行解析，生成相应的静态网页，最后一键上传即可。
3. Next：
- 仔细看看本篇博客的界面布局和操作逻辑，不知你是否有一种似曾相识的感觉？没错，这就是主题的功效！我和网上很多博主使用的都是名为 Next 的主题，所以我们的博客界面千篇一律，只有一些细微差异。
- 说到底，Next 是一个高品质的 Hexo 主题
4. 总结：
Hexo 结合 Markdown 格式的博客内容和 Next 主题生成静态页面，该页面被托管在 Github Pages 服务上，供大家浏览。
实践！搭建自己的个人博客！
Step1：创建 github 账号和 <username>.github.io 仓库
Step2：在本地部署 Hexo 环境（以 windows 为例）
安装 Hexo：
npm install -g hexo-cli初始化 Hexo 框架：
hexo init blog进入上条命令所创建的 blog 文件夹中：
cd blog安装相关依赖：
npm install启动 Hexo 服务：
hexo server访问默认界面，测试是否安装成功：浏览器访问
localhost:4000这一步可能出现的问题：
执行
hexo server命令时报错！报错信息如下所示：
1
2
3
4
5
6
7
8hexo : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\hexo.ps1，
因为在此系统上禁止运行脚本。有关详细信息，请参阅
https:/go.microsoft.com/fwlink/?LinkID=135170 中的about_Execution_Policies。
所在位置 行:1 字符: 1
+ hexo new "PowerShell：因为在此系统上禁止运行脚本，解决方法"
+
+ CategoryInfo : SecurityError: (:) []，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess这是 powershell 执行策略的问题，不用担心。
解决方案：设置->隐私和安全性->开发者选项->允许本地PowerShell脚本未签名的情况下运行
浏览器访问
localhost:4000时出错！浏览器显示内容如下所示：
1
2
3
4
5
6{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as
sidebar_template %} {% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} -
{{config.subtitle }}{% endif %}{% endblock %} {% block page_class %} {% if is_home() %}page-home{% endif -%} {%
endblock %} {% block content %} {% for post in page.posts %} {{ post_template.render(post, true) }} {% endfor %} {%
include '_partials/pagination.swig' %} {% endblock %} {% block sidebar %} {{ sidebar_template.render(false) }} {%
endblock %}这是因为 hexo 在5.0之后把 swig 删除了，需要自己手动安装
解决方案：
npm i hexo-renderer-swig
Step3：配置 Next 主题
进入上一步创建的 blog 文件夹中，将 Next 主题相关文件从 github 克隆到 themes 文件夹中
- 命令：
git clone https://github.com/iissnan/hexo-theme-next themes/next
- 命令：
配置 Hexo 的主题参数（在根目录的
_config.yml文件中），选择使用 Next 主题- 修改参数为：
theme: next
- 修改参数为：
启动 Hexo 服务，验证 Next 主题是否启用
命令行执行：
hexo server浏览器访问：
localhost:4000
Step4：添加博客内容
- 将写好的 Markdown 放到
source\_posts目录 - 将相应的图片放到
source\images目录 - 启动 Hexo 服务（如果之前没有关闭，请忽略此步骤）
- 通过浏览器访问博客主页，可以发现更改已生效
Step5：对 Next 主题进行小修改
这一步有两大任务：根据个人喜好配置主题 和 修一些小bug，下面我们分别来看看
优化1：Next 主题默认首页文章不折叠，但是个人认为这种不美观，所以配置首页文章折叠
在
主题配置文件中找到auto_excerpt，这个属性可以设置为自动折叠，比如设置成只显示300个字，这样的后面的内容就会折叠起来，配置如下：1
2
3auto_excerpt:
enable: true
length: 300
BUG1：Next 图标丢失，显示为问号
问题效果如下图所示：
问题出在主题配置文件（
blog\themes\next\_config.yml）。。。官方文档误人啊！将 menu 配置修正为这样即可：（
||后面是图标类型啊！千万不能删！不能照抄官方文档！）1
2
3
4
5
6menu:
home: /|| home
about: /about/|| user
tags: /tags/|| tags
categories: /categories/|| th
archives: /archives|| archive
BUG2：图片不能加载
- 问题描述：按照正常 Markdown 的写法，将
.md文件放在source\_posts文件夹中，将图片放在source\images文件夹中，然后在 Markdown 中通过相对路径引用图片。Markdown 中图片显示正常，但是在浏览器中图片加载不出来。 - 解决方案：在网上查了很多博客，还是没弄懂问题产生的原因，但是有一种行之有效的解决方案。具体操作是：将 Markdown 中的图片引用路径最前面的
..删掉。即 将../images/pic1改为/images/pic1。这样一通操作下来，Markdown 中的图片不能正常显示了，但是浏览器中的图片就恢复了。真TM奇怪，哈哈哈。 - ref：https://blog.csdn.net/zzy0222/article/details/129073797
- 问题描述：按照正常 Markdown 的写法，将
BUG3：头像下面的名称和描述不显示
问题描述：下图所示的部分在根目录的
yml文件中填写了，但是在浏览器中检查的时候就是不显示！
解决方案：
- 在 Next 主题的目录 _config.yml 中加入：
author: xxxx和subtitle: xxxxxx就行了 - ref：https://github.com/litten/hexo-theme-yilia/issues/878
- 在 Next 主题的目录 _config.yml 中加入：
Step6：将生成的静态页面部署到 github 上
通过上面 5 步的操作，我们已经可以在本地通过
localhost:4000查看博客页面了。因此，这里我们要将 Hexo 框架生成的内容部署到 github 上，让其他家人也能看到 。
具体操作：修改站点配置文件
_config.yml的最后部分1
2
3
4deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master要先安装deploy-git，才能用命令部署到GitHub
1
npm install hexo-deployer-git --save
然后
1
2
3hexo clean #清除之前生成的东西
hexo generate #生成静态文章，缩写hexo g
hexo deploy #部署文章，缩写hexo d过一会儿就可以在
http://yourname.github.io这个网站看到你的博客了！ref：https://zhengyujie.github.io/2019/07/26/hexo%E7%AE%80%E4%BB%8B%E5%92%8C%E5%AE%89%E8%A3%85/