Hexo - 技术小白搭建个人博客 最近更新时间：2021-08-04 22:01:24 建站 博客

注：本文和技术能力无关，纯粹傻瓜式操作。

效果预览

这里就直接放我自己的博客效果了，只截了个首页的图，当然，您也可以在我的博客中自行访问试试，欢迎来访。

我的博客地址：

1. https://www.chinmoku.cc
2. https://xfc-exclave.github.io

当然，通过本文，你最终搭建出来的博客未必和我一模一样，毕竟各人审美和喜好有所不同。

进与退

在正式安装博客之前，我们先做如下假设：

1. 您不希望支付任何费用购买一系列产品，如服务器、数据库、域名、SSL证书、对象存储等。

2. 您手上并未拥有任何一台服务器环境——无论 windows 还是 linux 操作系统。

3. 您希望您的博客花样多、适应性强。

4. 您不希望隔三差五被黑客骚扰。

5. 您甚至不具备任何技术知识，如果您属于这种情况，后文出现任何 技术小白 （中性词）的关键词时，都请务必多加留意。

   注：本文将 技术小白 定义为较极端的情况，如非计算机相关专业学生、文员、教师、翻译、公务员、摄影师、诗人、作家等。本文考虑到技术小白，是由于我个人身边有不少从事各行各业的朋友，他们之中有不少人也有搭建博客的需要。

   也是为了照顾到技术小白，本文会尽可能讲得详细些，有些地方难免啰嗦，请见谅。

   另外，技术小白们，你们不需要在意和纠结那些看不懂的名词，严格跟着本文的步骤走就行了。如果实在走不通，你也可以尝试联系我。

劝退分界线：

在上面的假设中，我已经决定尽量保持最真诚的态度来写这篇 教程文 了，如果仍旧觉得困难重重、不敢迈进的话，那就此别过了。

另外，搭建这个博客你可能 1h 就能搞定，也可能要耗费你整整一天，请做好心理准备。

那下面，我们就正式开始啦！

前置环境

您需要具备如下环境：

如您已满足相应的环境，请自行跳过对应安装小节部分。技术小白的话就不用检验了，因为您肯定一个都没有安装过！

1. 安装 Git

   检验方法： 命令行执行 git --version ，出现对应版本号，即您已安装该环境。

2. 安装 Node.js

   检验方法： 命令行执行 node -v ，出现对应版本号，即您已安装该环境。

3. 安装 npm

   检验方法： 命令行执行 npm -v ，出现对应版本号，即您已安装该环境。

Git 安装

Node 安装

npm 安装

正式搭建

1. 创建文件夹

   正式搭建博客的第一步，是创建一个专用于存放博客项目及其相关内容的文件夹，如果是技术小白，请尽可能与我保持一致。

   

   进入 /myblog/hexo 目录并在地址栏中输入 cmd ，然后按下回车进入小黑框。

   

2. 安装 hexo 基础框架

   输入或复制如下命令并粘贴到弹出的小黑框中执行：

   npm install -g hexo

   提示：在小黑框中鼠标右键点击，即可快速粘贴。

   小黑框如果停滞不动，可以尝试在小黑窗口内单击鼠标右键，这是一个小坑。

3. 初始化 hexo 框架

   输入或复制如下命令并粘贴到弹出的小黑框中执行：

   

4. 目录结构

   初始化完成后，即可在 E:\myblog\hexo 文件夹内看到如下目录结构：

   

   这里的目录结构需要稍微注意下，后续配置时会用到：

   • scaffolds：主要存放 hexo 的一些内置页面。
   • source：主要存放用户的博客文章。
   • themes：主要存放个性化主题。
   • _config.yml ：这是 hexo 的主配置文件，在后续配置时会经常用到它。

5. 启动博客

   在 /myblog/hexo 目录的地址栏中输入 cmd ，然后按下回车进入小黑框，再次进入命令行。

   

   在命令行中依次输入如下命令，并回车执行：

   安装所需要的依赖：

   npm install

   编译生成静态页面：

   hexo g

   启动本地服务：

   hexo s

   

   注：上图多了一条 hexo d 命令，当前暂时用不到，后续才会使用。

   最终出现 Hexo is running at http://localhost:4000 . Press Ctrl+C to stop. 时，即表示启动成功，此时按 Ctrl+C 或点击关闭，博客都将关闭。

6. 访问博客

   此时在浏览器输入地址 http://localhost:4000 进行访问，您将看到如下界面：

   

到这里我们的博客就已经搭建成功，总算有一个能够看得见的博客页面了！

但这还不够，我们还面临着如下诸多问题：

1. 默认的博客页面满足不了自己的审美需要。
2. 我自己是能访问到，但地址发给朋友，朋友却访问不到。
3. 把小黑框一关掉，博客就访问不到了。
4. 没有找到写文章的地方。
5. 还有些别人博客都有的更加高级的功能，比如搜索、评论等。

对于这些问题，我们在后续部分将陆续进行解决。

主题配置

博客搭建成功后，默认的博客页面效果不符合自己的个性要求，想要让自己的博客更加美观，在这里我们就需要对博客的主题进行配置。

hexo 的主题库有三百多个主题，我们可以选择自己喜欢的主题下载配置。

主题下载

主题库地址：https://hexo.io/themes

这里的主题简直不要太多，文艺、骚气、二次元，基本能满足各种不同层次不同种类的审美需要。

这里作为教程演示，我选择使用一个比较漂亮的二次元主题 hexo-theme-shoka 作为演示，您可以根据自己喜好进行下载。

