擰它！我開發了自己的靜態網站產生器！

如今的 Web 開發變得如此複雜，這要歸功於數千種新方法的創造者來完成同樣的事情。在 Web 開發的早期，他使用了 PHP 和 jQuery，它們幾乎可以完成我們需要的一切。但現在情況已經改變了。

長話短說

所以，我正在尋找一種建立我的個人網站的方法。其中會有一些部落格和我的專案展示，就是這樣，沒什麼大不了的，對吧？好吧，雖然也是一樣的事情。所以，我最初的想法是使用這些作為我的技術堆疊

• 反應
• Firebase/Supabase
• Tailwind CSS
• 用於部署的 Cloudflare 頁面

嗯，這可能是幸福的結局，但是......？

正如我已經說過的，我需要一個部落格部分，諷刺的是部落格和 React 並不能很好地結合在一起。由於 React 基本上是用於建立 Web 應用程式而不是內容驅動的網站。現在那些不知道為什麼的人這裡有一個來自chatGPT的總結

為什麼 React 不適合內容驅動的網站

ChatGPT 說，

React 對於內容驅動的網站來說並不理想，主要是因為它依賴客戶端渲染，這可能會對 SEO 和初始頁面載入時間產生負面影響。內容驅動的網站受益於伺服器端渲染 (SSR) 或靜態網站產生 (SSG)，而 React 無法直接處理這些內容。 Next.js 或 Gatsby 等擴展了 React 的工具更適合這些需求。

下一個目標：NextJs

很明顯，我需要為部落格網站提供 SSR，因為我想要搜尋引擎良好的索引和專業的社交媒體連結預覽。 NextJs 可以給我這兩點，但仍然存在一個問題，而且是個人問題。

看，我一直喜歡使用 cloudflare 頁面並想堅持下去，此外我希望 cloudflare 的免費電子郵件路由將自訂電子郵件地址附加到我的網域，從而降低成本。

Cloudflare 的 NextJS

我嘗試透過他們的官方文件將 nextJS 網站部署到 cloudflare 頁面。嗯，事情進展不順利。我無法在那裡部署，我嘗試了幾個小時尋找解決方案，但沒有任何效果。這麼說吧，nextJS 和 cloudflare 對我來說並不能很好地結合在一起。因此，如果 Vercel 或 Cloudflare 的任何人閱讀本文並糾正我，如果我遺漏了某些內容。

好吧，此時我已經絕望了，我最後的選擇是SSG。

下一個解決方案：SSG

現在SSG很好，我明白這裡的重要性。問題是我以前從未與 SSG 合作過，並且有多種途徑可以通過。有像雨果、蓋茲比、阿斯特羅等等之類的東西。可能還有更多。現在我對其中任何一個都不熟悉，此時我非常沮喪，以至於我不願意花一點錢來學習一個簡單的部落格應用程式的新工具。所以我當時就想，我會做我自己的事。

建立我自己的靜態網站產生器。

我決定開發自己的靜態網站產生器的幾點原因

1. 我很沮喪（當然哈哈）
2. 由於我正在為自己的事情製作自己的工具，因此我將完全控制頁面的生成方式。他們會是什麼樣子。
3. 我喜歡重新發明。
4. 我有空閒時間。

計劃

該計劃採用老式的方式創建網站。單獨的文章將有自己的 html 頁面。

完整大綱如下：

1. 我將在 palin Markdown 文件上寫作
2. 使用python將markdown解析為純HTML
3. 我已經有了一個模板，其中不同的部分將被動態注入。
4. 此外，我還將有一個與本文相對應的設定檔。所以檔案層次結構看起來像這樣

articles/
├── art-1
│   ├── art.md
│   └── config.json
├── art-2
│   ├── art.md
│   └── config.json
├── art-3
│   ├── art.md
│   └── config.json
└── art-4
    ├── art.md
    └── config.json

因此，每個貼文都會有自己的資料夾，該資料夾將包含config.json 和art.md ，python 腳本將採用template.html 並將動態內容插入到該HTML 範本中，例如貼文標題， slug、設定檔中的縮圖和解析後的Markdown 檔案中的主要文章。最重要的是，它將動態產生 SEO 和社群媒體的元標記。之後，它將更改寫入名為 art/.html 的文件，以便帖子連結為 example.com/art/slug。

它是如何整合的？

好吧，我開發了一個 CLI 介面來與生成器互動。我把它命名為fit，就像F it一樣。它具有以下命令或選項：

$ ./fit --help
fit: also known has f**k it build system
A build system for my personal site developed by Shazin

USAGE
     fit <action> <argument>
COMMANDS
    init                Creates a new post template at articles/art-[n]
    build art-<n>       Builds the specified article
    sync                Syncs the global articles index to homepage
    uploader            Launches the GTK GUI image uploader
    upload <file_path>  Uploads the specified file to firebase
    deploy              Deploys local changes to remote repository
    help, -h, --help    Displays this help menu

Deployment mechanism

So, like I said I wanted to use Cloudflare pages for deploying. Basically what I've done is I've created a branch called prod and whenever the ./fit deploy command is run it will basically copy all the necessary files to the prod branch and push the changes to github. Then, cloudflare will automatically build and redeploy the changes.

Handing images

In order to handle images or any static files I have used firebase storage, the ./fit uploader will pop open a GTK based GUI uploader from which I can upload an image and it will give me the public url which I can than copy, Here's how it looks:

Upload Interface

Post Upload Interface

CLI Interface

There's also a CLI Interface which can be used by ./fit upload

Dynamic Ambient Bcakground

So, I thought when I am the one handling all the building and generation myself I can definitely do some cool stuffs with it, so I've added a dynamic colored ambient background to each post. The idea was to pick an average color from the thumbnail image and then darken it and use it as the background. I've also picked a primary color for the links and buttons from the thumbnail image as well and honestly to me, it looks really cool, here's an screenshot

Comments and Discussion

Since I was working with basically no database or no backend service at all, I had to choose an external service for this and what else does this better than Disqus .

Was it Worth It?

Well, to be honest like I said I was spending some free times, so yeah it was definitely worth it, and it didn't take me long time to be honest I've spent 2-3 days for this full project and really had fun building something creative.

Wrapping Up

So, I've had really fun experience with this project and will hopefully do more improvements and add more functionalities to it. Right now it's so basic and simple which was what I wanted. If you like this project or want me to open source it please let me know. Oh and here's the link of the site I was screaming about shazin.me Thanks for reading.

以上是擰它！我開發了自己的靜態網站產生器！的詳細內容。更多資訊請關注PHP中文網其他相關文章！