Hexo+腾讯云+Icarus主题 搭建自定义个人博客

1 基本搭建

经过近两周的时间，终于搭建起来了自己的博客尽管还有许多的地方需要完善，现在先对前期的工作进行一个总结。

主要参考了@千古壹号的这篇博客：hexo+阿里云搭建博客网站 | 千古壹号的博客

以及网友@彭宏豪的博客：我终于拥有自己的独立博客了。 - 知乎

2 细节优化

主要的搭建过程基本按照上述两篇文章，同时对博客中的一些组件进行了更新：

2.1 增加了Latex支持

Hexo博客中使用Latex_卷福1995的博客-CSDN博客_hexo latex

在Hexo中渲染MathJax数学公式 - 简书

2.2 插入图片

hexo 插入图片_rms360的博客-CSDN博客

2.3 修改文章界面为两栏

Hexo博客icarus主题定制篇_ye17186的博客-CSDN博客_icarus主题

2.4 修改文章作者

hexo博客yilia主题作者名字的更改_五月lh的博客-CSDN博客_hexo怎么改名字

2.5 增加gitalk评论系统

hexo-theme-icarus配置 Gitalk 评论系统_xhBruce的博客-CSDN博客

博客集成评论功能---Gitalk - 知乎

自动初始化Gitalk评论 | 码农网

增加SSL证书后，出现跳转错误，按照下述博客解决了：

[gitalk] 解决配置gitalk插件后初始化登录时跳转回首页_itboone的博客-CSDN博客_gitalk 初始化

gitment初始化评论跳回博客首页_好人二狗的博客-CSDN博客

2.6 增加分享按钮

Icarus用户指南 - 分享按钮 - Icarus

2.7 增加备案信息

Hexo和icarus主题那些坑：访问不了、打开慢、备案号 - 云+社区 - 腾讯云

3 更新日志

3.1 修改了网页的图标文件 - 2021.7.3

网站所使用的处理器图标来自：免费的图标、剪贴画插图、照片和音乐

将图片转换为了矢量图格式：PNG转SVG - 在线转换图像文件

修改node_modules\hexo-theme-icarus\source\img目录下的favicon.svg文件即可

同时使用PS自制了左上角的图标，修改node_modules\hexo-theme-icarus\source\img下的logo图标即可

3.2 增加了网站SSL证书 - 2021.7.3

从腾讯云上申请了免费的一年SSL证书

申请教程：

SSL 证书 域名型（DV）免费 SSL 证书申请流程 - 证书申请 - 文档中心 - 腾讯云

安装教程：

hexo+阿里云搭建博客网站 | 千古壹号的博客

Centos7设置文件夹写入权限 - 路过sayhi - 博客园

腾讯云服务器申请SSL证书, 配置Nginx, 实现HTTPS_常城的博客-CSDN博客_腾讯云服务器证书

3.3 增加了Live-2D看板娘 - 2021.7.3

安装教程：

Hexo+Icarus3+live2d给博客添加看板娘_乔一I的博客-CSDN博客

HEXO+icarus主题 给博客添加看板娘(Live2D) - 简书

3.4 增加了文章加密功能 - 2021.7.4

hexo文章加密 - 简书

3.5 增加了文章首页省略功能 - 2021.7.4

hexo首页文章显示查看原文按钮_阿甘的博客的博客-CSDN博客_hexo 阅读更多

3.6 遇到的问题，如何增加本地的icon？

3.7 增加了文章内部音乐播放模块 - 2021.7.5

实现代码示例如下(网易云音乐为例)：

1	<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=350 height=86 src="//music.163.com/outchain/player?type=2&id=1832684671&auto=0&height=66" style="clear:both;display:block;margin:auto"></iframe>

3.8 在百度进行了网站验证 - 2021.8.25

验证页面：百度搜索资源平台_共创共享鲜活搜索

值得注意的是，验证文件需要放进根目录node_modules\hexo-theme-icarus\source中，而不是blog文件夹的source文件夹

3.9 在必应进行了网站验证 - 2021.8.25

验证页面：必应

验证方法如上3.8

3.10 增加了每个文章对应的资源文件夹 - 2021.10.6

Hexo博客插入图片的方法 - SChen1024 - 博客园

hexo博客引用图片无法显示 --完美解决--完美契合相对路径markdown语法 | kilig

【Hexo博客】Hexo+markdown之引用图片方法汇集_qq_43401552的博客-CSDN博客_hexo markdown图片

【Hexo博客】Hexo+markdown之引用图片方法汇集_qq_43401552的博客-CSDN博客_hexo markdown图片

修改了根目录 _config.yml 中post_asset_folder: true，便于提高图片的效率

3.11 解决了图片的居中问题 - 2021.10.10

1 2 3

<div align="center"> {% asset_img 1.png%} </div

利用上面的代码终于实现了图片的居中问题！！！！！！(前提要进行更新3.10)

3.12 实现了搭载自定义页面 - 2022.03.05

Hexo博客技巧：添加自定义html页面_Amnesia_Fu的博客-CSDN博客_hexo添加html