能够前去我的博客浏览：https://ssshooter.com/2019-02…
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 接口提交文件，觉得打开了新世界的大门。配合上语雀的文章宣布推送绝配，因而有了这么个功用专题。
懒
「我很懒，果真照样不想本身着手」
「我仔细看完了，都看懂了，然则真的没时候做呀」
好吧…那我照样供应一个拿来即用的渠道吧？我看网上也有许多 clone 即用的博客，然则总以为有点违犯我写这个教程的初心😂。所以我最少愿望人人是看完文章再 clone，这么做最少照样有才能「自定义」你的博客。
以下是 clone 即用的要领：
clone 此堆栈 -> https://github.com/ssshooter/…
clone 后的默许款式是如许的，也是比较简朴的，功用相较于官方的 starter 加入了上述的：分页功用和标签功用，而且供应了一个简朴的图库，然则批评体系（代码没有删除只是解释了）和语雀宣布体系当然是没有接通的，须要的话请手动完成~
设置后布置到 netlify 即可，更新文章时在 /src/pages/ 文件夹增添文章然后推送到 GitHub 就会直接更新。
将来
本系列依旧会继承更新，UI 肯定会继承调解，功用肯定会增添。想要对峙写 blog，要先喜好本身的 blog，专心增添新功用吧！
