如何用 Gatsby 和 Netlify 打造你的梦幻博客

卡拉先生
发布于 2020年08月17日 | 上次编辑:2020年08月17日

Powered by Gatsby
Powered by Gatsby

在创立卡拉搜索之初,我们就决定,卡拉的网站一定要与众不同。

首先,它需要内容丰富,提供有价值的信息,即使读者不是我们的用户,也可以受益。

其次它需要能秒开,不能臃肿。如果让用户看着 Chrome 进度条蜗牛爬,即使我们做的搜索引擎再快,用户也会觉得整个体验慢。

同时,我们相对缺乏前端经验,但又对定制性要求较高,因此需要框架相对简单,灵活度要允许我们慢慢迭代。

于是,我们尝试了很多开源的闭源的博客方案,比如 Wordpress,但最终放弃。

原因是 Wordpress 虽然极度灵活,但因为其年代久远,在 PHP 的包袱下已经裹得太厚,能给我们发挥的空间真的不多。

我们对博客的需求其实相对简单

  1. 需要能支持 Markdown 和 MDX,因为我们要展示很多代码
  2. 需要能协同,因为有多个作者需要写作
  3. 需要定制性比较强,不管是功能和外观上都需要可以用比较简单的 JS/CSS 直接定制
  4. 维护成本应该尽量小,毕竟我们是一家软件公司,而不是一家专门做媒体网站的公司

在一系列探索后,我们成功地实现了一键部署,以及全国范围内的 1 秒内首页加载。

本文中我们会介绍我们的经历,同时给出一个简单教程,帮助第一次搭建 Gatsby 的用户。本文对应的代码附在 GitHub 上:GitHub Gatsby 设置中文教程

卡拉搜索网站的全国测速
卡拉搜索网站的全国测速

卡拉搜索网站技术栈

经过反复迭代,目前网站的技术栈定型为

卡拉搜索网站技术栈
卡拉搜索网站技术栈

我们的所有博客文章都是由 Markdown 写成,而这些 Markdown 和整个网站直接存在了 GitHub 上。

每次有新文章被写出来后,我们会互相 review(用 GitHub Pull Request)。确定 review 没问题后,merge 到 master 分支。在 Netlify 中,我们设置了如果 master 分支有新改动,则会自动开始一次部署。

由于我们的文章即代码,而代码又在 Git 内,所以我们可以非常方便地管理内容,进行版本控制。

卡拉团队里每个人都可以熟练地使用 Git 和脑补 Markdown,因此我们并没有一个专门的 CMS(内容管理系统)。但如果你比较熟悉图形化界面,或者团队中的编辑、文案等不能直接用 Git 操作的话,可以考虑 Strapi,Ghost 之类非常成熟的 CMS,这些 CMS 与 Gatsby 的集成也非常好。

当 Netlify 部署完成后,生成的静态内容由阿里云全站加速分发,使用户在访问时速度足够快。

这篇文章里,我们开始介绍如何一步一步打造出卡拉的网站和博客的(我们的主网站和整个博客都是用 Gatsby 生成的),之后的文章中,我们会继续介绍如何与 Netlify 集成。同时我们给出一步步的例子和代码,方便你也可以开始搭建你的 Gatsby 网站。

如果对我们的后端搜索引擎技术栈感兴趣,也欢迎关注我们的技术博客或公众号(HiXieke),我们会持续更新前沿前后端文章。

尝试 Wordpress

最开始,我们尝试了 Wordpress

作为 Web 时代(包括现在)的 CMS 霸主,Wordpress 的确可以实现任何你能想到的功能。

但有很多功能,依靠的是不断地添加插件,而插件的质量非常良莠不齐。我们尝试的过程中,插件间出现各种兼容问题,当你把一个问题修复好的时候,另一个又会蹦出来。

同时, Wordpress 需要跑起来一个 PHP 服务器。我们本身对 PHP 没有意见,但跑起一个额外的 Server 就是一个额外的负担,同时团队中并没有人对 PHP 非常熟悉。也正因为此,我们已经写了一部分 JavaScript 和 Python 的 SDK,但一直还没有写 PHP的

对我们来说,最好的网站就是一系列静态页面,直接扔 CDN 上,省去维护服务器的烦恼,因此我们放弃了 Wordpress 的方案。

Gatsby 是什么

其实很早我们就听说过 Gatsby,以及其它一系列 Web 框架、CMS 的新秀,比如 Hexo 等等。

Gatsby 是一个静态网站生成框架。你可以用 Markdown 或其它语言写内容、页面等,Gatsby 会对应给你生成一个静态网站。之后你可以将静态网站直接放在 CDN 上,省去一个服务器成本。同时结合现代 CI 系统(比如 GitHub Actions),你还可以实现 push 到 github 直接更新全站的方便工作流。

Gatsby 本身设计是

  • React 作为逻辑和展示层
  • GraphQL 作为数据层

因此,在 Gatsby 上开发插件也相对简单。

顺便说一下,我们也计划之后开发一个在 Gatsby 和 Hexo 上的全站搜索插件,只要一键接入就可以实现网站的全站搜索。

为什么选择 Gatsby

Gatsby 网站
Gatsby 网站

