Tools HexoBlog

Hexo博客搭建回顾概览

Posted by saltyfishyjk on 2022-01-28
Words 2.1k and Reading Time 7 Minutes
Viewed Times

Hexo博客（Snail主题）搭建回顾概览

Part 0 前言

该Part记录一些背景信息，有助于读者了解这篇博客的写作背景、定位、对读者的前置知识期望。建议脑海中只有”想像大家一样搭建hexo博客“的同学阅读本部分，其他同学可直接跳至Part 1开始阅读。

写作背景

笔者在6系第一学期的祭祖中阅读参考了大量的学长学姐和同届大神的博客，受益匪浅，csdn和cnblog都是很不错的适合博客小白的平台，同时易于在百度检索中出现；除此之外，基于github page的hexo博客吸引了我的兴趣，虽不易于百度检索，但是利于对个人博客收集整理，这便是搭建本博客的初衷。

笔者的设备是Windows 10家庭版。

定位

基于这篇博客提供的其他搭建博客详细指导链接和笔者自己的补充，预期读者可以依此搭建属于自己的Snail主题hexo博客。

您在这里可以期望获得：

  1. 笔者在搭建博客中踩过的坑
  2. 一些较详细的指导搭建博客链接
  3. 基于第2条中的搭建博客链接的一些补充
  4. 包括链接博客内容在内的搭建博客所需的充分知识
  5. 依照本博客给出的方法搭建出类似本博客的个人博客

您在这里无法期望获得：

  1. 应用到的技术的深层原理
  2. Snail主题之外的其他hexo主题博客搭建方法

对读者前置知识的期望

我们希望读者最好可以拥有以下知识，或在阅读本博客时及时查阅学习。

  1. 了解Git和GitHub基础知识
  2. 能够应用编辑器（如visual studio code）查看各种非常规类型配置文件
  3. 能够访问GitHub或能够使用VPN
  4. 命令行的使用与Linux基本命令

Part 1 笔者参考的其他博客

  1. Hexo+GitHub Page搭建技术博客（重要参考）
  2. Snail主题官方仓库（给出了重要基本指导）
  3. hexo官网（可以获得hexo基本知识如hexo命令等）
  4. hexo+github搭建博客(超级详细版，精细入微)
  5. 解决npm install安装慢的问题
  6. 利用vscode打开.styl文件的办法
  7. 解决hexo中文博客打不开的问题
  8. 解决博客中插入图片的问题

以上为笔者在搭建博客的过程中所参考过的其他博客，前两个最为重要，读者可以将本博客与它们结合阅读。

Part 2 笔者踩过的坑

设置GitHub默认分支为master

由于美国的一些政治因素，GitHub在2020年将默认分支由多年来一直使用的master改为了main，这导致了学习2020年10月之前的博客教程时，现在的用户需要考虑默认分支不同导致的潜在问题。因此，直接将自己GitHub账户的默认分支改为master即可与大家保持一致，避免无谓的bug。

直接按照Snail主题官方仓库（给出了重要基本指导）的README.md搭建博客

笔者曾尝试先应用默认主题，再更换为snail主题的方法，但是由于未知原因一直失败，但直接按照snail主题给出的指令操作即可。因此，建议读者直接按此操作。

执行hexo g -d时关闭代理

在此先推荐一款访问GitHub的工具DevSideCar，傻瓜式操作非常易用。

在使用DevSideCar时，可能会遇到执行hexo g -d命令时上传失败，这并非因为操作错误，而是因为网络原因，只需要关闭代理即可。

Part 3 个性化设置博客界面

如果你完全按照上文及相关链接的操作进行，那么下面的操作对你应当是适用的。

