跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 如何用 Gatsby 打造你的完美博客 – 初始设置秒开和一键部署
未分類
2 9 月 2020

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

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

資深大佬 : KalaSearch 18

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

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

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

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

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

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

大佬有話說 (69)

  • 主 資深大佬 : KalaSearch

    如果希望换友链的话,请告诉我锚文本和你的博客链接。

    大家的博客都建在哪里?也可以跟大家分享一下

  • 資深大佬 : xiongsa18

    运行你的网站里命令错了。gatsby develop

  • 主 資深大佬 : KalaSearch

    @xiongsa18 是不是没有 npm install?

    错误信息是什么呢

  • 資深大佬 : xiongsa18

    @KalaSearch 博文里错了

  • 主 資深大佬 : KalaSearch

    @xiongsa18 啊感谢!改过来了,一会部署完应该就对了 <3

  • 資深大佬 : iConnect

    有什么可以用的评论插件吗?不能互动的博客,和笔记区别不大

  • 主 資深大佬 : KalaSearch

    @iConnect 市面上的都有,Disqus, Commento, Facebook Comment, Gitalk 等等

    https://www.gatsbyjs.com/docs/adding-comments/

  • 資深大佬 : raptor

    静态我只用 HUGO,JS 做的东西一堆依赖,烦得一笔。

  • 資深大佬 : robinch

    @iConnect Valine

  • 資深大佬 : ericgui

    Gatsby 用 GraphQL
    实在受不了

    虽然我并不反对 GraphQL,但总觉不太靠谱

  • 資深大佬 : sphawkcn

    @ericgui #10 用 GraphQL 是优势啊:)

  • 資深大佬 : smgui

    我刚用上 gridsome,感觉也还行?能说说 Gatsby 比 gridsome 强在哪里吗?或者为什么没有考虑 gridsome ?

  • 資深大佬 : meinjoy

    gatsby hugo hexo 生成静态哪个性能比较高?

  • 資深大佬 : MrGba2z

    我缺的是博客轮子么? ::狗头::

  • 資深大佬 : timothyye

    感觉最近那个 Rust 的静态 blog 工具挺香 https://github.com/getzola/zola

  • 資深大佬 : Cielsky

    @meinjoy Hugo 比 hexo 高,另一个就不知道了,我都是用持续集成自己生成网站文件,push 一下就可以了,也不用在意时间了

  • 資深大佬 : sphawkcn

    有个问题,国内 CDN 都需要域名备案,你用阿里云的 CDN,如果你的域名指向 Netlify,不是指向阿里云的服务器,是怎么备案成功的?

  • 資深大佬 : tozp

    直接在 Bloger 上搭不就完了嘛,为啥总有这么多人喜欢重复造轮子。什么网络、带宽、主机、备份、统计、安全、数据库、框架、备案等等全都不用自己搞了,不香吗? ie9.org 看看国内能不能访问

  • 資深大佬 : isukkaw

    这就是贵司官网的 favicon 是 Gatsby Logo 的借口?

  • 資深大佬 : AlynxZhou

    单页应用+展示内容+优化的不好简直就是访问灾难,用户想尽快看到文件内容和加载进度,但是单页应用经常要么等着加载一个巨大的 JS 要么点了一个链接没反应过一会突然把内容蹦出来……

  • 資深大佬 : way2explore2

    tim.bai.uno 友情链接交换

  • 資深大佬 : xcatliu

    @AlynxZhou 为啥会加载一个巨大的 JS ?

  • 資深大佬 : nnnToTnnn

    @xcatliu 他估计单页面开发的少,现在单页面基本上都能拆分 js 。 甚至可以将路由直接渲染成为多个 html 。 当然目前看到的渲染成 html 好像不支持嵌套路由。

  • 資深大佬 : cnscorpions

    官网文档不香吗? gatsby 和 next.js 早折腾了,没意思

  • 資深大佬 : nnnToTnnn

    @xcatliu

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

    这个也是路由的 loading 没有做好,甚至可能就大概没做 loading 所以才会突然蹦的出来。

  • 資深大佬 : AlynxZhou

    @nnnToTnnn 开发的少又不是用的少,能不能是一回事,开发者做不做是另一回事,遇到一个不做的就干着急没办法了

  • 主 資深大佬 : KalaSearch

    @smgui 抱歉没有用过 gridsome,不好比较。看社区的话 gatsby 大不少: https://stackshare.io/stackups/gatsbyjs-vs-gridsome-vs-jekyll

  • 資深大佬 : peterjose

    @nnnToTnnn 但是你核心的 vendor 拆不掉吧。。拆的只是每个页面逻辑而已 然后这种博客每个页面根本没啥 js 或许就没有 Js 路由按需加载没有意义

  • 資深大佬 : huhexian

    @KalaSearch 我的博客是用腾讯云服务器和 WordPress 搭建的:www.huhexian.com

  • 資深大佬 : tankren

    博客轮子那么多 还是 WordPress

  • 資深大佬 : CBS

    游戏都结束了,我还不知道怎么新建文章…

  • 主 資深大佬 : KalaSearch

    @CBS 啥游戏?

  • 資深大佬 : CBS

    @KalaSearch 找到了…原来要严格按照模板要求新建文章。

  • 主 資深大佬 : KalaSearch

    @CBS 嗯,可以换个模板试试。Gatsby 的模板市场还是很多模板可用的

  • 資深大佬 : codermagefox

    正在弄 Gatsby,确实巨 TM 香,本来一个静态站起来起码得 2-3 天,用 Gatsby5 个小时以内全站就搞定了.

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

    当然现在也有缺点,就是有些包下不下来,挺恶心的,不知道哪个依赖被墙掉了.

  • 資深大佬 : leimao

    https://leimao.github.io/

  • 資深大佬 : ssshooter

    https://ssshooter.com/

    这边用的也是 Gatsby

  • 主 資深大佬 : KalaSearch

    @leimao
    @ssshooter

    加好了,部署完大概 5 分钟生效~感谢!
    也请帮忙加上我们的,锚文本可以用“卡拉搜索”,简介可以用”elastic search 替代方案”

  • 資深大佬 : leimao

    @KalaSearch
    在 Followings 的页面里放了一个链接。
    https://leimao.github.io/miscellaneous/followings/
    不大会做网站,所以粗糙了一些。我的网站 99%流量都来自非中国国家,您可以考虑启用英文博客。

  • 資深大佬 : nnnToTnnn

    @peterjose 博客看是用什么技术做,一般现在的博客大部分都是 markdown 来进行渲染。如果要进行 js 拆分也不是不可以。无非就是以前一个很大的 js,现在变成多个很小的 js, 虽然没有意义,但是也是可以拆分。css 拆分是为了解决 IE 的 css 规则的限制,js 的拆分一般是为了按需加载。其实也是可以将偌大的 js 来进行拆分的, JS 的 AST 有很多库很方便的做这些事情

  • 資深大佬 : FaiChou

    2 年前 Calpa 推过 Gatsby, 现在我的博客还是 Gatsby 搭建的, 好久没有 Calpa 的消息了 ==

  • 主 資深大佬 : KalaSearch

    @ssshooter ping

  • 主 資深大佬 : KalaSearch

    @FaiChou 什么是 Calpa?

  • 資深大佬 : FaiChou

    @KalaSearch #43 http://calpa.me/

  • 資深大佬 : Austaras

    https://github.com/Austaras/gatsby-starter-mirai 借地方安利一下我的 gatsby 主题, 仿的 hexo next

  • 資深大佬 : baoshuo

    @KalaSearch #1
    我的博客 aHR0cHM6Ly9iYW9zaHVvLmJsb2c= 用的 Gridea 自己魔改的 Pure 主题
    我的主页 aHR0cHM6Ly9iYW9zaHVvLnJlbg== 改的 Github Pages 的主题
    我的跳转页(转到主页) aHR0cHM6Ly9iYW9zaHVvLm1l 找了个 gif,配的 cf workers

  • 資深大佬 : Leon6868

    你们的网址为什么不允许国外 IP 访问,直接报 404 ?

  • 資深大佬 : ssshooter

    @KalaSearch 久等啦!已添加,部署中!

  • 資深大佬 : creanme

    Not Found

  • 主 資深大佬 : KalaSearch

    @Leon6868 可能是 CDN 没刷,能否再帮忙试一下 ?

    @ssshooter 感谢

    @Leon6868 可能是 CDN 没来得及刷

  • 資深大佬 : evilStart

    里有这么多技术搭建博客,自己写了几篇文章?

  • 資深大佬 : Leon6868

    @KalaSearch
    还是不行,kalasearch.cn 也不可以访问,报错为“Not Found”

  • 資深大佬 : Leon6868

    @KalaSearch IP 是秘鲁的

  • 資深大佬 : atonku

    不要置顶了吧

  • 資深大佬 : xubiaosunny

    jekyll + github 不香么?

    https://blog.xubiaosunny.online/

  • 主 資深大佬 : KalaSearch

    @Leon6868 能否帮忙试下关浏览器缓存,隐身模式再试一次?

  • 資深大佬 : towave

    我也是 gatsby 搭建的,欢迎访问

  • 資深大佬 : towave

    https://blog.towavephone.com/

  • 資深大佬 : Leon6868

    @KalaSearch 隐身模式没问题了。不过这样体验不算好啊

  • 主 資深大佬 : KalaSearch

    @Leon6868 是的,有点奇怪。能否加我微信请你帮下忙?微信号就是我 id

  • 資深大佬 : Leon6868

    @KalaSearch 有 QQ 吗,一般不用微信

  • 資深大佬 : JiangTianZheng

    @sphawkcn 域名备案和网站本身 host 在什么地方没啥关系。我的博客 host 在 Netlify 一样给过。关键是域名要放在国内域名服务商。CDN 也是同理。

  • 資深大佬 : POPOEVER

    两年多前弄的了,SSG 特别适合做知识类小站点 https://hcv.app

  • 資深大佬 : MLeo

    回忆中的明天
    https://ichochy.com
    Hugo+Github pages

  • 資深大佬 : BasIrs

    如果我没有服务器可以搭建自己的博客吗

  • 資深大佬 : luodaoyi

    我之前用的 wordpress 昨晚折腾了下 换了 hugo
    配置了 github action 自动构建 发布到 github page 和国内的静态站点上面 国外用 cloudflare 国内用纯 cdn 的静态站点
    体验还不错

    https://luodaoyi.com

  • 資深大佬 : Te11UA

    @luodaoyi 活捉大佬一枚!请教下 actions 咋配的呢?

  • 資深大佬 : stebest

    阁子
    https://newdee.cf
    个人博客
    欢迎友链

  • 資深大佬 : sphawkcn

    @JiangTianZheng #62 看到你的回复真的是很激动,多年困扰我的问题难道有解了?如果域名备案和网站本身 host 在什么地方没啥关系那就真的太好了。

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

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

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

    这个 [产品类型] 是红色标记必选项,只有你在阿里云买了支持备案的服务器产品,这里下拉菜单才会出现可选择项,换句话说,就是必须得先买阿里云的服务器。

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具