V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
ssshooter
V2EX  ›  分享创造

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

  •  
  •   ssshooter ·
    ssshooter · 2022-07-04 22:39:22 +08:00 · 1944 次点击
    这是一个创建于 897 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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 等服务。

    Deploy with Vercel

    拒绝雷同

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

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

    评论系统

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

    也可以接其他系统例如:

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

    PWA

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

    注意事项

    1. /archive/ 为全文章列表,/tag/xxx/ 单标签列表
    released: true
    hidden: false
    
    1. 文章信息的 released 代表完全不加入页面生成,hidden 代表生成页面但不出现在任何列表中。

    感谢

    2 条回复    2022-07-05 12:58:20 +08:00
    dazkarieh
        1
    dazkarieh  
       2022-07-05 00:22:40 +08:00
    star 支持,挺好看的
    zcxey2911
        2
    zcxey2911  
       2022-07-05 12:58:20 +08:00
    棒,楼主前端技术又精进了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5665 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 03:25 · PVG 11:25 · LAX 19:25 · JFK 22:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.