如今的 Web 開發變得如此複雜，這要歸功於數千種新方法的創造者來完成同樣的事情。在 Web 開發的早期，他使用了 PHP 和 jQuery，它們幾乎可以完成我們需要的一切。但現在情況已經改變了。
所以，我正在尋找一種建立我的個人網站的方法。其中會有一些部落格和我的專案展示，就是這樣，沒什麼大不了的，對吧？好吧，雖然也是一樣的事情。所以，我最初的想法是使用這些作為我的技術堆疊
嗯，這可能是幸福的結局，但是......？
正如我已經說過的，我需要一個部落格部分，諷刺的是部落格和 React 並不能很好地結合在一起。由於 React 基本上是用於建立 Web 應用程式而不是內容驅動的網站。現在那些不知道為什麼的人這裡有一個來自chatGPT的總結
ChatGPT 說，
React 對於內容驅動的網站來說並不理想，主要是因為它依賴客戶端渲染，這可能會對 SEO 和初始頁面載入時間產生負面影響。內容驅動的網站受益於伺服器端渲染 (SSR) 或靜態網站產生 (SSG)，而 React 無法直接處理這些內容。 Next.js 或 Gatsby 等擴展了 React 的工具更適合這些需求。
很明顯，我需要為部落格網站提供 SSR，因為我想要搜尋引擎良好的索引和專業的社交媒體連結預覽。 NextJs 可以給我這兩點，但仍然存在一個問題，而且是個人問題。
看，我一直喜歡使用 cloudflare 頁面並想堅持下去，此外我希望 cloudflare 的免費電子郵件路由將自訂電子郵件地址附加到我的網域，從而降低成本。
我嘗試透過他們的官方文件將 nextJS 網站部署到 cloudflare 頁面。嗯，事情進展不順利。我無法在那裡部署，我嘗試了幾個小時尋找解決方案，但沒有任何效果。這麼說吧，nextJS 和 cloudflare 對我來說並不能很好地結合在一起。因此，如果 Vercel 或 Cloudflare 的任何人閱讀本文並糾正我，如果我遺漏了某些內容。
好吧，此時我已經絕望了，我最後的選擇是SSG。
現在SSG很好，我明白這裡的重要性。問題是我以前從未與 SSG 合作過，並且有多種途徑可以通過。有像雨果、蓋茲比、阿斯特羅等等之類的東西。可能還有更多。現在我對其中任何一個都不熟悉，此時我非常沮喪，以至於我不願意花一點錢來學習一個簡單的部落格應用程式的新工具。所以我當時就想，我會做我自己的事。
我決定開發自己的靜態網站產生器的幾點原因
該計劃採用老式的方式創建網站。單獨的文章將有自己的 html 頁面。
完整大綱如下：
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/
好吧，我開發了一個 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
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.
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
There's also a CLI Interface which can be used by ./fit upload 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 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 . 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. 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中文網其他相關文章！
Dynamic Ambient Bcakground
Comments and Discussion
Was it Worth It?
Wrapping Up