在Snail主题官方仓库（给出了重要基本指导）已经给出的设置

  1. 修改Site，按照官方指导即可。
  2. 修改Site Settings，其中的img文件夹的相对地址是blog\source\img，其中blog是官方指导最开始的hexo init blog命令生成的blog文件夹。在该img文件夹下放入你所想要的图片并修改配置文件中相应代码。
  3. 修改SNS Settings，按照官方指导即可。
    1. 修改Sidebar Settings，对于不需要的Sidebar，直接注释掉或删掉对应栏目即可；friends链接的title是在你的博客界面显示的文字，点击会跳转到href指向的链接。
  4. theme部分应该无需自己修改。
  5. Deployment部分依照官方指导修改即可，其具体格式可进一步参考Hexo+GitHub Page搭建技术博客（重要参考）。
  6. Background effects部分按照官方指导修改即可，也可以关闭以减少CPU消耗，其中content部分可以修改为自己喜欢的emoji或语句，做个小彩蛋（比如本博客[doge]）。

官方指导未给出的设置配置

更改右上角导航栏

例子：如想删去下图右上角的TAGS栏目，只需要在blog\source目录下删去tags文件夹即可。

如果想增加栏目，可以查阅hexo命令hexo new page使用方法，此处不详述。

写博客

可以使用hexo new 'title'的命令生成.md博客源文件，在其中使用markdown语法书写即可。

插入图片

参考解决博客中插入图片的问题中的方案，其中前两种方法笔者已经亲测可用，最后的typora的方法没有尝试。

2024.01.24 更新

Typora + Hexo

通过在博客 markdown 文档开头的 YAML 格式元数据中增加一行形如下的内容，可以设置该文档在本地的根 URL，从而引用图片时可以省略 ./2023-05-11-「BUAA-Computer-Network-Experiment」Notes ，将图片保存在该目录下（此处需要辅以 Typora 设置图床目录为./${filename}），直接在()中写图片文件名即可，可以做到 Typora 和博客网页中都能看到图片而不用做额外的修改。

1
typora-root-url: ./2023-05-11-「BUAA-Computer-Network-Experiment」Notes

Part 4 使用过程踩坑

在使用过程中，笔者陆续遇到若干问题，在这里记录问题和解决办法。

FATAL Port 4000 has been used. Try other port instead

执行 hexo s 的时候遇到了提示 FATAL Port 4000 has been used. Try other port instead，即，4000端口被调用。

网络上一些办法是找到占用4000端口的进程并杀掉，其实不必如此大费周章，在调用hexo s时加上参数-p 4001即hexo s -p 4001即可使用4001端口，避免了4000端口被占用的问题。

Part 5 LaTeX支持

为了支持LaTeX渲染，我们需要利用Mathjax，而Mathjax依赖于kramed，hexo的默认渲染器是marked，因此我们需要以下步骤：

卸载marked

npm uninstall hexo-renderer-marked --save

安装kramed

npm install hexo-renderer-kramed --save

[卸载hexo-math]

npm uninstall hexo-math --save

安装mathjax

npm install hexo-renderer-mathjax --save

更新mathjax的CDN标签

打开 node_modules/hexo-renderer-mathjax/mathjax.html, 修改 <scripts> 标签

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js?config=TeX-MML-AM_CHTML"></script>

修改_config.yml

找到math配置并更改为以下：

1
2
3
math:
  enable: true
  engine: mathjax

修改博客开头

博客文章的开头加入mathjax:true，具体如下：

1
2
3
4
5
---
title: Hexo博客搭建回顾概览
date: 2022-01-28 11:33:04
mathjax: true
---

到此为止即配置完成。

参考资料

  1. Super Snail提供的Mathjax支持攻略
  2. Hexo渲染LaTeX公式

Part 6 文章修改标题

如果后期要对某篇文章修改标题，只需在其.md文件的顶部修改title值即可，不需要修改.md文件名。

Part 7 修改网页ico

在/img下放入你的ico文件，再在/themes/snail/layout/_partial/head.ejs中找到<link rel="shortcut icon" href="<%= config.root %>img/ironman-draw.png">中的ironman-draw.png改为你刚放入/img的文件名即可（需要带扩展名）

后记

感谢您阅读至此，这篇博客到此也就告一段落了，后续笔者若有新的心得会更新本博客。

这篇博客远非尽善尽美，笔者也只是提供了若干其他博客资源和自己亲历的坑，若有不足之处还望批评指正。

This is copyright.

FEATURED TAGS
Tools HexoBlog
FRIENDS