static site generator

Gatsby是一個使用React構建應用程序和網站的平台。 它是一個允許你使用一系列技術和實踐來構建的工具，這些技術和實踐被統稱為JAMstack。 Gatsby是當前前端開發領域中最火熱的工具之一。為什麼呢？我認為有以下幾個原因： “JAMstack"方法用於構建Web應用程序和網站的大幅增長 行業中對於"Progressive Web Apps”（漸進式Web應用程序）技術的快速采用，這也是Gatsby的關鍵功能之一 它是使用React和GraphQL構建的，這兩個技術非常流行和備受追捧 它功能強大 它的速度很快 文檔很好 網絡效應（有人使用它，創建站點，製作教程，更多人了解它，形成一種循環） 一切都是JavaScript（不需要學習新的模板語言） 它隱藏了複雜性，但允許我們逐步定制每一步 以上都是很好的優點，Gatsby絕對值得一試。 它是如何工作的？ 使用Gatsby，您可以使用React組件來構建應用程序。 您通常會使用Markdown編寫在站點中呈現的內容，但您也可以使用任何類型的數據源，例如無頭CMS或像Contentful這樣的Web服務。 Gatsby會構建站點，並將其編譯為靜態HTML，可以部署在任何Web服務器上，例如Netlify、AWS S3、GitHub Pages、常規託管提供商、PAAS等。您只需要找一個可以提供普通HTTP頁面和內容給客戶端的地方。 我在上面的列表中提到了漸進式Web應用程序。Gatsby會自動將您的站點生成為PWA，並使用服務工作器加快頁面加載和資源緩存。 您可以通過插件來增加Gatsby的功能。 安裝 您可以在終端中運行以下命令安裝Gatsby： npm install -g gatsby-cli 這將安裝gatsby命令行工具。 （當有新版本時，可以使用相同的命令進行更新） 您可以運行以下命令創建一個新的"Hello World"站點： gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world 此命令將在mysite文件夾中創建一個全新的Gatsby站點，使用位於https://github.com/gatsbyjs/gatsby-starter-hello-world的starter。 Starter是您可以基於的示例站點。另一個常見的starter是default，可在https://github.com/gatsbyjs/gatsby-starter-default上找到。 您可以在這裡找到所有可用的starter的列表 運行Gatsby站點 在終端完成安裝starter之後，可以運行以下命令來運行網站： cd mysite gatsby develop 這將在本地主機的8000端口上啟動一個新的Web服務器並提供網站。 以下是我們的Hello World starter的運作示例： 檢查站點 如果用您喜歡的代碼編輯器（我使用VS Code）打開您創建的站點，您會發現有3個文件夾： .cache：一個包含Gatsby內部代碼的隱藏文件夾，您在現在不需要更改其中的任何內容 public：在構建站點後包含生成網站的靜態文件 src：包含React組件的文件夾，這裡只有index組件 static：將包含靜態資源，例如CSS和圖片 現在，對默認頁面進行簡單的更改非常容易，只需打開src/pages/index.js文件，將“Hello World！”更改為其他內容，然後保存。網頁應立即熱重載該組件（這意味著網頁實際上不會刷新，但內容會更改 - 這是由底層技術支持的一個技巧）。 要添加第二個頁面，只需在此文件夾中創建另一個.js文件，與index.js具有相同的內容（調整内容）並保存。 例如，我創建了一個名為second.js的文件，具有以下內容： import React from 'react' export default () => <div>Second page!...

Next.js或Gatsby？為什麼要選擇它們而不是create-react-app？而你又應該選擇哪一個呢？ create-react-app無法輕鬆地幫助您生成伺服器端渲染的應用程式。它所提供的一切（包括SEO、速度等等），只能由像Next.js和Gatsby這樣的工具提供。 Next.js比Gatsby更適合的時機是什麼？ 它們都可以幫助實現伺服器端渲染，但方式不同。 使用Gatsby的結果是一個靜態網站生成器，沒有伺服器。您可以構建網站，然後將構建過程的結果靜態地部署在Netlify或其他靜態主機網站上。 Next.js提供了一個後端，可以根據請求生成伺服器端渲染的響應，讓您可以創建動態網站，這意味著您將在可以執行Node.js的平台上部署它。 Next.js也可以生成靜態網站，但我不認為這是它的主要用例。 如果我的目標是構建一個靜態網站，我可能很難選擇，也許Gatsby擁有更好的插件生態系統，包括許多特定於博客的插件。 Gatsby還高度依賴於GraphQL，您可能會根據自己的觀點和需求喜歡或不喜歡這一點。

