心血来潮，拾掇个小博客
本文中博客的搭建基于Github服务器和Hexo静态框架，主要思路是先实现Github和Hexo的结合，构建出博客的雏形，再应用前人的主题框架，最后在此基础上做个性化的配置和优化。

经过了几天的折腾，目前Blog是酱子的：Drokish’s Blog

一、基础搭建

1. 搭建教程参考

2. 最终选择主题

tranquilpeak

到了这里，一个个人博客就具备基本的雏形了，下面是对博客功能和界面进行调整优化的记录。

3. mathjax 及CDN（内容分发网络）配置（Optional）

hexo的markdown渲染器不支持latex数学公式语法，需要另行配置，可参见：

在tranquilpeak主题中使用mermaid语句与Latex语句 - Jim Wang

推荐CDN: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js?config=TeX-AMS-MML_HTMLorMML

4. 设置文章分类和标签

为文章设置分类和标签会让你的博客井井有条，推荐直接阅读Tranquilpeak模板项目说明文档。如本文设置：

   title: 个人博客搭建及个性化
   categories:
     - 记录与总结
     - 学习笔记
   tags:
     - 博客搭建
   keywords:
     - Hexo博客

额外参考：Hexo使用攻略：（四）Hexo的分类和标签设置 | { GoonX }

二、个性化配置

1. 样式更改

tranquilpeak的模板提供了很多样式的选择，包括sidebar的展开方式、背景图片选择、作者图片选择等，在搞其他花里胡哨的个性化功能之前，不妨先将模板的功能充分啃完，推荐直接阅读Tranquilpeak模板项目说明文档。另可参考其他博主的整理： tranquilpeak主题的配置 - 宋金涛博客

2. 背景设置

在本主题的source/assets/css/style.css文件中（不同主题位置有差异），搜索#main，可以通过background参数对body部分的背景颜色做出调整。

3. 字体配置

在本主题source/assets/css/style.css文件中，搜索post-cotent，可以调整文章content的属性，包括字体型号、颜色等等。

4. 图片配置

我习惯用typora写作markdown，所以广泛搜寻多种图片插入方式，只为选择和typora适配的方式，如 typora + hexo博客中插入图片 | yinyoupoet的博客

然鹅这些方式基于博客框架，虽能适配博客书写，却对日常md文件书写造成不便，因此最终选择了通用性方法：PicGo+Typora+图床 自动上传图片，上传后图片转成URL链接，无论博客还是本地md，都可适用。

5. 首页每篇文章大小

该模板在首页展示中，默认展示每篇文章的全部内容，需要我们使用<!–more–>等代码加以限制，最好在文章开头先写几句摘要，首页只呈现标题和摘要。如本文：

image-20230330151944140

参考：

让hexo的首页只显示文章的部分内容而不是全部 | 朱启的个人博客

6. 搜索功能

通过Algolia服务实现，可以通过输入关键词对文章进行检索，配置的简要步骤如下：

参考：

Algolia配置说明

基于Algolia实现网站全文搜索【ZLG开发者社区】 - 知乎

7. 评论功能

起初打算使用gitment构建评论区，可在测试时发现了无法登入等问题，于是得博主提醒，转用gitalk。

8. 图标设置

主要目的是为QQ等侧边栏按钮配置图标，以及为网站配置图标。

图标网站：

1.创建QQ图标：

主要参考主题的config.yaml文件注释，url由我四处搜寻得来（可真不好找，也长见识了(T-T)），icon属性为font网站图标引用的缩写，网站html格式的引用语法为：<i class=”fa-brands fa-qq”></i>，这里使用时应将fa-brands 缩为fab，但保留fa-qq，即：

qq:
            title: global.qq 
            url: http://wpa.qq.com/msgrd?v=3&uin=2385498525&site=qq&menu=yes #替换QQ号
            icon: fab fa-qq #错误设置 fab qq

QQ URL生成:

QQ链接代码|QQ网页链接|QQ链接生成 - 社交应用网页链接生成器

一键跳转QQ加好友链接_怎么一键添加QQ好友_机领网 JLWZ.CN

2.设置网站图标：

  • 将主题config.yaml文件的favicon属性设置为favicon: 图标名.ico （图标须为ico格式，3232或1616大小），
  • 将图标拷贝到source/assets/image 文件夹内

ico格式转化网站： 网站 Favicon 图标在线制作工具 - dute.org

问题：本地测试图标显示正常，网站无法显示

解决：

  • 分析网页代码：
  • 发现url为：http://drokish.com/… 对比本地测试界面url：assets/images/favicon，猜测可能是网站url采用http未更新到https导致了问题。
  • 尝试更换项目config.yaml中网址为https://…，在运行hexo g, hexo d ，网网站图标正常显示。

