创造属于自己的静态博客

可以前往我的博客阅读&＃xff1a;https://ssshooter.com/2019-02...

0 前言

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

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

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

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

前置知识

Javascript
React
graphQL&＃xff08;次要&＃xff0c;即时上手也基本能看懂&＃xff09;

优势

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

PS. 本教程涉及到的服务都是免费的&＃xff0c;穷苦学生党莫慌&＃xff08;不过域名还是没有免费的&＃xff09;

1 关键文件

全文链接

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

2 实现分页

全文链接

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

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

3 样式调整

全文链接

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

4 标签系统

全文链接

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

5 博客上线

全文链接

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

6 评论系统

全文链接

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

7 文章目录

全文链接

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

EX 使用语雀发布到博客

全文链接

前置知识点&＃xff1a;使用 Github API 更新仓库

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

懒

「我很懒&＃xff0c;果然还是不想自己动手」

「我认真看完了&＃xff0c;都看懂了&＃xff0c;但是真的没时间做呀」

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

以下是 clone 即用的方法&＃xff1a;

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

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

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