建立一个博客并维护其实是一件挺麻烦的事儿,过程中所用到的工具繁多,很容易忘记,不便于后期维护。而某些源代码修改也比较隐蔽,因此有必要记录下来,不仅是作为自己的整理,也能给大家一个参考。

建站平台

本博客所使用的搭建平台包括:Hexo、Github Pages、GitLab Pages(已弃用)、Vercel、聚名网。

Hexohttps://hexo.io

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.https://pages.github.com/

GitLab Pages | GitLabhttps://docs.gitlab.com/ee/user/project/pages/

Vercel – Vercelhttps://vercel.com

聚名网-到期域名查询抢注-域名注册-老域名买卖交易平台https://www.juming.com

我的大体框架是,用 Hexo 生成静态站点,利用 Github Pages、Vercel 和 GitLab Pages 部署博客,再利用聚名网注册和管理域名。

为什么要用这么多部署平台?主要是由于百度被 Github 禁止而不被允许爬取 Github Pages。因此我最初采用 Github Pages 和 GitLab Pages 同步部署来解决这个问题(GitLab Pages 可以被百度收录)。但是这样太麻烦,而且两者网址不统一。因此我最终放弃了 GitLab Pages 的方案,选择在聚名网购买了一个域名,再用 Vercel 镜像了 Github 项目,并将域名解析到 Vercel 中,从而解决了这一问题,见:

利用vercel让百度收录GitHub Pages 个人博客- chainsRhttps://www.cnblogs.com/chainsR/p/14391751.html

评论管理

评论系统我选用了 Waline,原因是它的部署相对简单,且评论者无需登录。

Waline | Walinehttps://waline.js.org

注意这一评论系统还需要部署后台数据库和服务器,我选择的方案是 LeanCloud+Vercel。

LeanCloudhttps://www.leancloud.cn

Vercel – Vercelhttps://vercel.com

这一评论系统每次打开时都会从 UNPKG 拉取包,但是速度很慢(而且好像不稳定),因此我更换成了国内的 CDN 镜像 BootCDN。更多 CDN 镜像可以参考如下网页:

CDN 镜像节点整理 | SaraKale’s bloghttps://sarakale.top/blog/posts/8fda44f8/

博客主题

我个人喜欢比较节约而朴素的画风,因此最终挑选了 maupassant 这一主题。

maupassant 主题

tufu9441/maupassant-hexo: A simple Hexo theme forked from icylogic.https://github.com/tufu9441/maupassant-hexo

当然,我并非对这一主题所有部分都完全满意,因此个别细节也会按照自己的喜好进行魔改。比如注意到 mathjax 生成的公式太长会溢出屏幕,因此按照下方文章的方式修改了 style.css 文件:

mathjax 数学公式的使用_使用mathjax.js-CSDN博客https://blog.csdn.net/daily886/article/details/106660880

我的很多博客内容都包含数学公式,然而 mathjax v1 渲染效率很低,因此我将 mathjax 迁移到了 v3

MathJax常见问题 | DaNing的博客https://adaning.github.io/posts/33457.html

对于侧栏的 tags 样式,我参考了 Hux Blog 的代码:

黄玄的博客 | Hux Bloghttps://huangxuan.me/

为了提供更好的页面打印体验,我参考下方文章优化了网页打印样式:

如何创建一个打印友好型的网页 - 宝硕博客https://blog.baoshuo.ren/post/printer-friendly-webpage/

打印时会自动生成 <a> 元素链接文本,但是由于很多链接都是相对路径的形式,因此参照如下回答,将所有相对路径全部转换为绝对路径:

html - Convert relative path to absolute using JavaScript - Stack Overflowhttps://stackoverflow.com/questions/14780350/convert-relative-path-to-absolute-using-javascript/44547904#44547904

为了给创作内容进行版权保护,我在页面底部添加了 Creative Commons 知识共享协议。创作者可以在 Chooser 上选择一个协议类型,我最终选择用 CC BY-NC-SA 4.0 来保护个站中的所有内容,尽管这一协议在国内的效力存疑。