9. 生成草稿

有些文章略有瑕疵，不能发布，但又要随时修改并测试展示效果，这时可以将其创建为draft，参考：Hexo 文章保存为草稿 | novnan’s notes，主要命令：

  • 生成：hexo new draft <title>
  • 预览：hexo s –draft
  • 发布：hexo p <filename>

10. 功能拓展

添加百度分析和谷歌分析，可以借助两平台对网站访问情况进行统计分析，具体可见 模板项目说明文档。

11. 为网站开启https

首先说明一点，此处只介绍如何为阿里云域名开启Https服务，关于域名申请和绑定github服务器的内容，是我去年完成的事情，在此不再赘述（hhhhh, 其实是我懒😅），详情可另行搜寻，相关资料很多的。

什么是https？（将要死去的网络攻防知识袭击了我）简单来说，就是更安全的http服务，是Http与SSL协议（Secure Socket Layer，安全套接字层）的结合，为原本存在安全隐患的http服务提供了可靠安全的数据传输，因此如果一个网站未开启https服务，浏览器就会在它的网址栏左边打上一个“不安全”的标签。

简要过程如下：

  • 前往阿里云购买免费ssl证书额度
  • 申请ssl证书，填写相关信息
  • 等待签发（几分钟）
  • 签发成功
  • 前往github博客项目的setting-page，开启Enforce Https（未申请ssl之前开启会导致找不到页面）
Untitled

12. 其他重要参考：

从零开始建立个人博客III：Hexo配置 | C’Joy

(5)Hexo踩坑_主题优化 | haoran’s blog

hexo博客在本地可以正常预览,部署到github上后为什么无法显示样式,只有内容呢？ - 知乎

13. Error记录：

1.解决Git存在SSh key 仍报错 Permission denied (publickey)的问题_小哥_没有时间了的博客-CSDN博客

2.Hexo部署出现错误 Error: Spawn failed 解决方式 | 毋忘草的小岛

3.路径导致的Git连接失败问题：将文件保存在了drokishblog下，而git搜寻C盘user文件，拷贝过去解决问题

Untitled

4.本地测试界面和远程界面不一致问题（经典问题）：

问题的可能根源

  • 本地测试使用数据的URL和远程不同，远程服务器无法访问到目标文件
  • 远程文件无问题，但本地浏览器对远程界面的缓存未更新

第一种情况的典型代表即为1.8.2部分的网站图标本地远程不一致问题，排查这种错误可以利用F12功能，找到错误资源对应的URL，检查是否可以正常访问。

第二种情况在我设置背景颜色时遇到了，经检查，远程github文件已经更新，但通过F12调试发现，本地浏览器对drokish.com的style….css的缓存中背景色依然是#ffffff，导致界面仍为纯白色背景，这时手动清除缓存或关机重启即可。

浏览器的Dev Tools真是个好工具😉，F12大法好~

14. 前端学习

模板提供的自由化毕竟是有限的，如果想要更加个性化地调整博客界面和功能，最好懂得基础的html、css、ejs语法，经过我这几天的坎坷摸索，总体感觉html负责最接近用户的呈现，js文件主要和界面逻辑和框架有关，css更多地提供一些配置功能，如11节谈到的style.css文件。下面是一些零碎的学习记录：

ejs基本语法理解和运用 - 不会代码的前端 - 博客园

Sass函数：Sass Maps的函数-map-get($map,$key) - 珊迪·奇克斯 - 博客园

ejs模板文件里直接这样写<ul><%- partial(‘listitem’,items) %></ul> partial() 正是调用片段视图函数,接受2个参数,参数一表示模板名,参数二表示出入的对象数据.

Code中缩写含义：

Device Code Types Range
Extra small xs small to large handset < 600px
Small sm small to medium tablet 600px > < 960px
Medium md large tablet to laptop 960px > < 1264px*
Large lg desktop 1264px* > < 1904px*
Extra large xl 4k and ultra-wides > 1904px*

三、结语

博客的搭建做到有模有样，不落下乘即可（对于我这种毫无前端基础的人而言，能用好模板配置文件就该满足了，当然起码博客界面自己要看顺眼，日后才有兴趣往上填充内容），更需要投入热情和思考的是，如何坚持不懈地去学习、去经历、去感悟、去记录。

另外，我希望我的博客始于技术又不止于技术。二十岁出头的年华，总是让人一边跌跌撞撞，一边又满怀期望，其中，有对生活的体悟和思索，有对热爱的倾注与坚守，有对美好的追逐和留念，有对岁月的镌刻和积淀。愿你我的Blog能够成为我们在苍茫世界的一处温馨后花园，成为我们茫然漂泊时的一座精神锚点，成为我们时光之旅上的一位忠实记录人。

Untitled