/tags/gatsby/Recent content in Gatsby on Colinx BlogHugo -- gohugo.ioen-usSat, 09 Jan 2021 00:00:00 +0000/posts/jamstack%E5%88%9D%E4%BD%93%E9%AA%8C-%E5%9F%BA%E4%BA%8Epocket-%E5%92%8C-gatsby-%E6%9E%84%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/Sat, 09 Jan 2021 00:00:00 +0000/posts/jamstack%E5%88%9D%E4%BD%93%E9%AA%8C-%E5%9F%BA%E4%BA%8Epocket-%E5%92%8C-gatsby-%E6%9E%84%E5%BB%BA%E4%BD%A0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97/ <!-- # JAMStack 初体验 - 基于 Pocket 和 Gatsby 构建你的「网络日志」 --> <p>折腾了自己的专属 RSS 信息流，每天都能从那些高质量的信息源中获得不少干货知识，一般就会顺手收藏一下。有一天突然想起自己收藏的那些文章，本身不就是经过二次筛选的高质量文章吗？于是便在构想能不能通过某种方式将这个信息源也公开出来，一方面是记录，另一方面也是间接地展示自己。恰逢遇见<strong>JAMStack</strong>，最近在国外非常火，国内的阿里和腾讯也在跟进，搞静态托管那一套。经多方物色，最终确定基于<code>Pocket API</code>+<code>Gatsby</code>来构建这样一个自己的「网络日志」。</p> <blockquote> <p>You are what you read.</p> </blockquote> <h2 id="简谈-jamstack"> 简谈 JAMStack <a href="#%e7%ae%80%e8%b0%88-jamstack" class="h-anchor" aria-hidden="true">#</a> </h2> <blockquote> <p>JAMStack 即基于客户端 <strong>J</strong>avaScript，可重用 <strong>A</strong>PI 和预先构建 <strong>M</strong>arkup 的现代 Web 开发架构。当我们谈论“堆栈”时，我们不再谈论操作系统，特定 Web JAMStack 与特定技术无关。这是一种构建网站和应用程序的新方法，可提供更好的性能，更高的安全性，更低的扩展成本以及更好的开发人员体验。</p> </blockquote> <p>JAMStack 是一种新颖的网站架构，与传统的服务端渲染和近些年国内流行的前后端分离等架构不同的是，他的网页是静态的，可以托管在 CDN 上，内容是动态的，可以方便地进行修改。</p> <p><strong>JAMStack 几个显著的优势</strong>：</p> <ul> <li>页面为静态，TTFT（TimeToFirstByte）的时间可以降到非常低</li> <li>页面为静态，服务器遭受的安全风险要低得多</li> <li>不同于客户端渲染，JAMStack 对 SEO 会非常友好</li> <li>不同于传统纯静态网站，内容可以方便地动态更新</li> </ul> <h2 id="为什么选择-gatsby"> 为什么选择 Gatsby <a href="#%e4%b8%ba%e4%bb%80%e4%b9%88%e9%80%89%e6%8b%a9-gatsby" class="h-anchor" aria-hidden="true">#</a> </h2> <p>作为一个网站生成器 Site Generator，Gastby 的入门门槛其实是较高的，相对于 Hexo、Hugo 那种简简单单配置下就是一个站点，Gatsby 的难度要更高，因为其灵活度更大，所有的配置、页面都是 Javascript 来配置的，当然你也可以使用 Typescript。其基于 React，生态丰富且灵活度高，天生<code>GarphQL</code>是选择它的主要原因。</p> <h2 id="网站架构及效果"> 网站架构及效果 <a href="#%e7%bd%91%e7%ab%99%e6%9e%b6%e6%9e%84%e5%8f%8a%e6%95%88%e6%9e%9c" class="h-anchor" aria-hidden="true">#</a> </h2> <p>流程：</p> <ol> <li>我在其他地方看到不错的文章，将其收藏到 Pocket</li> <li>定时任务，从<code>Pocket API</code>获取文章数据，交给 Gatsby 生成站点</li> <li>自动部署，将生成的静态文件部署到 CDN</li> <li><a href="https://reading.colinx.one">reading.colinx.one</a>站点主页就会出现我收藏的文章啦</li> </ol> <p>这其中，Gastby 充当的是<strong>Site Generator</strong>的角色，而数据来源为我的<code>Pocket API</code>，也就是我把 Pocket 作为<strong>Headless CMS</strong>来管理我的数据，可以方便地进行更新和管理。</p> <h2 id="总结"> 总结 <a href="#%e6%80%bb%e7%bb%93" class="h-anchor" aria-hidden="true">#</a> </h2> <p>项目已经开源，地址在<a href="https://github.com/Colin-XKL/Colinx-Reading">https://github.com/Colin-XKL/Colinx-Reading.git</a>。你也可以去申请自己的 Pocket API 然后部署你自己的站点。</p> <p>初始尝试 JAMStack，感觉对于博客、文档这类的站点会非常友好，国外比较火的像 Shopify 这种的无头电商也不错，国内的碍于国情应该不大可能了。</p> <h2 id="链接"> 链接 <a href="#%e9%93%be%e6%8e%a5" class="h-anchor" aria-hidden="true">#</a> </h2> <ul> <li>Welcome to the Gatsby Way of Building | Gatsby <a href="https://www.gatsbyjs.com/docs/">https://www.gatsbyjs.com/docs/</a></li> <li>For fast and secure sites | Jamstack <a href="https://jamstack.org/">https://jamstack.org/</a></li> </ul>