Homepage - Creative Commonshttps://creativecommons.org/

SEO 优化

这部分是重头戏,对我来说非常伤脑筋。首先是四个主要搜索引擎的站长平台:

  • 百度:

站点信息_站点重要数据概览_站长工具_网站支持_百度搜索资源平台https://ziyuan.baidu.com/dashboard

  • Bing:

Home - Bing Webmaster Toolshttps://www.bing.com/webmasters

  • Google:

Google Search Console Toolshttps://search.google.com/search-console/about

  • Yandex:

Yandex Webmaster - search engine optimization servicehttps://webmaster.yandex.com

若要让搜索引擎知道需要爬取哪些网站,就需要提交 sitemap。我利用以下两个插件来生成适用于百度、bing 和 Google 的 sitemap:

hexojs/hexo-generator-sitemap: Sitemap generator for Hexo.https://github.com/hexojs/hexo-generator-sitemap

coneycode/hexo-generator-baidu-sitemap: Baidu Sitemap generator plugin for Hexohttps://github.com/coneycode/hexo-generator-baidu-sitemap

由于使用 sitemap 的方式提交网站收录比较慢,因此最好采用主动推送链接的方式来加快网站内容的收录,我使用了 hexo-submit-urls-to-search-engine 这一插件。

cjh0613/hexo-submit-urls-to-search-engine: Hexo plugin to submit URLs of new posts to Google, Bing, Baidu search engine , that make search engines index your pages earlier. Hexo插件:主动推送Hexo博客新链接至谷歌必应百度搜索引擎,提升网站收录质量和速度。https://github.com/cjh0613/hexo-submit-urls-to-search-engine

按照文档说明即可自动提交到百度和 Bing,但是 Google 的处理流程似乎有些变化,因此我还参考了如下博客:

如何使用Google Index Api提交网址到Googlehttps://coo.st/How-to-submit-website-to-google-use-google-index-api/

编写 robots.txt 有助于搜索引擎节约爬虫资源,从而提高 SEO 性能。我参考如下指南编写了网站 robots.txt 文件。

创建并提交 robots.txt 文件 | Google 搜索中心 | 文档 | Google for Developershttps://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt?hl=zh-cn

SEO 还有很多花样,下面这个网站里可以获得一些学习资料和工具:

Ahrefs-SEO工具和增加搜索流量的资源https://ahrefs.com/zh

其他插件

Hexo 官网上提供了很多可用的插件。我除了上述介绍的插件以外,主要还安装了如下几个:

  • hexo-abbrlink。Hexo 自动将文章标题作为文章链接,在浏览器搜索栏显示效果比较丑陋,而且据说不利于 SEO 优化。因此我安装了这一插件,用于为每篇文章生成一个固定编号,并生成对应的文章链接。

rozbo/hexo-abbrlink: create one and only link for every post for hexohttps://github.com/rozbo/hexo-abbrlink

  • hexo-link-card。这是一个能够在博客显示卡片链接的插件,显示效果前文已经大量展示过了。

OrangeX4/hexo-link-card: Convert a link to a link card via existing markdown grammar. 使用现有 Markdown 语法将链接转换为卡片式链接.https://github.com/OrangeX4/hexo-link-card

  • hexo-all-minifier。页面元素多了会导致文件比较大,网页加载起来效率变慢。为此安装这个插件,来压缩页面源文件,提高页面使用体验。

chenzhutian/hexo-all-minifier: A plugin for Hexo that optimizes HTML, CSS, JS and imagages, and it can optionally deploys your blog.https://github.com/chenzhutian/hexo-all-minifier

  • hexo-filter-mermaid-diagrams。这一插件能够渲染 Markdown 文档中的 Mermaid 流程图。

webappdevelp/hexo-filter-mermaid-diagrams: mermaid diagrams for hexohttps://github.com/webappdevelp/hexo-filter-mermaid-diagrams