程式設計入門

這篇文章是一個完整的程式設計入門課程。 一般的程式設計。 在開始學習特定的程式語言之前，有一些基本概念你需要熟悉。這些概念並不依賴於特定的程式語言，但對每個開發者來說都是必要的。 如果你是程式設計的新手，這篇文章的目標是幫助你準備並提供基本的概念。 具體來說，你將學習以下內容： 什麼是電腦 什麼是程式 什麼是程式語言 作為一個程式設計師的工作 作為一個程式設計師不需要做的事情 不同的程式設計範式 可以使用的不同程式設計語言，以及應該選擇哪一個 什麼是錯誤 以及更多！ 為什麼你應該成為一個程式設計師？ 我教學程式設計，每天收到很多電子郵件。我和很多程式設計師和想成為程式設計師的人都有很好的交流。 我對於如何讓人們學習程式設計有一個很好的理解。 人們想要建立自己夢寐以求的應用程式。他們想要將這個項目變成現實，想要實現他們的夢想。在您的電腦或手機上運行的應用程式，創建您和朋友夢想中的遊戲！ 人們想以興趣的形式學習這個技能。我與70和80歲的人交談過，他們正在學習編程。出於娛樂。享受新的挑戰。為他們的朋友創建一個應用程式。 人們想在技術方面開始一個新職業。這並不奇怪 - 程式設計作為一份工作非常有吸引力：需求量很大，工作在室內，平均工資也不錯。當然，這取決於地點和水平。你也可以遠程工作，這是我認為的一個巨大的優勢。 當然，這只是其中的3個例子。你可能有不同的需求，但無論需求是什麼，學習程式設計絕對是一個你將來希望擁有的技能。 成為一個程式設計師所需要的 你不需要成為一個計算機科學家或學習工程學，也不需要成為數學天才才能學習程式設計。 這是一個你可以隨時學習的技能，無論年齡如何，而且 - 讓我說 - 它是一個非常棒的技能。 從零開始成為一個程式設計師只需要四件事： 耐心 專注力 時間 一致性 這就是你所需要的一切。 耐心，因為每次學到一些新知識時，你需要耐心，一步一步地學習，直到能夠把知識點連接起來。 專注力，因為它絕對不是一個容易掌握的技能。 時間，因為學習需要時間。在編程方面，你有時候會卡在某些問題上，需要一些時間進行研究。一個優秀的程式設計師在思考問題的時間和編程的時間上花費的時間是相等的。 一致性，因為如果你每天都能花一點時間，比如1或2小時，學習編程，你將在短時間內成為一個優秀的程式設計師。 哦，你可能也需要一台電腦。任何適度新的電腦都足夠好，你並不需要一台高級的MacBook Pro。別把這個當作藉口：） 一台電腦如何工作？概覽 當我說電腦時，我指的是每一個可以編程的電子設備：筆記本電腦和桌上型電腦，智能手機，智能手錶，您的汽車，洗碗機，相機，甚至像狗的GPS裝置這樣的小東西。許多事物，對吧？我們周圍都是電腦。 計算機是由程序驅動的電子設備。從20世紀中葉以來，程序員一直在努力使計算機速度更快，並且更容易和更可靠地編程。 機器是愚蠢的。它們只能遵循您的指示。它們真的無法思考或做決定。它們只能遵循您的指示，所以作為一個程式設計師，您就成為了一個非常強大的人。 我們稱計算機的電子部分為硬體，程序部分稱為軟體。 當您編寫一個程式給計算機時，您提供的指令會被轉換成位元，這是電子設備可以理解的唯一內容。位元只能具有兩個值：0和1。 當您查看電腦或智能手機時，您會看到一個漂亮的界面。這是多年演變的結果。在其後，每秒執行數百萬次指令，為您提供附近最佳餐廳列表。它通過與網絡溝通實現，這是我們人類建造的最大的人工生態系統。 涵蓋計算機如何工作（以及計算機網絡）將需要很多時間。在這個簡要的概述之後，我將重點放在軟體部分上。 關於程式 現在讓我們來看看什麼是程式。你的瀏覽器（Chrome，Firefox或你使用的那個）就是一個程式。 這個網站是應用程式生成的一個程式使它成為可能。我提供內容，程式生成HTML頁面。 你的手機由一個名為iOS或Android的大型程式控制。這是一個巨大的程式，當然將其稱為程式是不公平的–它是一個集合，一個程式生態系統。我們給它取了一個名字。 你電腦上的應用程式就是程式。您手機上的應用程式也是如此。 你的汽車是由程式控制的。 程式是一組指令，程式設計師組合這些指令以使機器執行特定的操作。 通常，在執行程式之前，程式將由程式設計師進行編譯。有時候程序會由另外一個程序解譯。 比如JavaScript，它在瀏覽器中運行。在此准確的時刻，您使用的瀏覽器正在執行我撰寫的某些JavaScript代碼。 所以，這是程式的第一個主要區分：編譯和解譯。不同的程式語言將允許其中之一。 最終，程式是您用來執行特定操作的東西。它可能是幫助簡化企業管理的方式，或者通過創建最終玩家遊戲來解決的問題，比如無聊的問題。 現在我們已經定義了程式是什麼，讓我們深入了解什麼是程式設計。 什麼是程式設計 通常情況下，我們通常使用程式語言中的編碼結構指示來創建一個工作的程式。 然而，我想向這個概念引入更深的內容。 對我而言，程式設計是解決問題。因此，程式設計比您拿起鍵盤並在計算機上鍵入指令的時間要早得多。 程式設計從思考問題開始。或者這個應用程式。 當您收集需求時，與涉及到的所有人，客戶，分析所需做的所有不同事物進行對話時，程式設計開始。 程式設計是定義應用程式不需要做的事情。 在開始工作之前，程式設計是確定您的應用程式是否不可能或代價過高的地方。...

