如何愉快地写博客：Hexo, NexT, 图床和自动部署

发表于 更新于

整体框架

  • Hexo：开源静态博客框架 free

  • NexT：一个Hexo博客主题 free

  • 图床：阿里云OSS ¥<1/mo ；可选免费图床，如Imgur，微博图床

  • 自动部署（CI）：GitHub Pages free ，Netlify free

  • 域名：本站域名 ltnexe.live £5/yr

效果

  • 使用Markdown写作。目前使用的是Typora + iPic，Typora也支持别的图片上传工具，可以实现本地编辑时，图片直接上传到图床的功能。VS Code也能实现一样的功能。

  • 低成本跨平台：通过修改托管在GitHub中的博客源文件仓库实现管理博文。GitHub的仓库更新后，可以触发GitHub的CI去部署静态博客html源码到GitHub Pages，或者去触发Netlify自动部署（目前采用）。

    如果要修改博客，可以直接在GitHub网页端修改仓库；要写新博客，可以向仓库中提交一个新Markdown文件。能上网的平台即可。

    更换电脑或者系统，直接克隆仓库到本地，再在本地继续写就行了；写好提交源码（Markdown文件目录）到仓库即可。

  • 图床图片管理：通过OSS对象储存实现。遇到攻击可以关闭图片访问来节约流量；可以在线进行图片处理（由阿里云OSS提供，如压缩，水印）。

可能的下一步：

  • CDN加速
  • 部署到自己的服务器
  • 备案网站（LOL）

教程

Hexo 博客框架

NexT 主题

这个项目的变迁故事可以看这里。这个主题是我目前见过的（中文博客里面）使用者最多，功能最强大的主题。支持众多第三方插件和方便的功能。安装和配置请看官方文档：

https://theme-next.js.org/docs/getting-started/

由于现在有多种安装方式，为了实现无痛升级和在仓库更新时自动部署，我采用了npm来安装，使用了Hexo 5 推荐的配置方式：在根目录新建主题配置文件_config.next.yml。主题目录内的文件都可以不用再更改，这样就不必使用git submodule ，每次提交Hexo根目录下的源码就行了。

NexT支持的第三方插件包括：

  • 备案号展示
  • 数学公式
  • 多种评论系统（有/无后端）
  • 统计分析：网站访客，访问量
  • 博文搜索
  • Tag Plugin
    • 动态图表，tab，嵌入视频和PDF等

购买域名和域名解析

  • 购买域名，自己选合适的就行。国内的域名商可能有自带的CDN加速，适合国内访问

  • 若使用GitHub Pages，可以参考（官方，中文）：配置 GitHub Pages 站点的自定义域

  • 若使用Netlify，部署好之后第二步会有提示如何修改域名的DNS；也可以使用Netlify自己的域名解析服务器（目前使用），非常方便，无需配置A或者CNAME；同时有HTTPS签发证书，前提是网站内链和图片都是https访问的。

    image-20201008143409217

    具体设置：Delegate your domain to Netlify

其他

有很多别的部署案例，直接搜索关键词Hexo，NexT，Netlify，域名等就行，手把手教程很多。