如何用 Gatsby 打造你的完美博客 - 初始设置秒开和一键部署

2020-08-17 08:23:15 +08:00
 KalaSearch

Gatsby 是一个在 React 基础上的静态网站生成框架。你不用有 React 的基础,用命令行稍微配置,几分钟内就可以搭好你的静态网站。

近两年来 Gatsby 发展飞速,一线公司,比如 Airbnb, PayPal 甚至 React 和 TypeScript 官方的站点,都用了 Gatsby 搭建了一系列网站。也正是因为有这样良好的社区,整个工具的发展势态越来越好

这篇文章介绍怎样用 Gatsby 搭建你的第一个静态博客,以及我们的实战经验。

一开始我们尝试了 Wordpress,发现不光重,而且需要额外维护一个服务器,非常耗费精力。外加 PHP 本身也不是我们的强项(团队中没有一个人熟悉),所以不得不放弃。直到接受了 GatsbyJS,被它的轻量吸引。

全文请戳 => 如何用 Gatsby 打造你的完美博客

15866 次点击
所在节点    程序员
83 条回复
way2explore2
2020-08-17 15:34:32 +08:00
tim.bai.uno 友情链接交换
xcatliu
2020-08-17 15:38:41 +08:00
@AlynxZhou 为啥会加载一个巨大的 JS ?
nnnToTnnn
2020-08-17 15:47:36 +08:00
@xcatliu 他估计单页面开发的少,现在单页面基本上都能拆分 js 。 甚至可以将路由直接渲染成为多个 html 。 当然目前看到的渲染成 html 好像不支持嵌套路由。
rf99wSiT6IxH1Z23
2020-08-17 15:47:44 +08:00
官网文档不香吗? gatsby 和 next.js 早折腾了,没意思
nnnToTnnn
2020-08-17 15:49:10 +08:00
@xcatliu

```
要么点了一个链接没反应过一会突然把内容蹦出来……
```

这个也是路由的 loading 没有做好,甚至可能就大概没做 loading 所以才会突然蹦的出来。
AlynxZhou
2020-08-17 15:52:53 +08:00
@nnnToTnnn 开发的少又不是用的少,能不能是一回事,开发者做不做是另一回事,遇到一个不做的就干着急没办法了
KalaSearch
2020-08-17 15:59:40 +08:00
@smgui 抱歉没有用过 gridsome,不好比较。看社区的话 gatsby 大不少: https://stackshare.io/stackups/gatsbyjs-vs-gridsome-vs-jekyll
peterjose
2020-08-17 20:52:15 +08:00
@nnnToTnnn 但是你核心的 vendor 拆不掉吧。。拆的只是每个页面逻辑而已 然后这种博客每个页面根本没啥 js 或许就没有 Js 路由按需加载没有意义
huhexian
2020-08-17 23:42:26 +08:00
@KalaSearch 我的博客是用腾讯云服务器和 WordPress 搭建的:www.huhexian.com
tankren
2020-08-18 00:25:21 +08:00
博客轮子那么多 还是 WordPress
CBS
2020-08-18 01:03:04 +08:00
游戏都结束了,我还不知道怎么新建文章…
KalaSearch
2020-08-18 01:50:44 +08:00
@CBS 啥游戏?
CBS
2020-08-18 02:15:24 +08:00
@KalaSearch 找到了…原来要严格按照模板要求新建文章。
KalaSearch
2020-08-18 02:49:30 +08:00
@CBS 嗯,可以换个模板试试。Gatsby 的模板市场还是很多模板可用的
codermagefox
2020-08-18 07:32:22 +08:00
正在弄 Gatsby,确实巨 TM 香,本来一个静态站起来起码得 2-3 天,用 Gatsby5 个小时以内全站就搞定了.

主要是所有东西都可以靠 plugin 引入,配置基本不用想,复制粘贴完事儿.

当然现在也有缺点,就是有些包下不下来,挺恶心的,不知道哪个依赖被墙掉了.
leimao
2020-08-18 08:12:01 +08:00
ssshooter
2020-08-18 08:35:43 +08:00
https://ssshooter.com/

这边用的也是 Gatsby
KalaSearch
2020-08-18 09:02:10 +08:00
@leimao
@ssshooter

加好了,部署完大概 5 分钟生效~感谢!
也请帮忙加上我们的,锚文本可以用“卡拉搜索”,简介可以用"elastic search 替代方案"
leimao
2020-08-18 09:42:31 +08:00
@KalaSearch
在 Followings 的页面里放了一个链接。
https://leimao.github.io/miscellaneous/followings/
不大会做网站,所以粗糙了一些。我的网站 99%流量都来自非中国国家,您可以考虑启用英文博客。
nnnToTnnn
2020-08-18 09:56:29 +08:00
@peterjose 博客看是用什么技术做,一般现在的博客大部分都是 markdown 来进行渲染。如果要进行 js 拆分也不是不可以。无非就是以前一个很大的 js,现在变成多个很小的 js, 虽然没有意义,但是也是可以拆分。css 拆分是为了解决 IE 的 css 规则的限制,js 的拆分一般是为了按需加载。其实也是可以将偌大的 js 来进行拆分的, JS 的 AST 有很多库很方便的做这些事情

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/698807

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX