首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
KalaSearch
V2EX  ›  程序员

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

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

    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

  • Gatsby
  • React
  • 静态
  • 博客
    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  
    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
    https://leimao.github.io/
    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 有很多库很方便的做这些事情
    FaiChou
        41
    FaiChou  
       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?
    FaiChou
        44
    FaiChou  
       2020-08-18 14:33:18 +08:00
    @KalaSearch #43 http://calpa.me/
    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
    https://blog.towavephone.com/
    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  
       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   ·   实用小工具   ·   5436 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:59 · PVG 15:59 · LAX 23:59 · JFK 02:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.