如何用 Gatsby 打造你的完美博客 - 初始设置秒开和一键部署 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
KalaSearch
V2EX    程序员

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

  •  1  
  •   KalaSearch 2020-08-17 08:23:15 +08:00 16515 次点击
    这是一个创建于 1891 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

    gatsby

    第 1 条附言    2020-08-17 09:00:57 +08:00
    附上这篇文章对应的 git repo: https://github.com/Kalasearch/tutorials/tree/master/gatsby/gatsby-blog-setup-tutorial-with-netlify

    如果觉得有帮助的话请帮忙点赞
    第 2 条附言    2020-08-19 06:50:07 +08:00

    教程 GitHub 链接改到了 => https://github.com/Kalasearch/gatsby-tutorials

    83 条回复    2020-09-24 08:51:02 +08:00
    KalaSearch
        1
    KalaSearch  
    OP
       2020-08-17 08:27:57 +08:00   1
    如果希望换友链的话,请告诉我锚文本和你的博客链接。

    大家的博客都建在哪里?也可以跟大家分享一下
    xiongsa18
        2
    xiongsa18  
       2020-08-17 08:48:05 +08:00
    运行你的网站里命令错了。gatsby develop
    KalaSearch
        3
    KalaSearch  
    OP
       2020-08-17 08:49:24 +08:00
    @xiongsa18 是不是没有 npm install?

    错误信息是什么呢
    xiongsa18
        4
    xiongsa18  
       2020-08-17 09:01:45 +08:00   1
    @KalaSearch 博文里错了
    KalaSearch
        5
    KalaSearch  
    OP
       2020-08-17 09:11:01 +08:00
    @xiongsa18 啊感谢!改过来了,一会部署完应该就对了 <3
    iConnect
        6
    iConnect  
       2020-08-17 09:18:13 +08:00 via Android
    有什么可以用的评论插件吗?不能互动的博客,和笔记区别不大
    KalaSearch
        7
    KalaSearch  
    OP
       2020-08-17 09:20:07 +08:00
    @iConnect 市面上的都有,Disqus, Commento, Facebook Comment, Gitalk 等等

    https://www.gatsbyjs.com/docs/adding-comments/
    raptor
        8
    raptor  
       2020-08-17 09:29:48 +08:00   1
    静态我只用 HUGO,JS 做的东西一堆依赖,烦得一笔。
    robinch
        9
    robinch  
       2020-08-17 09:52:50 +08:00
    @iConnect Valine
    ericgui
        10
    ericgui  
       2020-08-17 10:14:53 +08:00   1
    Gatsby 用 GraphQL
    实在受不了

    虽然我并不反对 GraphQL,但总觉不太靠谱
    sphawkcn
        11
    sphawkcn  
       2020-08-17 10:40:02 +08:00
    @ericgui #10 用 GraphQL 是优势啊:)
    smgui
        12
    smgui  
       2020-08-17 10:40:24 +08:00
    我刚用上 gridsome,感觉也还行?能说说 Gatsby 比 gridsome 强在哪里吗?或者为什么没有考虑 gridsome ?
    meinjoy
        13
    meinjoy  
       2020-08-17 11:11:48 +08:00 via iPhone
    gatsby hugo hexo 生成静态哪个性能比较高?
    MrGba2z
        14
    MrGba2z  
       2020-08-17 11:34:18 +08:00   4
    我缺的是博客轮子么? ::狗头::
    timothyye
        15
    timothyye  
       2020-08-17 11:53:45 +08:00
    感觉最近那个 Rust 的静态 blog 工具挺香 https://github.com/getzola/zola
    Cielsky
        16
    Cielsky  
       2020-08-17 12:02:57 +08:00 via Android
    @meinjoy Hugo 比 hexo 高,另一个就不知道了,我都是用持续集成自己生成网站文件,push 一下就可以了,也不用在意时间了
    sphawkcn
        17
    sphawkcn  
       2020-08-17 12:07:08 +08:00
    有个问题,国内 CDN 都需要域名备案,你用阿里云的 CDN,如果你的域名指向 Netlify,不是指向阿里云的服务器,是怎么备案成功的?
    tozp
        18
    tozp  
       2020-08-17 12:21:28 +08:00
    直接在 Bloger 上搭不就完了嘛,为啥总有这么多人喜欢重复造轮子。什么网络、带宽、主机、备份、统计、安全、数据库、框架、备案等等全都不用自己搞了,不香吗? ie9.org 看看国内能不能访问
    isukkaw
        19
    isukkaw  
       2020-08-17 14:41:17 +08:00   1
    这就是贵司官网的 favicon 是 Gatsby Logo 的借口?
    AlynxZhou
        20
    AlynxZhou  
       2020-08-17 15:03:38 +08:00   1
    单页应用+展示内容+优化的不好简直就是访问灾难,用户想尽快看到文件内容和加载进度,但是单页应用经常要么等着加载一个巨大的 JS 要么点了一个链接没反应过一会突然把内容蹦出来……
    way2explore2
        21
    way2explore2  
       2020-08-17 15:34:32 +08:00
    tim.bai.uno 友情链接交换
    xcatliu
        22
    xcatliu  
       2020-08-17 15:38:41 +08:00
    @AlynxZhou 为啥会加载一个巨大的 JS ?
    nnnToTnnn
        23
    nnnToTnnn  
       2020-08-17 15:47:36 +08:00
    @xcatliu 他估计单页面开发的少,现在单页面基本上都能拆分 js 。 甚至可以将路由直接渲染成为多个 html 。 当然目前看到的渲染成 html 好像不支持嵌套路由。
    rf99wSiT6IxH1Z23
        24
    rf99wSiT6IxH1Z23  
       2020-08-17 15:47:44 +08:00
    官网文档不香吗? gatsby 和 next.js 早折腾了,没意思
    nnnToTnnn
        25
    nnnToTnnn  
       2020-08-17 15:49:10 +08:00
    @xcatliu

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

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

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

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

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

    加好了,部署完大概 5 分钟生效~感谢!
    也请帮忙加上我们的,锚文本可以用“卡拉搜索”,简介可以用"elastic search 替代方案"
    leimao
        39
    leimao  
       2020-08-18 09:42:31 +08:00
    @KalaSearch
    在 Followings 的页面里放了一个链接。
    https://leimao.github.io/miscellaneous/followings/
    不大会做网站,所以粗糙了一些。我的网站 99%流量都来自非中国国家,您可以考虑启用英文博客。
    nnnToTnnn
        40
    nnnToTnnn  
       2020-08-18 09:56:29 +08:00
    @peterjose 博客看是用什么技术做,一般现在的博客大部分都是 markdown 来进行渲染。如果要进行 js 拆分也不是不可以。无非就是以前一个很大的 js,现在变成多个很小的 js, 虽然没有意义,但是也是可以拆分。css 拆分是为了解决 IE 的 css 规则的限制,js 的拆分一般是为了按需加载。其实也是可以将偌大的 js 来进行拆分的, JS 的 AST 有很多库很方便的做这些事情
    ethusdt
        41
    ethusdt  
       2020-08-18 11:47:04 +08:00
    2 年前 Calpa 推过 Gatsby, 现在我的博客还是 Gatsby 搭建的, 好久没有 Calpa 的消息了 ==
    KalaSearch
        42
    KalaSearch  
    OP
       2020-08-18 14:30:05 +08:00
    @ssshooter ping
    KalaSearch
        43
    KalaSearch  
    OP
       2020-08-18 14:30:15 +08:00
    @FaiChou 什么是 Calpa?
    ethusdt
        44
    ethusdt  
       2020-08-18 14:33:18 +08:00
    Austaras
        45
    Austaras  
       2020-08-18 14:35:03 +08:00
    https://github.com/Austaras/gatsby-starter-mirai 借地方安利一下我的 gatsby 主题, 仿的 hexo next
    baoshuo
        46
    baoshuo  
       2020-08-18 17:03:50 +08:00   1
    @KalaSearch #1
    我的博客 aHR0cHM6Ly9iYW9zaHVvLmJsb2c= 用的 Gridea 自己魔改的 Pure 主题
    我的主页 aHR0cHM6Ly9iYW9zaHVvLnJlbg== 改的 Github Pages 的主题
    我的跳转页(转到主页) aHR0cHM6Ly9iYW9zaHVvLm1l 找了个 gif,配的 cf workers
    Leon6868
        47
    Leon6868  
       2020-08-18 17:08:09 +08:00
    你们的网址为什么不允许国外 IP 访问,直接报 404 ?
    ssshooter
        48
    ssshooter  
       2020-08-18 17:59:53 +08:00
    @KalaSearch 久等啦!已添加,部署中!
    creanme
        49
    creanme  
       2020-08-18 21:24:52 +08:00
    Not Found
    KalaSearch
        50
    KalaSearch  
    OP
       2020-08-19 00:08:56 +08:00
    @Leon6868 可能是 CDN 没刷,能否再帮忙试一下 ?


    @ssshooter 感谢

    @Leon6868 可能是 CDN 没来得及刷
    evilStart
        51
    evilStart  
       2020-08-19 08:24:03 +08:00 via Android
    楼里有这么多技术搭建博客,自己写了几篇文章?
    Leon6868
        52
    Leon6868  
       2020-08-19 08:39:13 +08:00
    @KalaSearch
    还是不行,kalasearch.cn 也不可以访问,报错为“Not Found”
    Leon6868
        53
    Leon6868  
       2020-08-19 08:40:54 +08:00
    @KalaSearch IP 是秘鲁的
    atonku
        54
    atonku  
       2020-08-19 09:04:17 +08:00
    不要置顶了吧
    xubiaosunny
        55
    xubiaosunny  
       2020-08-19 10:13:08 +08:00
    jekyll + github 不香么?

    https://blog.xubiaosunny.online/
    KalaSearch
        56
    KalaSearch  
    OP
       2020-08-19 10:59:26 +08:00
    @Leon6868 能否帮忙试下关浏览器缓存,隐身模式再试一次?
    towave
        57
    towave  
       2020-08-19 11:09:43 +08:00
    我也是 gatsby 搭建的,欢迎访问
    towave
        58
    towave  
       2020-08-19 11:10:02 +08:00
    Leon6868
        59
    Leon6868  
       2020-08-19 12:09:27 +08:00
    @KalaSearch 隐身模式没问题了。不过这样体验不算好啊
    KalaSearch
        60
    KalaSearch  
    OP
       2020-08-19 12:20:22 +08:00
    @Leon6868 是的,有点奇怪。能否加我微信请你帮下忙?微信号就是我 id
    Leon6868
        61
    Leon6868  
       2020-08-19 12:36:11 +08:00
    @KalaSearch 有 QQ 吗,一般不用微信
    JiangTianZheng
        62
    JiangTianZheng  
       2020-08-19 13:15:01 +08:00
    @sphawkcn 域名备案和网站本身 host 在什么地方没啥关系。我的博客 host 在 Netlify 一样给过。关键是域名要放在国内域名服务商。CDN 也是同理。
    POPOEVER
        63
    POPOEVER  
       2020-08-19 13:19:23 +08:00
    两年多前弄的了,SSG 特别适合做知识类小站点 https://hcv.app
    9Tpsaajk9rdBKH2U
        64
    9Tpsaajk9rdBKH2U  
       2020-08-19 14:31:01 +08:00 via iPhone
    回忆中的明天
    https://ichochy.com
    Hugo+Github pages
    BasIrs
        65
    BasIrs  
       2020-08-19 14:41:38 +08:00
    如果我没有服务器可以搭建自己的博客吗
    asuraa
        66
    asuraa  
       2020-08-19 14:50:56 +08:00
    我之前用的 wordpress 昨晚折腾了下 换了 hugo
    配置了 github action 自动构建 发布到 github page 和国内的静态站点上面 国外用 cloudflare 国内用纯 cdn 的静态站点
    体验还不错

    https://luodaoyi.com
    Te11UA
        67
    Te11UA  
       2020-08-19 14:59:12 +08:00
    @luodaoyi 活捉大佬一枚!请教下 actions 咋配的呢?
    stebest
        68
    stebest  
       2020-08-19 16:38:49 +08:00
    阁子
    https://newdee.cf
    个人博客
    欢迎友链
    sphawkcn
        69
    sphawkcn  
       2020-08-19 17:11:25 +08:00
    @JiangTianZheng #62 看到你的回复真的是很激动,多年困扰我的问题难道有解了?如果域名备案和网站本身 host 在什么地方没啥关系那就真的太好了。

    我想请问下,你的域名在放在哪里的?

    我是放在阿里云的,在阿里云给域名备案的时候,有这样一个环节,见下图:

    ![snipaste20200819_170653.png]( https://i.loli.net/2020/08/19/q19hPSR2kLKWuor.png)

    这个 [产品类型] 是红色标记必选项,只有你在阿里云买了支持备案的服务器产品,这里下拉菜单才会出现可选择项,换句话说,就是必须得先买阿里云的服务器。
    Tink
        70
    Tink  
    PRO
       2020-08-19 23:17:38 +08:00 via Android
    @sphawkcn 随便买一个就行了
    OfficialYoungX
        71
    OfficialYoungX  
       2020-08-20 01:09:22 +08:00
    有一说一,Netlify,国内 CDN 非常慢,慢过 github 的那种。
    POPOEVER
        72
    POPOEVER  
       2020-08-20 03:58:15 +08:00
    @BasIrs netlify 就是不需要你自己有服务器,授权 repo access,他帮你去 pull 回来自动 build 。此外还有像 vercel (就是以前的 zeit )也可以 host 静态生成站点
    asuraa
        73
    asuraa  
       2020-08-20 06:19:26 +08:00 via iPhone
    @Te11UA 就用 hugo 编译了下把 public 下的文件 push 到 github 上 还有国内的静态站点上
    loveyouluobin
        74
    loveyouluobin  
       2020-08-20 08:33:50 +08:00
    好东西,不用数据库,直接用.MD 格式的博客是以后的方向
    Tianqi
        75
    Tianqi  
       2020-08-20 11:48:42 +08:00
    @loveyouluobin #74 村通网?
    JiangTianZheng
        76
    JiangTianZheng  
       2020-08-28 12:36:21 +08:00
    @sphawkcn 工作原因经常备案,可以说见证了阿里备案系统如何一点点复杂起来的,对阿里云流程再熟悉不过了。

    这个选项是因为不买阿里云的服务,阿里云不会免费帮你备案的。

    我一般的操作是买 轻量应用服务器 3 个月,大概 300 块不到。(这是最便宜获得备案编号的方法)

    即可获得用于备案的编号,把编号填入任意需要备案的账号即可获得备案权限。

    一个备案编号最多备案 5 个域名。

    域名必须 host 在阿里云
    sphawkcn
        77
    sphawkcn  
       2020-08-28 12:48:55 +08:00
    @JiangTianZheng #76 感谢指点。你说的这个最便宜的方法也是我正在用的方法。

    但是这种方法需要长期维持购买一台轻量应用服务器(不仅仅是 3 个月)。据说如果把服务器停掉,IP 取消后,会被随机抽查到域名与 IP 不对应,就会掉备案。

    另外,如果将域名指向国外服务器,也会出现上述域名与 IP 不对应的情况,也有可能会掉备案。

    当然,以上掉备案情况,我没有测试过,我是在网上看到有网友提到这种情况,不知道对不对。
    wsly47
        78
    wsly47  
       2020-08-30 16:41:36 +08:00 via Android
    @sphawkcn 腾讯云可以随便绑定一个子域名到 cdn 或者 cos,被查到向客服说明就可以了,阿里云不知道可不可以
    JavaDeveloper
        79
    JavaDeveloper  
       2020-08-30 20:34:31 +08:00
    用 hexo 搭的博客
    lookas2001
        80
    lookas2001  
       2020-08-30 23:22:52 +08:00
    楼主分享的文章没怎么看,倒是翻译的这一篇吸引到我了 https://kalasearch.cn/blog/how-veed-achieve-1m-arr/
    XD
    KalaSearch
        81
    KalaSearch  
    OP
       2020-08-31 02:38:31 +08:00
    @lookas2001 楼主的文章都是干货满满,都读一遍也不亏 XD
    BasIrs
        82
    BasIrs  
       2020-09-03 11:33:22 +08:00
    如果我没有服务器可以搭建自己的博客吗
    @POPOEVER 虽然听不懂但是好像很厉害的样子
    POPOEVER
        83
    POPOEVER  
       2020-09-24 08:51:02 +08:00
    @BasIrs 晕,我前面不是回你了么
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     5059 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 28ms UTC 05:43 PVG 13:43 LAX 22:43 JFK 01:43
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86