為何我認為在程式設計中選擇乏味的技術堆疊很重要 前幾天有一個人問了我一個問題。這個人想要開始寫部落格，並決定用 Angular 作為前端，自己建立一個部落格平台。 我回答他，如果目標是寫部落格，那麼他必須放棄這個想法，使用現成的解決方案。 我想他不喜歡我的回答，因為我沒有收到回覆，但我想表達的意思是：如果你想要創建一個部落格並且認真對待寫作，那麼你應該使用最乏味和可靠的工具。絕對不要在部落格基礎架構上浪費時間，如果你想進行一些認真的寫作。 技術必須退居次要，你只需要專注於內容。 否則，你會花費大部分的空閒時間來調整部落格平台（除了你之外沒有人在乎這些），而不是寫作內容。沒有人在乎部落格架構。 如果你想要製作一個視頻，你會先編寫一個 YouTube 的克隆嗎？它能夠同時處理1億個訪客嗎？這讓我想起那些想寫視頻遊戲並開始建立物理引擎的人，最終卻沒能完成遊戲。 我使用 Hugo，一個靜態網站生成器。 Hugo 對我來說是最好的，因為它專注於部落格和 Markdown。它很乏味。它的模板語言很乏味。當我需要微調一些東西時，我會睡著。我很喜歡它。 Hugo 最好的特點在於它快速，我認為這主要得益於使用了 Go。如今看來，這似乎是一個乏味的特點。 “看看 Gatsby，它好華麗！” Gatsby（這只是一個例子，我並沒有反對它）對我來說已經太華麗了，即使它是個很棒的技術。為什麼？因為它讓你太過關注技術而忽略了結果。作為一個開發者，你可能覺得這很棒，但事實並非如此。React、GraphQL，這些都有點太令人興奮了。 這讓我想起了 Redux，那些對於具有“時間旅行”示範的人感到興奮的人，這是在日常編碼中非常有用的功能（開玩笑）。人們為了使用華麗的技術而過度複雜化他們的應用程式。 讓我們以預取為例。當靜態網站已經足夠快時，我們真的需要預取嗎？我們的部落格訪客有要求嗎？這樣做有什麼缺點？可能會出問題嗎？ 記住墨菲定律：“任何可能出錯的事情終將出錯” 我曾經和一位使用 Gatsby 開始撰寫部落格的人交談過，他意識到他們並沒有啟用服務器端渲染，即使他們認為已經啟用了。這使得該部落格幾乎對 Google 不可見（是的，我知道他們有時執行 JavaScript，但你就容忍我，堅持使用乏味的服務器端渲染）。 在一個普通的部落格中，每位用戶平均只會瀏覽1.1 / 1.2個頁面。這意味著大部分用戶只會經過 Google 來到你的網站上，快速瀏覽一下然後離開。你真的需要預取所有的鏈接嗎？為什麼要浪費那麼多的數據和資源？ 讓我們停止批評 Gatsby，我真的很喜歡它作為創建網站和應用程式的工具。 我的觀點是，為了開始一個簡單的部落格，你可能不需要它80%的功能。使用一個更簡單的工具，一個專為部落格而設計的工具，絕對不要自己寫。 這也適用於更複雜的應用程式。你應該使用你已經使用了10年的技術，還是應該去嘗試你不了解但大家都講得很好的潮流技術？你應該使用 Rails 還是 Elixir？我應該使用 TypeScript 還是 Reason 編寫我的下一個應用程式？C、Go還是Rust？ 我們浪費了大量的時間，從舊的庫跳到新的庫，從舊的框架跳到新的框架。想想 jQuery、Backbone和Ember，以及它們之前和之後出現的無數框架。想想 AngularJS 和 Angular。想想 Laravel 掀起 PHP 世界的風潮之前的所有 PHP 框架。記得 NoSQL 的“革命”讓我們重新考慮使用 MySQL，轉而使用更花哨和更靈活的數據庫系統？事實上，SQL 仍然強勢。 “只需使用 MySQL，乏味的技術革命就在這裡” Marty Weiner，Reddit CTO，2016 大多數開發人員認為是行業標準的工具是由 Google 和 Facebook 等大型公司建立的，它們對於它們的需求來說是完美的。一個小團隊或獨立開發人員可能也有相同的需求，但這有多大可能性呢？是因為同儕壓力和炒作而驅使的嗎？還是因為營銷的影響？...