创造属于自己的静态博客

Channe 发布于2019-08-23 15:05 / 2279人阅读

摘要：所以自己定值博客，或许可以让自己坚持更新下去。配合上语雀的文章发布推送绝配，于是有了这么个功能专题。

可以前往我的博客阅读：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 API 更新仓库

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

懒

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

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

好吧...那我还是提供一个拿来即用的渠道吧？我看网上也有很多 clone 即用的博客，但是总觉得有点违背我写这个教程的初心

云服务器 GPU云服务器如何搭建属于自己的网站赚钱如何宣传自己的博客搭建自己的博客网站怎样自己创造一个网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101493.html

静态分析安全测试（SAST）优缺点探析

摘要：许多公司都投资于或之类的静态分析安全测试，解决方案。用静态分析方法确保编程安全一书详细描述了静态分析技术的基本原理。博士将静态分析无法找出的诸多安全问题归为瑕疵，而非程序错误。静态分析安全测试（SAST）是指不运行被测程序本身，仅通过分析或者检查源程序的语法、结构、过程、接口等来检查程序的正确性，那么采用静分析安全测试的方法有什么优缺点呢，且让小编给你说道说道。许多公司都投资于 H...

codeKK 2019-06-21 16:27 评论0 收藏0
技术存档：建站（一）

摘要：自建主要花费在购买云服务器上和静态资源托管上，剩余工作一力承担。写这系列文章的初衷是：对自己知识面广度和深度的确定，并以此调整后续的发展和学习方向。希望能达到温故而知新的效果。选择从建站入手，是因为这个是最常见的要求。对于公司而言，网站是展示公司主旨、业务、沟通方式、宣传营销的必选方案，一个符合公司形象的高质量官网，必然能让客户留下良好的第一印象。，对个人而言，博客是表达其特有的思...

chnmagnus 2019-05-29 17:52 评论0 收藏0