等待所有的 Promise 在 JavaScript 中解析

如何等待多个 Promise (使用 await) 同时解析 有时我们需要等待一个 Promise 解析，然后再等待另一个 Promise 解析。 就像这样： const values = await store.getAll() const keys = await store.getAllKeys() 这起作用，但不是理想的。我们首先等待第一个调用被解析，然后开始第二个。 我想先同时开始两个，并等待两个都完成。不多一毫秒。 解决方案是将所有内容封装在 await Promise.all() 调用中，像这样： const data = await Promise.all([store.getAll(), store.getAllKeys()]) 一旦这个解析完成，我们可以使用 data[0] 访问第一个调用的值，并使用 data[1] 访问第二个调用的返回值。

給你的業務設定一個目的

擁有一個目的是克服挑戰的高度激勵因素 我們創業是為了賺錢。錢對於日常開支、買車、買衣服、買房子都很重要。 但同樣真實的是，如果這是一家企業唯一的目的，那將會很無聊。 我認為一個企業必須以一套獨特的價值觀來思考。 我們不是無名的漢堡連鎖店或超市。 我們不像電工或五金店那樣可以在一分鐘內更換。 擁有一個目的是克服你在途中可能遇到的任何挑戰的高度激勵因素。 成功的企業之所以成功，是因為他們將自己的願景帶到了世界上。 你必須將心思放在業務上，使你的業務成為你對世界的願景，因為這個企業是極度屬於你自己的，所以它會成功。 你的業務將成為向世界展示你是誰、你的價值觀的方式，這將傳遞給你的客戶，而他們會喜歡這一點。

虛擬 DOM

