hexo博客搭建

本文旨在列举博客搭建的所有参考资料来源。

PS：本人不会网页前端，所有来源均参考各位博客大佬及网络资源。

框架

入门

博主之前刚开始接触hexo时用的yilia主题，小歪的教程。

• 教你免费搭建个人博客，Hexo&Github | 小歪的博客
• 文档 | Hexo

主题

• butterfly🦋
• yilia
• replica

本站使用的主题butterfly，作者JerryC，基于hexo-theme-melod升级。

• Butterfly - A Simple and Card UI Design theme for Hexo
• jerryc127/hexo-theme-butterfly: 🦋 A Hexo Theme: Butterfly
• JerryC - 今日事,今日畢

小歪教程使用的主题yilia，作者已停更多年。

• litten/hexo-theme-yilia: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo
• Litten的博客

GitHub风格的博客主题。

• sabrinaluo/hexo-theme-replica: Github style replication for hexo theme
• 小白妹妹写代码

优化

• 美化
• 全优化
• 双部署
• SSL

首推超逸的博客，详细且很照顾新手，本人也很有意思。

• 【源码开放】Hexo+Github 博客butterfly 和 matery 主题 搭建完全教程【整理】 | 超逸の博客

HCLonely大佬的一揽子美化教程也很好，包括访客地图、文章日历、投票系统、加载动画（新版butterfly已自带）、页脚跳动的❤、页脚显示网站运行时间、双评论系统、随机文章跳转、文章统计图等。

• Hexo博客美化 | HCLonely Blog

小康的方法主要通过inject css和js进行美化，不用修改模板，很方便。另外可以辅以乐特的文章，自行修改。

• Hexo博客之butterfly主题优雅魔改系列（持续更新） | 小康博客
• Butterfly(蝴蝶)主题美化、优化、无修改源码 (持续更新中…) | Lete乐特 's Blog

其他优化参考：

• 关于我 Butterfly 主题的所有美化 | 小嘉的部落格
• 小弋の生活馆全样式预览 | 小弋の生活馆
• Hexo+Butterfly主题美化 | 唐先森の博客

各种一揽子优化教程，包括图片加载、代码压缩、全站CDN加速、SEO、URL永久链接以及其他一些小技巧，不一一细说，自行查阅。

• Hexo进阶之各种优化 | Sky03’s Blog
• 使用Jsdelivr/CDN加速博客访问速度 | 过客~励む

GitHub+Coding双线部署。主要是注意域名解析出问题的时候证书生成会有问题，暂停解析一下就好。（最新已改为部署至Vercel）

• Hexo：将你的博客部署到 Vercel | Serok’s Blog
• 2019hexo博客部署到coding该绕的坑-奥怪的小栈 - 奥怪 - 博客园
• hexo干货系列：（四）将hexo博客同时托管到github和coding - 简书
• Coding Pages 申请 SSL 证书错误：urn:acme:error:unauthorized: Invalid response from http://xxxxx/_网络_TRHX’S BLOG-CSDN博客

升级https。

• 为自定义域名的Hexo博客升级到Https网站_网络_qq_37683287的博客-CSDN博客
• SSL 证书 腾讯云实现全站 HTTPS 方案 - 产品简介 - 文档中心 - 腾讯云

功能

以下的是一些其他的附加功能，可按需添加。

• hexo插件
• 小功能

卡通-Live2D

向你的Hexo里放上一只萌萌哒二次元看板娘!

• EYHN/hexo-helper-live2d: Add the Sseexxyyy live2d to your hexo!
• Hexo博客yilia主题首页添加helper-live2d模型插件 - 简书

统计-hexo-chart

懒人大佬将matery主题中的文章发布统计图、标签统计图、文章分类统计图做成了插件。

• HCLonely/hexo-charts: Render hexo posts, categories, and tags into charts.
• hexo-charts插件Demo | HCLonely Blog [Demo]

音乐-hexo-tag-aplayer

主题自带js和css，但仍需安装插件

• MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages

链接-hexo-abbrlink

hexo的页面地址转换为永久链接，有效简化地址长度。

• rozbo/hexo-abbrlink: create one and only link for every post for hexo
• hexo+yilia添加URL持久化 | 荷塘月色的博客

加密-hexo-blog-encrypt

你可能需要写一些私密的博客，通过密码验证的方式让人不能随意浏览。

• hexo-blog-encrypt/ReadMe.zh.md at master · MikeCoder/hexo-blog-encrypt

备份-hexo-git-backup

备份hexo博客源文件，建议private。

• Hexo 常用插件 | XJHui’s Blog
• coneycode/hexo-git-backup: you can use it to backup your blog into git.

置顶-hexo-generator-index-pin-top

文章置顶，主题自带支持，安装插件即可。

• netcan/hexo-generator-index-pin-top: Index generator plugin for Hexo. Pin top version
• Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

外链-hexo-filter-nofollow

自动为 Hexo 博客中的外链添加rel="external nofollow noreferrer" 的插件,从而改善你的网站的安全性和 SEO。

• hexo-filter-nofollow - Hexo 官方的 nofollow 插件 | Sukka’s Blog
• hexojs/hexo-filter-nofollow: Add nofollow attribute to all external links automatically.

