一种使用Hexo、NexT、GitHub、Cloudflare构建静态博客的思路

本文介绍一种使用Hexo、NexT、GitHub、Cloudflar等技术和服务发布静态博客的思路,可以实现完全网络化写作、编译和发布博客。

使用的技术和服务有:

  • Hexo 是一个快速、简洁且高效的博客框架
  • Theme NexT : Stay Simple. Stay NexT
  • GitHub:Where the world builds software
  • Cloudflare 是一个全球网络,旨在让您连接到互联网的一切都安全、私密、快速和可靠
  • Cloudflare Pages
  • Cloudflare Web Analytics

实现的功能和效果有:

  • 开箱即用的Hexo和Next主题的博客模板Hexo_NexT。你只需fork该模板,修改部分配置即可完成搭建工作
  • GitHub Dependabot alerts 自动更新Hexo的依赖包,保证代码安全
  • 使用Cloudflare Pages实现编译发布
  • 域名接入Cloudflare实现CDN加速访问
  • 使用Cloudflare Web Analytics来进行访问统计

序言

静态博客的优势很明显。它不仅轻便、快捷且维护方便,还不用操心安全、主机费用等问题。可以让创作者安心的创作内容,剩余的琐碎工作交由程序自动化完成。

当前静态博客不等同于静态网页 。基于各类博客架构的生成的静态博客,和最初网页三剑客制作的静态网页有本质上的差别,尤其内容创作、主题使用和页面生成都不再是逐个页面的去实现,博客架构已经考虑了所有自动化的工作。

静态博客已经可以脱离本地化环境,完全网络化写作、编译和发布。利用各种CI工具,可以轻松的实现在代码仓库发生变化时自动拉取内容编译后发布。比如使用 Travis CI或GitHub action等CI,或者Netlify等发布工具。

建立hexo静态博客仓库

  • 在GitHub上新建代码仓库Hexo_NexT
  • 使用Gitpod或其它在线IDE打开仓库,安装好npm环境和Hexo,初始化hexo博客后推送至代码仓库
  • 在Github代码仓库中编辑Hexo配置文件,配置博客基本信息,设置使用NexT主题
  • 在Github代码仓库中编辑NexT主题配置,并同步编辑package.json添加依赖包
  • 在Github代码仓库中删除package-lock.json和yarn.lock
  • 在Github代码仓库中启用Dependabot alerts,并配置环境为npm
  • Dependabot发现更新依赖版本时会提交一个合并请求,点击合并就好

使用Cloudflare 实现发布、加速和访问统计

  • 注册登录Cloudflare,并以NS方式接入博客域名
  • 使用Cloudflare pages创建项目,绑定Hexo_NexT仓库并配置相关信息,即可自动编译发布
  • 在设置中为该项目添加自定义域名即可实现cdn加速
  • 在设置中开启Cloudflare web analytics
  • 在Github代码仓库中编辑NexT主题配置,添加cloudflare_analytics的站点标识,提交更新到主分支编译发布,实现访问统计

日常写作

  • 使用印象笔记等进行多端写作
  • 成稿后,在Github代码仓库_posts文件夹中新增文章
  • 提交到主分支后自动编译发布

写在最后

本文可能对完全新手不太友好,因为文中的每一步都需要相应的背景知识和实践经验,可能每一步都需要一篇完整文章来解释和指导操作,所以只能算是给读者提供思路,但是这是我已经实现的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容