虛擬 DOM 是 React 使用的一種技術，用於優化與瀏覽器的互動。 在 React 出現之前，許多現有的框架都是在每次更改時直接操作 DOM。 首先，什麼是 DOM？ DOM（文件物件模型）是頁面的樹狀表示，從 <html> 標籤開始，向下到每個子節點，稱為節點。 它保存在瀏覽器內存中，直接連接到您在頁面上看到的內容。 DOM 具有一個 API，您可以使用它來遍歷它，訪問每個節點，過濾它們，修改它們。 如果您沒有使用 jQuery 等提供的抽象 API，則 API 是您可能已經見過許多次的熟悉語法： document.getElementById(id) document.getElementsByTagName(name) document.createElement(name) parentNode.appendChild(node) element.innerHTML element.style.left element.setAttribute() element.getAttribute() element.addEventListener() window.content window.onload window.dump() window.scrollTo() React 在所涉及的 React 渲染方面保留了 DOM 表示的副本：虛擬 DOM 虛擬 DOM 的解釋 每次 DOM 更改時，瀏覽器都必須執行兩個密集的操作：重新繪製（對元素進行視覺或內容更改，不會影響相對於其他元素的佈局和定位）和回流（重新計算頁面或整個頁面佈局的一部分的佈局）。 React 使用虛擬 DOM 來幫助瀏覽器在需要對頁面進行更改時使用更少的資源。 當您在組件上調用 setState()，並指定與先前狀態不同的狀態時，React 將該組件標記為髒。這是關鍵：React 只在組件明確更改狀態時進行更新。 接下來發生的是： React 根據標記為髒的組件對虛擬 DOM 進行更新（還會進行一些其他檢查，例如觸發 shouldComponentUpdate()） 執行差分算法以協調更改 更新實際的 DOM 虛擬 DOM 的優勢：批次處理 關鍵在於 React 批量處理大部分更改，並通過同時更改所有需要更改的元素來執行對實際 DOM 的唯一更新，因此瀏覽器在執行重新繪製和回流以渲染更改時只需執行一次。

開始使用 Next.js：教學指南