我们选择 Gatsby 的原因其实也非常简单

  1. 它是用我们熟悉的技术栈构建的,React + JS 因此出了问题不会慌
  2. 它的分块做得非常好,用 GraphQL 将数据层和逻辑层非常干净地分开,这样对于维护网站的用户和只贡献内容的同事来说都很方便
  3. 社区极大,而且正在非常疯狂地增长,所以需要几乎任何功能都可以非常容易地找到你需要的插件
  4. 静态网站与 CI 结合,可以非常方便地更新部署,方便维护

Gatsby 的社区极大,目前有 2000 多个你能想到的各种插件。

一线公司,比如 Airbnb, Spotify, PayPal 甚至 React 和 TypeScript 官方的站点,都用了 Gatsby,因此用户基数和质量可以保证社区健康循环,这也是我们考虑 Gatsby 的一个重要原因。

十分钟打造你的第一个 Gatsby 网站

要开始构建一个 Gatsby 网站真的非常简单,请照以下步骤执行。本文的代码也放在 GitHub 上,欢迎参考,觉得有用的话也请帮忙加星: Gatsby 设置代码

1. 确认本地安装了 npm

首先确保你的本地环境安装了 npm

如果你在 Mac/Linux 环境下运行的话请运行

npm -v

如果你本地已经安装了 npm 那么本命令会输出 npm 的版本。

➜  gatsby git:(exie/add-gatsby) ✗ npm -v
6.14.4

如果没有打印出来版本,也就是还没有安装 npm 的话,请参考 install npm

2. 安装 Gatsby 命令行工具

请运行

npm install -g gatsby-cli

➜  gatsby git:(exie/add-gatsby) ✗ npm install -g gatsby-cli
...以下省略

这条命令会在全局安装 gatsby 的命令行工具。安装完后重启终端,应该就可以找到 gatsby 这个命令行了。

请运行 gatsby -v 确认已经安装好,应该输出类似

➜  gatsby git:(exie/add-gatsby) ✗ gatsby -v
Gatsby CLI version: 2.11.3

3. 用 Gatsby 命令行创建你的 Gatsby 网站

请到一个你准备放置你的博客的目录,然后用以下命令开始生成你的第一个 Gatsby 博客

gatsby new my-blog https://github.com/narative/gatsby-starter-novela

注意,这里的第三个参数,也就是这个网址的含义是模板地址。Gatsby 本身不提供太多的样式选择,但有很多开发者们会主动地贡献自己的模板,比如说这里的 https://github.com/narative/gatsby-starter-novela 就是我很喜欢的一个样式。

其它公开的模板可以在 https://www.gatsbyjs.com/starters/ 找到。如果你有满意的模板,也可以贡献到这里。

4. 运行你的网站

进入刚创建的 my-blog 文件夹

然后运行 gatsby develop

这个命令会跑起来一个本地的 server,主要作用是让你可以在本地实时更新和开发你的网站。运行之后,它会默认在本地的 8000 端口跑起来一个 service,然后在浏览器访问 http://localhost:8000/ 的话就可以看到你的网站了

跑起来的 Gatsby 网站
跑起来的 Gatsby 网站

至此,你就可以在 content/posts/ 中开始添加你的博客文章。

注意,这里的路径都是可以配置的,慢慢熟悉 Gatsby 之后,你可以实现任何用其它框架可以实现的功能。

注:Gatsby 本身的教程绝对已经是非常上乘的了,如果读英文顺畅的话推荐直接阅读:Get Started

5. 部署你的网站

运行 gatsby build ,会让 Gatsby 给你生成一个优化后的网站(比如说,最小化了 css/js,优化了加载速度等)。再用 gatsby serve 可以在本地测试优化化的网站访问的效果。

在确认了网站内容没问题后,可以将 public 文件夹中的内容放到 CDN 上。当然,这一切都可以一键搞定,下一章中我们介绍如何用 Netlify 实现一键部署。

集成 Netlify

在可以把博客跑起来之后,我们需要将代码放到 GitHub Repo 上,然后借助 GitHub Actions 与 Netlify 进行集成。

配置好之后,就可以实现每次 master 分支有更新时,自动部署网站到 Netlify 上。

在之后的文章中,我们会详细介绍如何将你的 Gatsby 网站配置在 Netlify 上,敬请关注。

总结

这篇文章中,我们介绍了卡拉搜索的网站技术栈,并给出了一步步的教程方便你可以搭建起你的第一个技术博客。在之后的文章中,我们会介绍如何跟 Netlify 集成,做到网站的一键部署。

要学习更多的前沿前后端技术,请关注我们的技术博客

如果你需要站内搜索或App内搜索功能(不管是不是在用 Gatsby),可以免费试用卡拉搜索,5 分钟就可以定制好搜索功能,为你的用户提供极速的搜索体验,免掉 Elastic Search 麻烦的维护和设置

想要阅读更多技术文章和卡拉搜索的创业经历?
与 1893 位读者一起,订阅我们的邮件列表吧

为你推荐

友情链接更新日志© 2020, 卡拉搜索, Built with ❤️ in San Francisco + Beijing

京ICP备15049164号-3