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

Gatsby 静态博客搭建全过程

  •  
  •   ssshooter ·
    ssshooter · 2019-02-11 16:03:09 +08:00 · 4313 次点击
    这是一个创建于 2110 天前的主题,其中的信息可能已经有所发展或是发生改变。

    新的一年不(再再再再)开个博客吗?

    0 前言

    本文并不是从 0 开始使用 gatsby.js 搭建博客,starter 使用的是 gatsby-starter-blog。使用 gatsby-starter-blog 可以大量节省项目搭建时间,直接得到一个最简单的博客模版,这个模板的缺点是功能少,但是反过来说优点是有较高的自由度。

    根据下面整个流程做好的静态博客大概长这个样: https://ssshooter.com/tag/gatsby

    我从最简单的博客模板开始添加功能的原因,就是可以让自己更熟悉整个博客的构造,自己可以随心所欲地添加功能,这才是真正的自己的博客。以前用过 Wordpress 和 Hexo,可能就是因为下载下来模版就太完善了,根本不想自己研究里面的实现,然后模板不加修改样式就与其他人一摸一样,变得很没特色,所以我也失去的更新的欲望。所以自己定值博客,或许可以让自己坚持更新下去。

    整个流程最主要是前面 5 步,后面的 3 步都是非必要的,其他附加功能后续可能还会有更新。这篇文章的作用是一个导航,下面只会简单概括文章内容,详细内容请点全文链接。你可以根据你的需要一步一步进行,也可以跳过熟悉的步骤。

    前置知识

    • JavaScript
    • React
    • graphQL (次要,即时上手也基本能看懂)

    优势

    • 因为提前生成为静态文件、不涉及到数据库,所以静态相对安全、稳定、高速
    • 无后端服务,无后端相关经验也能做好(如果不做下面的语雀推送的话)
    • 搜索引擎易抓取,搜索功能可以直接借用搜索引擎(搜索时添加 site:
    • 涉及到的知识点比较广,对开发人员开放眼界也是极好的

    PS. 本教程涉及到的服务都是免费的,穷苦学生党莫慌(不过域名还是没有免费的)

    1 关键文件

    全文链接

    这一部分主要介绍模板的下载、项目结构及其一些关键文件。主要会提到 gatsby-node.js(页面生成函数所在文件)、/src/templates/blog-post.js(生成页面所用模板)以及 gatsby-config.js( Gatsby 的配置文件)。

    2 实现分页

    全文链接

    现成模板缺少博客最重要的功能——分页。因为分页实现十分重要,并且可以借此理解页面生成原理,所以用自己实现分页来入门 Gatsby 我觉得是个不错的选择。

    实现的关键在于模板文件的修改graphQL 查询的编写。(本项目所需的 graphQL 要求不高,但是对此感兴趣的话可以深入了解一下这个查询语言,中文文档在此)

    3 样式调整

    全文链接

    比较简单的一节,包括修复代码高亮覆盖主题样式两部分。注意一下使用全局 CSS 的 bug 就 OK 了。

    4 标签系统

    全文链接

    标签系统实现了标签汇总页和各个标签的文章列表页,是 graphQL 查询实践的加强版,原理跟分页是一样的,不过复杂一点看起来有一丁点望而生畏。

    5 博客上线

    全文链接

    网站上线的步骤,包括把项目部署到 netlify 和自定义域名设置相关问题与解释。

    6 评论系统

    全文链接

    首先是因为几个出色的社会化评论服务网站都已经被墙了,然后是自己有一点对数据的占有欲,所以这一节甚至要自己搞一个评论系统。不过借助现成的 staticman,这一步也不会太麻烦。

    7 文章目录

    全文链接

    良好的文章页面必不可少地需要一个文章导航,对不起!由于难度的误判,这个功能虽然来晚了,但是绝对不会缺席!使用 gatsby-transformer-remark 轻松解决问题~

    EX 使用语雀发布到博客

    全文链接

    前置知识点:使用 Github API 更新仓库

    比较好玩的一节,主要好玩在使用 GitHub 接口提交文件,感觉打开了新世界的大门。配合上语雀的文章发布推送绝配,于是有了这么个功能专题。

    「我很懒,果然还是不想自己动手」

    「我认真看完了,都看懂了,但是真的没时间做呀」

    好吧...那我还是提供一个拿来即用的渠道吧?我看网上也有很多 clone 即用的博客,但是总觉得有点违背我写这个教程的初心😂。所以我至少希望大家是看完文章再 clone,这么做起码还是有能力「自定义」你的博客。

    以下是 clone 即用的方法:

    clone 此仓库 -> https://github.com/ssshooter/gatsby-blog-starter

    clone 后的默认样式是这样的,也是比较简单的,功能相较于官方的 starter 加入了上述的:分页功能和标签功能,并且提供了一个简单的图库,但是评论系统(代码没有删除只是注释了)和语雀发布系统当然是没有接通的,需要的话请手动实现~

    配置后部署到 netlify 即可,更新文章时在 /src/pages/ 文件夹添加文章然后推送到 GitHub 就会直接更新。

    未来

    本系列依然会继续更新,UI 肯定会继续调整,功能肯定会增加。想要坚持写 blog,要先喜欢自己的 blog,用心添加新功能吧!

    第 1 条附言  ·  2019-02-14 22:21:13 +08:00
    3 条回复    2019-05-08 20:15:22 +08:00
    ipwx
        1
    ipwx  
       2019-02-11 16:18:10 +08:00
    博客系统最难的不是博客系统本身,而是主题。。。。

    我只能说,楼主加油吧。。。
    ssshooter
        2
    ssshooter  
    OP
       2019-02-11 16:21:06 +08:00
    @ipwx 明白,在加油 😢
    heshanfu
        3
    heshanfu  
       2019-05-08 20:15:22 +08:00
    看看这个,不错 Gatsby 静态博客的集合。https://gatsbyawesome.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   991 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 20:19 · PVG 04:19 · LAX 12:19 · JFK 15:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.