Next.js 是一個非常受歡迎的 Node.js 框架，它可以方便地進行服務器端的 React 渲染，並提供許多其他令人驚喜的功能。 Introduction 主要功能 安裝 入門 創建頁面 服務器端渲染 添加第二個頁面 熱加載 客戶端渲染 動態頁面 CSS-in-JS 導出靜態網站 部署到 Vercel 了解更多關於 Next.js Introduction 在使用由 React 驅動的現代 JavaScript 應用程式時感到很棒，直到你意識到與在客戶端渲染所有內容相關的一些問題。 首先，頁面需要更長的時間才能對用戶顯示，因為在內容加載之前，必須加載所有 JavaScript，然後應用程式需要運行以確定要在頁面上顯示什麼。 其次，如果你正在構建一個公開可用的網站，你將會遇到搜索引擎優化（SEO）問題。搜索引擎越來越善於運行和索引 JavaScript 應用程式，但最好還是能夠將內容發送給它們，而不是讓它們自己解決。 解決這些問題的方法是進行服務器端渲染，也稱為靜態預渲染。 Next.js 是一個 React 框架，可以以非常簡單的方式完成所有這些工作，但它並不僅限於此。它被創建者稱為零配置、單命令工具鏈，可用於 React 應用程式。 它提供了一個通用結構，允許你輕鬆構建前端 React 應用程式，並為你提供透明的服務器端渲染能力。 主要功能 以下是一個非詳盡的 Next.js 主要功能清單： 熱加載: 當檢測到任何變更時，Next.js 會重新載入頁面。 自動路由: 任何URL都會映射到文件系統，即放在pages文件夾中的文件，你不需要任何配置（當然你也可以進行自定義配置）。 單文件組件: 使用完全集成的 styled-jsx，Next.js 讓添加與組件相關的樣式變得非常容易。 服務器端渲染: 你可以（可選地）在服務器端渲染 React 組件，在將 HTML 發送給客戶端之前進行渲染。 生態系統相容性: Next.js 與其他 JavaScript、Node 和 React 生態系統相容。 自動代碼拆分: 只渲染頁面所需的庫和 JavaScript，不多不少。 預取資源: Link 組件，用於鏈接不同的頁面，支持 prefetch 屬性，可在後台自動預取頁面資源（包括由於代碼拆分而丟失的代碼）。 動態組件: 你可以動態地引入 JavaScript 模塊和 React 組件 (https://github....

開始使用JSX

JSX是React引入的一個技術。讓我們深入了解一下。 JSX簡介 JSX入門 轉譯JSX JS in JSX 在JSX中使用HTML 您需要關閉所有標籤 駱駝命名法是新的標準 class變成className style屬性改變其語義 表單 React中的CSS 為什麼這比純CSS / SASS / LESS更受青睞？ 這是首選解決方案嗎？ JSX中的表單 value屬性和defaultValue屬性 更一致的onChange事件 JSX自動轉義 JSX中的空格 水平空格被修剪為1個 垂直空格被消除 在JSX中添加註釋 擴展屬性 如何在JSX中進行循環 JSX簡介 JSX是由React引入的一項技術。 儘管React在不使用JSX的情況下也可以正常工作，但它是與組件一起工作的理想技術，因此React從JSX中獲益良多。 起初，您可能會認為使用JSX就像混合HTML和JavaScript（以及CSS）。 但事實並非如此，因為使用JSX語法時，實際上是用JavaScript編寫一個組件UI的聲明語法。 您使用的不是字符串描述UI，而是使用JavaScript，這使您能夠做許多好事。 JSX入門 以下是如何定義包含字符串的h1標籤的示例： const element = <h1>Hello, world!</h1> 它看起來像JavaScript和HTML的奇怪混合，但實際上它是完全的JavaScript。 看起來像HTML，實際上是為了定義組件以及它們在標記中的定位而添加的語法糖。 在JSX表達式中，可以非常容易地插入屬性： const myId = 'test' const element = <h1 id={myId}>Hello, world!</h1> 只需注意，當屬性具有連字符（-）時，它會轉換為駝峰命名法。還有兩種特殊情況： class變成className for變成htmlFor 這是因為它們是JavaScript中的保留字。 以下是一個將兩個組件包裝到div標籤中的JSX片段的示例： <div> <BlogPostsList /> <Sidebar /> </div> 標籤始終需要關閉，因為這更像是XML而不是HTML（如果您還記得XHTML的日子，這將是熟悉的，但此後採用了HTML5鬆散語法）。在這種情況下，使用了自閉標籤。 請注意，我將2個組件包裝到div中。為什麼？因為**render()函數只能返回單個節點**，所以如果您要返回2個兄弟節點，只需添加一個父節點。它可以是任何標籤，不僅僅是div。 轉譯JSX 瀏覽器無法執行包含JSX代碼的JavaScript文件。它們必須首先轉換為常規JS。...

開始玩遊戲

對於世界上的每個創造者，有100個消費者。 這只是一個虛構的統計數據。根據不同的行業，這個比例可能是1/1000，甚至是1/10000。 對於每一個持續創作高品質視頻的YouTuber而言，這個比例可能是1/100000。YouTube報告稱有20億已登錄用戶，所以這樣的話就會有20,000位YouTuber。聽起來還算合理，對吧？ 你如何成為一個YouTuber呢？你只需要開始製作視頻。我相信你也試過觀看你最喜歡YouTuber的第一個視頻。它們可能很糟糕，糟糕到連YouTuber自己都覺得丟臉，所以他們會將這些視頻刪除。 如今，他們在自己的領域裡是明星。具有優秀的演講能力、故事講述能力、設備和攝影能力。然而，他們起初就和你一樣。 你不需要與他們相比。你只需要從錄製一個視頻開始，然後再錄製下一個，然後再錄製更多。沒有大量的視頻，就不會有進步。 我提到了YouTube作為題外話，但這樣的道理適用於任何事情。在這個博客上，我寫了超過1400篇博文（什麼？）但我從一篇博文開始。然後是另一篇。一開始，我甚至沒有保持一致性，偶爾寫一篇隨意的博文。 當我堅持下來之後，事情開始有了起色，但這種持續性是在我不時寫博文的幾個月（幾年？）後才出現的。 如果你不開始做，你就永遠不會看到可能會發生的事情。 去年我開始喜歡上YouTube作為一個平台，所以我開始每天錄製一個視頻。過了一個多月，我意識到我真的非常不喜歡準備視頻、錄製視頻和耗時的編輯過程。 我厭惡整個過程，但我給了自己一點時間來搞清楚是否因為我對這些工作不熟悉所以我討厭它們，還是因為我討厭它們。因為這個不是我擅長的方式。 有一天，我意識到我在寫作方面做得更好。如果我不開始，我是無法知道這一點的，所以我很高興我開始了。 我從來沒有意識到大多數人真的討厭寫作。另一方面，我喜歡寫作。我當初不知道我喜歡寫作。這是唯一讓我能夠寫出1400篇博文、十多本電子書以及創建書面課程（是的，不只是視頻課程）的原因。 在學校時，我討厭寫作。 也許你也討厭寫作，並且認為“我不是一個作家”。在博客上寫作可是完全不同的體驗。我不認為自己有特別的技能。 我只是喜歡把自己的思緒通過文字輸入成字，而不是試圖對著攝像頭講話。特別是因為用英語說話比打字要困難得多。而且我可以在完成後刪除字詞、移動字詞、更正錯誤。對我來說，這樣做更好。 對任何事物也是一樣的道理。我在這裡並沒有說什麼新的，只是在反思。如果你想參加馬拉松，你就每天開始跑步。如果你想參加大廚比賽，你就每天開始做飯；如果你想成為搖滾樂團的一員，你就每天彈吉他。

開發人員，學習營銷

懂得營銷的開發人員具備一種強大的技能組合。 如今，數字企業家必須是一位行銷專家，必須知道如何製作產品並將其推向市場。這種技能組合難得，但同時也是強大而爆炸性的。 除了產品部分外，你還需要詳細了解如何建立網站、如何建立Facebook專頁、如何建立電子郵件序列、有關設立廣告活動的細節，以及我們可以歸類為“網站管理者”的所有事項。 對於一位企業家來說，並不一定要全部了解這一切，但是，即使在傳統公司中，也有專人負責這些我列舉的任務，這是真實存在的。本文探討的是在沒有員工的情況下創建業務。 對於任何任務，你可以決定雇用外部專家作為承包商來完成工作，而不是自己做。 然而，這帶來以下幾點思考： 這是一種分散注意力的行為，因為你必須尋找具有適當技能且價格合理的可信任人士。 你必須支付他人的工作費用。 這成為一個無休止的隧道。技術問題永遠不會結束，你可能長期依賴於別人來完成你不理解的工作，因為最初你委派了太多事情，且你對事情的運行方式並不了解。 請問，如果你已經委派了某個技術方面的工作給別人，突然之間你的聯絡人不再可用，那該怎麼辦？ 這些工作中的許多項應該是你的核心業務的一部分，只有你能100%管理。 一般來說，如果你不知道如何做某件事，但需要完成這件事，你必須花錢找人做。 在本文的下一章中，你將獲得所需的所有概述，從那裡你可以進一步深入研究細節。 我出生在一個程序員/網站管理者的家庭，之後也因為需要而成為一名網絡營銷人員。如果你具備更多軟技能，也可以反其道而行之。你不需要成為一位頂級專家，有很多工具可以製作完美的網站和落地頁面，而不需要觸碰一行代碼。 但是要小心：你必須明白，現在你不了解的一切，而這對你的業務成功至關重要，必須學習得非常完備，以避免你的產品和品牌被視為管理不善、業餘或不具吸引力的風險。 無論是學習技能，還是支付金錢請行業專家提供服務，這是一個決定。我的建議是學習所有必要的技能，因為技巧可能會不斷改變，但概念是永恆的，且你不能把業務的基礎交給其他人。 即使你選擇委派，你也不能委派一些太模糊的事情。如果你了解這個主題，你將完全知道你需要什麼，什麼是多餘的或根本不需要的。

開發者的困境

在使用現有服務或平台和建立自己的平台之間做出決策 我現在遇到了一個很大的問題。 我正在試用各種平台，看看它們是否適合成為我將來托管課程的地方。 我現在使用的平台是基於靜態網站的，使用自定義集成和無代碼工具（如Airtable）進行接口。付款和課程報名使用Node.js服務進行管理。你可以稱它為JAMstack，serverless，或者任何當下流行的時髦術語。 事實上，我有幾個類似的SAAS平台，供我每門課程使用。我喜歡把事情保持簡單和直接。一開始，我為一門課程制作了一個網站。 然後當我需要開設另一門課程時，我只需複製那個網站，製作另一個「版本」。 現在課程的數量增加到了7門，是時候重新檢視我使用的整體基礎設施了。 我第一個想法是使用一個我可以使用的平台，它可以作為課程材料的集中式中心，並提供我不必自己構建的功能。 所以我去試用了一些流行的服務，包括Teachable，Podia，和其他許多平台。 但我遇到了我所謂的開發者困境。 乍一看，這些平台都很棒。設計精美，界面流暢，它們的行銷也很出色，看起來很棒。 然後我開始使用它們。 我開始感到越來越沮喪。 「這看起來很棒」 「整體上我喜歡，但這個東西可以不同一點」 「編輯器糟糕透了」 「我希望我能使用 Markdown」 「這裡有個bug，怎麼可能只有我遇到這個問題？」 「嘿，支援，我遇到這個問題了」 - 「我們已經將它提交給工程團隊，我們會保持你的最新動態」 「我的天啊，我已經在這上面浪費了很多時間」 我是一個懶惰的開發者。我認為這是我最好的技術能力。 當你是一個懶惰的開發者時，過度設計軟體不是問題。這永遠不會發生。我只寫出執行任務所需的最小量的程式碼。 我抵制複雜性。 這有何好處？你不能預測明天的需求，明天的問題。我隨著時間的推移學到了這一點。 作為一名合約工，我曾經在非常複雜的程式碼庫上工作，讓我想哭，每當可能的時候，我都更喜歡過度簡化而不是過度複雜。 作為一個懶惰的開發者，這也使我在編寫軟體之前多思考很多。 因為編寫軟體是一種責任。 你正在寫下你未來要承擔的負擔。 假設，繼續我上面關於選擇課程平台的事情，假設我決定自己編寫我的課程平台。 這意味著我首先必須編寫它。 我需要做出決策。可能是對的，也可能是錯的。 在我建立我夢想中的軟體之後，我需要在未來維護這段程式碼。我為此負責。不再有「向支援請求」的按鈕。 作為開發者，我們有這種令人難以置信的能力創建我們需要的工具。然而，這也代表著責任。 但這也是一個擁有問題。我想依賴於這個特定平台未來的5-10年嗎？如果他們的決策與我的不一致怎麼辦？如果他們提高價格怎麼辦？我能輕易地轉移到其他平台嗎？ 在理想情況下，我總是會選擇自己的平台而不是由其他人管理的平台。但我同樣也會選擇最簡單的路線。 對我來說，最大和最珍貴的資源是時間。選擇現有解決方案，我可以有更多的時間。 我應該花一個月的時間來編寫自己的課程平台嗎？ 這就是我目前面臨的開發者困境。 我試用了所有可能的現成解決方案。 它們都沒有兌現其承諾（或我心中對它們的形象）的某種方式。 我決定我要寫自己的解決方案。當然，是最簡單的解決方案。

新网站和重新设计

几天前，我醒来时想到将我的网站flaviocopes.com从Hugo迁移到Astro。 我只花了一天的时间，还设计了一个全新的主题。 在这封邮件中，我将详细介绍这个过程和决策，希望对你有所帮助。 如果你不知道Astro，它是一个非常酷的网站构建工具。我最近创建的许多新网站都在使用它。我想这么做已经有几个月了，但我一直在抗拒，并且还有很多其他更重要的事情要做。 在处理我的网站时，最重要的指标对我来说是DX，即开发人员体验，也就是说我不想使用糟糕的工具。 Astro在这方面非常好，因为它允许我使用UI组件构建网站，我可以使用其类似JSX的组件语法创建，非常好用，甚至可以使用React组件，可以在构建时进行前端渲染或服务器渲染。或者可以使用任何其他前端框架。 我使用这个最后一个功能构建了一个非常酷的东西。 我很高兴在VS Code中调整我的页面，但有时候会感到厌烦，这个过程让我不想写新的文章。我知道我可以使用内容管理系统，但我就是不想用。我想自己构建一个适合我的系统。 我是一个狂热的Notion用户，我非常喜欢它的编写体验，以至于过去两年我一直在使用它创建所有的课程，包括Bootcamp。在我看来，没有其他工具可以与之相比。 这一次，我想看看是否可以使用Notion来驱动我的博客。不是全部，因为现在博客已经有超过1700个教程了，如果每次构建都需要向Notion API请求所有内容，那将会非常耗时，而且我还得处理速率限制的问题。 所以我建立了一个混合解决方案。 我在Notion中编写新文章，并且可以在电脑运行一个命令将它们获取并转换为我的网站上的Markdown文件。 最佳的双赢方式：快速编写和快速构建时间。 Hugo建站用了1分10秒，Astro用了2分43秒。 它的构建时间是原来的2倍多，但是嘿，1700篇博文。真的很多。实际上它比我听说的一些构建时间要快得多。 在看到我提交的更改之前，我有更多的时间喝咖啡，但现在我可以做更多的事情，因为Hugo很棒也很快，但Astro是JavaScript，我可以随心所欲地使用它。 我不止于此。 我还有这个想法：我想能够完全从Notion页面构建一个站点。将其作为首页，子页面作为站点上的页面。 我还希望可选择在Astro页面中通过代码编写主页，然后在Notion上有一个页面可以服务这些子页面。最佳组合。 所以当我想要添加一个页面到站点上时，我不需要打开电脑，打开VS Code，进入src/pages，创建一个新文件，编写HTML / JSX…我只需创建一个Notion页面，甚至可以在火车上使用我的智能手机，在那里编写内容，按下一个按钮来触发新的站点构建。 站点在构建时询问Notion它准备好发布的页面，获取它们，并构建一个带有该内容的静态站点。 我知道还有其他工具可以通过Notion创建站点，但与它们相比，这个方法完全可定制，对开发人员友好，并且Notion只是网站的一部分。 我有完全的控制权。网站的其余部分可以使用React、Svelte或其他任何技术构建。哦，我提到了React吗？在构建时进行服务器渲染是很棒的。我可以使用React的高级特性和JSX，生成HTML并将其传送给浏览器，而不是传送React本身并进行客户端渲染。 我对这个工作流程感到满意，使用这项技术构建了几个不同的站点。我喜欢它。它既简单，又不妨碍我想做的任何事情。 而且我认为这是一种新颖的网站发布方式。 我可以专注于内容而不是技术堆栈（讽刺的是，到现在我一直在和你谈论技术堆栈）。一旦构建完成，它就在幕后消失了。 网站构建工具很有趣。我喜欢构建网站，喜欢谈论构建网站。我已经使用它们工作了很长时间。 当我进行这个基础平台的重写时，我还必须从一个自定义的Hugo主题迁移，这个主题已经积累了多年的积尘、调整和条件语句。 我决定从零开始。我只有内容，没有其他东西。我添加了Tailwind CSS，这是我想做很久了，但是从来没有勇气迁移我那些成千上万行的自定义CSS。 简单开始，只是放置一些基本的CSS。我对之前的URL结构进行了复制，这样就不必处理可能让谷歌生气的URL更改。 界面看起来很清爽。我希望有一个简约的界面，没有花俏的东西。内容才是最重要的。我去掉了侧边栏。去掉了我积累的不重要的东西。我现在有一个包含所有文章的页面，而不是分页。对搜索来说非常好。我可以移除Algolia。代码更少。我有一种很好的方式来显示标签。 随便看看吧。 我还有深夜模式，因为我不希望你宝贵的眼睛在夜间受到伤害，你可以通过操作系统设置来打开它。 享受吧！