创造属于本身的静态博客

时间 2019-12-13

原文原文链接

能够前往个人博客阅读：https://ssshooter.com/2019-02...node

0 前言

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

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

我从最简单的博客模板开始添加功能的缘由，就是可让本身更熟悉整个博客的构造，本身能够为所欲为地添加功能，这才是真正的本身的博客。之前用过 Wordpress 和 Hexo，可能就是由于下载下来模版就太完善了，根本不想本身研究里面的实现，而后模板不加修改样式就与其余人一摸同样，变得很没特点，因此我也失去的更新的欲望。因此本身定值博客，或许可让本身坚持更新下去。数据库

整个流程最主要是前面 5 步，后面的 3 步都是非必要的，其余附加功能后续可能还会有更新。这篇文章的做用是一个导航，下面只会简单归纳文章内容，详细内容请点全文连接。你能够根据你的须要一步一步进行，也能够跳过熟悉的步骤。segmentfault

前置知识

JavaScript
React
graphQL（次要，即时上手也基本能看懂）

优点

由于提早生成为静态文件、不涉及到数据库，因此静态相对安全、稳定、高速
无后端服务，无后端相关经验也能作好（若是不作下面的语雀推送的话）
搜索引擎易抓取，搜索功能能够直接借用搜索引擎（搜索时添加 site:）
涉及到的知识点比较广，对开发人员开放眼界也是极好的

PS. 本教程涉及到的服务都是免费的，穷苦学生党莫慌（不过域名仍是没有免费的）

1 关键文件

全文连接后端

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

2 实现分页

全文连接ssh

现成模板缺乏博客最重要的功能——分页。由于分页实现十分重要，而且能够借此理解页面生成原理，因此用本身实现分页来入门 Gatsby 我以为是个不错的选择。函数

实现的关键在于模板文件的修改和 graphQL 查询的编写。（本项目所需的 graphQL 要求不高，可是对此感兴趣的话能够深刻了解一下这个查询语言，中文文档在此）post

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/...

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

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

将来

本系列依然会继续更新，UI 确定会继续调整，功能确定会增长。想要坚持写 blog，要先喜欢本身的 blog，用心添加新功能吧！