贡献-hexo-githubcalendar

自动为 Hexo 博客添加github贡献日历。

• 教程：hexo-githubcalendar 插件 1.0 | 小冰博客 (zfe.space)
• Zfour/hexo-github-calendar: 基于hexo的github calendar贡献插件

双栏-hexo-butterfly-article-double-row

butterfly主题文章双栏布局插件。

• 教程：butterfly主题文章双栏布局插件 | 小冰博客 (zfe.space)
• Zfour/hexo-butterfly-article-double-row: Change the layout of the hexo-theme-butterfly article to double columns (github.com)

分类-hexo-magnet

自动为 Hexo 博客主页添加分类磁贴。

• 教程：hexo-magnet 插件 1.0 | 小冰博客 (zfe.space)
• Zfour/hexo-magnet: 基于hexo的magnet插件 (github.com)

访客地图-Clustrmaps

访客地图用于统计访客来源。

• hexo(butterfly)加入clustrmaps访问者地图_定位,html,javascript_cungudafa的博客-CSDN博客
• Free Website Counter Showing Visitor Location on Map

评论系统-Valine

注意各位大佬的Valine-Admin的模板不一样，配置的环境变量也不同。只能选择一个部署，自行选择。

• Valine Admin 邮件回复提醒 | Xuexi’s Blog
• Valine添加博主标签及评论微信、QQ通知 | HCLonely Blog
• Valine评论之Valine-admin配置攻略 | 小康博客
• Valine添加自定义表情 | 小康博客
• 优雅解决LeanCloud流控问题 | 小康博客
• Valine 一款快速、简洁且高效的无后端评论系统。
• LeanCloud

评论系统-Twikoo

切换为twikoo主要是国内使用方便，全部都搭建在腾讯云上。另外可以通过企业微信直接推送微信，没有次数限制。

• Twikoo 中文文档
• 搭建微信通知API实现Twikoo新消息提醒 | guole’s Blog
• 微信菌：利用企业微信搭建微信消息提醒API | 张洪Heo

说说-Artitalk

说说界面，发布心情、吐槽。

• Artitalk.js

时间线-Timeline

发布建站历史的时间轴。

• Responsive Vertical Timeline | CodyHouse

版本徽章-Badges

项目版本的徽章标志。已从shields.io换为badgen。

• GitHub 项目徽章的添加和设置 - LPD-iOS
• Shields.io: Quality metadata badges for open source projects
• Badgen - Fast badge generating service

名言生成-诗词&一言

自动生成一句话的API接口，可以在butterfly中配置副标题source为下面的接口，也可以放在网站或文章任意位置。

• 为你的博客引入——今日诗词、每日一言（js插件分享） | cungudafa
• Hitokoto - 一言
• 今日诗词 - 一言API - 诗词实时智能推荐 - 今日诗词开放接口 - 今日诗词 API

图床-PicGo+CDN

方案很多，用腾讯/阿里云自己搭、白嫖jsDelivr等，自行选择。

• github做Markdown图床 - 简书
• Hexo 博客图片添加至图床—腾讯云COS图床使用。
• 使用PicGo+Github搭建免费图床 | 过客~励む
• Github+PicGo+cdn配置私人图床（丝滑操作撰写md文章） | cungudafa

简历-nimo-markdown-cv

使用wodeni的模板生成一个html文件即可。

• wodeni/nimo-markdown-cv: Maintain your CV in Markdown
• Hexo博客添加自定义HTML页面_javascript_本该如此-CSDN博客

导航-WebstackPage

需要后台，使用WordPress、Laravel或者Typecho等均可。

• WebStackPage/WebStackPage.github.io: ❤️静态响应式网址导航网站 - webstack.cc
• WordPress 版 WebStack 导航主题使用说明，更新于20200115 | 一为忆
• Windows 系统本地安装 WordPress 博客的方法 - SHTION｜时讯联科
• hui-ho/WebStack-Laravel: 一个开源的网址导航网站项目，您可以拿来制作自己的网址导航。
• typecho使用WebStack搭建网址导航 - 游轶的小站

设计-Canva&Logosc

进行Banner和Logo等图标设计。

• Canva在线平面设计软件_免费设计模板素材和海量正版图片 - Canva中文官网
• LOGO设计神器！人工智能为您在线设计LOGO，设计名片，打造完整企业VI

手机-Termux

使用移动设备进行hexo博客的编写

• 如何在移动设备上进行 Hexo 博客编辑和部署 | 艾迪的小栈

加密-PageCrypt

HTML的单页面加密。

PageCrypt - Password Protect HTML

问题

文章页面404

Hexo部署到Github的大小写问题 | Ushioの鸽子屋 (dyhnoah.github.io)

记 Hexo 部署网站到 GitHub 时遇到的大小写不敏感问题 | Docle の Blog

致谢

搭博客的过程就是参考一个大佬，然后发现另一个大佬的大佬，然后发现更多的大佬。

首先感谢主题butterfly的原作者JerryC，做了一个非常适合新手的hexo主题。

其余各位大佬的链接均在友链界面，在此一并感谢，帮助了本人很多。