关于当前演示主题的效果，你可以将本文往下翻一翻，有主题配置成功后的首页截图。

找到您喜欢的主题，进入其对应的 github 下载页，按照下图的方式找到地址并复制。

进入您的博客目录中的主题文件夹，如 E:\myblog\hexo\themes ，如前文的方式进入小黑框，大概操作步骤如下图所示：

到这里，主题就已经下载好了。当然，在上图中如果你克隆失败了，你也可以选择直接 Download ZIP ，然后解压到图中的目录位置。

将下载好的主题文件夹 hexo-theme-shoka 重命名为 shoka 。

注意：下载主题后，对于不同主题，可能各自都会有一些针对性的操作或配置，但如需要特别的配置，在 github 对应的下载页都会有相应的说明。另外，有许多主题都是需要安装一些插件，才能实现博客的某些功能和效果的。

主题插件安装

不同主题可能需要安装的插件不同，也可能有的主题不需要安装任何插件，这个需要以主题下载页的说明为准。对于当前演示的主题 hexo-theme-shoka 而言，它需要安装如下插件（这在 github 都有说明）：

• hexo-renderer-multi-markdown-it
• hexo-autoprefixer
• hexo-algoliasearch
• hexo-symbols-count-time
• hexo-feed

那么，到了这里，我们就来安装这个主题所需要的所有插件。

首先，进入 E:\myblog\hexo 目录，并从该目录输入 cmd 进入命令行（前文已经重复多次，相信您已经知道如何进入命令行了，后面就不再重复截图了）。

在命令行中输入 npm install + 插件名称 ，然后回车执行。

命令示例：

npm install hexo-renderer-multi-markdown-it

按照这样的方式，依次拼接 npm install + 插件名称 命令并执行，安装完该主题所需要的所有插件即可。

主题启用

主题及其所需要的插件都安装好了，但此时并未启用该主题。要启用该主题，您需要找到 E:\myblog\hexo\_config.yml 文件并打开。

在该文件中您可以找到如下这样一行代码：

theme: landscape

这行代码表示当前配置的主题为 landscape ，而在我们的主题目录 E:\myblog\hexo\theme 里，正好可以看到一个名为 landscape 的文件夹，因此我们要更换主题，就只需要将这里的配置修改为我们下载好的主题文件夹名称即可，即将这行代码改成下面这样既可：

theme: shoka

这样就已经指定好了我们需要编译的主题，接下来就需要重新启动博客。如果先前启动还没关闭，需要先关闭后才能重启（总之，关闭所有小黑框就是了）。

关于启动如何博客，在上文 正式搭建 -> 启动博客 小节中其实已经提过一遍了，这里再来一次，启动和编译博客您还会经常用到，自然是越熟悉越好了。

进入 E:\myblog\hexo 目录，并从该目录输入 cmd 进入命令行。

执行命令编译博客：

hexo g

在执行 hexo g 命令的过程中，也许会出现一些问题，比如我们当前演示的主题在执行时，就抛出异常，这是不可预期的，出现异常时，可以根据该异常在网上搜索答案，肯定有其他人也遇到过并且还顺利解决了。（不同主题编译时可能出现的异常不一定一样，所以没有统一的解决方法）

我这里在编译 hexo-theme-shoka 主题时，出现了如下异常：

Function yaml.safeLoad is removed in js-yaml 4. Use yaml.load instead, which is now safe by default

这是因为 yaml.safeLoad 方法已经被弃用，需要用 yaml.load 来代替。

由此，我们的解决方法就是：找到 E:\myblog\hexo\themes\shoka\scripts\generaters\config.js 并用记事本打开进行编辑。找到 yaml.safeLoad 并修改为 yaml.load （大概在 41 行左右），保存关闭，然后重新执行 hexo g 命令进行编译。

编译成功后，再执行启动博客服务的命令：

hexo s

该命令执行成功后，我们重新访问 http://localhost:4000 ，我们就能看到我们刚才启用的新的主题页面了，这里截个新鲜的图：

是不是一瞬间颜值蹭蹭蹭地往上涨，老夫的少女心一瞬间又苏醒了！

当然，这才是最简单的一键化配置，不同主题更详细的配置方法，在它们各自的 github 下载页都会进行说明的。

需要 hexo-theme-shoka 主题的详细配置，请前往：https://shoka.lostyu.me/computer-science/note/theme-shoka-doc

这里仅仅作为演示，更加详细的配置因人而异，这里就不再扩展了，自行摸索。

技术小白们自行摸索也许会碰见一些困难，而且自行摸索也很费时，不过到了这一步，就算不进行额外的个性化配置，保底配置已经是OK的了，因为不同主题不一样，无法在这里一一说明，所以技术小白们只能先委屈一下了，当然，身边有懂点相关技术的，可以请他们帮帮忙。

资源推荐

相信您在配置博客主题的时候，很有可能需要一些高质量的壁纸作为网站海报，我在这里也收藏了一批高质量的壁纸网站。

欢迎访问： 高清壁纸网站推荐

插件配置

线上环境

写作与发布

结语

至此，一个精美的个人博客就搭建好了，您的任何才会都将不会被辜负，您可以在自己的小小天地里记录下您的学习工作心得、生活情感经历、文字或图像作品，乃至于通过相互「友链」认识更多有趣的人，相信它一定会给您的生活带来精彩。

如果创建成功后想要添加些「友链」，不妨考虑把我的小站加上，我的小站信息如下：

网站名称：见山云木

网站地址：https://www.xfc-exclave.com

LOGO地址：https://www.xfc-exclave.com/avatar

介绍：红尘三十里，远不见你，你不见山

致谢！