开源一个基于 Gatsby.js 的静态博客模板

[ssshooter]

Usubeni

Usubeni 基于 Gatsby.js v4，示例页面： https://ssshooter.com/tag/coding/

Gatsby 相对于 hexo 上手有一点门槛，不过这个代价换来的是比较大的自由度。使用相关问题在博客里解释了一部分。

使用

fork 或 clone 本项目，安装依赖，推荐使用 yarn。然后：

• 修改 gatsby-config.js
• 修改 src\settings.js
• iconfont 文件夹为 src\css\icon，必要时请自行替换，但注意同步修改配置文件中的 icon 名称避免显示异常
• 更换主题图 src\assets\yozakura.jpg
• 更换 logo static\logo.png
• 建议使用 master 分支写博客，保留 theme 分支更新主题后（同时可以提 PR ），再合并到 master 分支
• 在 pages 文件夹添加新文章，也可以通过 node createPost post-title or node createPost post-title 2017-07-26 创建

本主题特性包括：

• 快（ Lighthouse performance 评分 90 ）
• Gatsby 相关依赖基本更新到最新
• 已集成 代码高亮（ prismjs ）
• 已集成 LaTeX （ katex ）
• 已配置 .npmrc 减轻安装依赖的痛苦
• 已添加 TOC
• 自带图库、标签库
• 自带（没什么用的）表情库

Gatsby 的优点：

• 高自由度页面自定义
• 为数不多的体验 graphQL 的机会

Gatsby 的缺点：

• 有一定学习成本
• 依赖多，但是也不是非常多，也就 500m （滑稽）

开发

npm start

发布

npm run build

可选如 Gatsby 自家的 cloud 、Vercel 或 Netlify 等服务。

拒绝雷同

修改 src\css\global.scss 文件夹的配色变量，用上自己喜欢的颜色！这是个性化主题最简单的方法！（也欢迎大家 PR 好看的配色）

其他排版优化可以参考 Typography.js

评论系统

自带了评论渲染和发布组件（src\components\Comment.js），但是后端未开源，能干的大佬们可以小改一下接入自己的评论系统。

也可以接其他系统例如：

• 静态方案，Staticman
• 自己掌控数据，valine、waline
• 第三方，disqus

PWA

本模板没有启用 PWA ，尽管你可以通过 gatsby-plugin-manifest 和 gatsby-plugin-offline 简单地启用 PWA 功能，但是对个人博客来说 PWA 确实没有太大的必要，而且启用 PWA 之后，预渲染的页面就废了，似乎因为 PWA 的缓存机制跟多页面冲突。

注意事项

1. /archive/ 为全文章列表，/tag/xxx/ 单标签列表

released: true
hidden: false

1. 文章信息的 released 代表完全不加入页面生成，hidden 代表生成页面但不出现在任何列表中。

感谢

• 了不起的 Gatsby
• 封面图 P 站#18073647
• 可以在这里抄一下样式

[dazkarieh]

star 支持，挺好看的

[zcxey2911]

棒，楼主前端技术又精进了