Skip to content

怎麼構建一個類 Hacker News 的個人博客?

前言

我還是很喜歡寫東西的,讀完一本書就寫一小段。好書就邊寫邊回味,不好的就好好說道說道,感嘆一下又浪費了時間。

後來用 Golang 用得多了,知道了 Hugo。就用 Hugo 搭了一個。

最近突然想做一個 Hacker News 的週刊,因為我看阮一峰的科技愛好者週刊其實很多內容也是來自 Hacker News。我就想既然我知道一手信息來源,就沒必要吃二手信息了。再一個是,他現在推薦的那些開源項目,一看那藍紫漸變配色就知道是 vibe coding 出來的東西,實在是乏味。我來做一個純 Hacker News 信息的週刊。

於是我就想做一個類 Hacker News 的個人博客。

調研

最近 Next.js 用得多了,習慣性準備用它去實現。

現在調研都是和 AI 一起去完成的了。DeepResearch 這麼好用,得好好用起來。

現在我問問問題,大體都是這個結構:

  1. 我準備做一件事,我準備這樣做,因為現狀是這樣的。
  2. 你看我這樣做的合理嗎?這樣做的優缺點是什麼?
  3. 你有更好的解決方案嗎?給出三個可替代方案並且給出他們的優缺點。

ChatGPT, Gemini, Grok 全部排上用場。出三份報告。

最後 Grok 的報告建議我試試 Astro, 因為它在生成靜態網頁上有天然的優勢,它就是用來幹這個的,而且還可以用 vite 做構建工具。一聽到這裏我就開心了,平時 Next.js 的開發體驗和構建時間確實是讓人受夠了。

而且 Astro 還有很多主題支持,免費的也有很多,這可以節省下很多時間。我不需要從頭構建,只需要站在巨人的肩膀上眺望。

幾經翻找,我找到一個相對簡約的,功能也完善的 AstroPaper, 我只需要仔細閱讀一下文檔,甚至代碼實現,改造成我需要的樣子即可。

構建

  1. 去掉首頁除了文章展示外的所有模塊,因為我想要別人一進來就可以看到我寫的東西,沒有其他花里胡哨的東西,就像 Hacker News 一樣。然後模仿 Hacker News 寫一個渲染 List 的組件,區分週刊和普通文章的邏輯即可。

注意,靈魂是文章標題前面要有類似於 Vercel 的淺灰色 ▲ , 下面要有

	79 points by kgwgk 45 minutes ago | hide | 8 comments
  1. 主配色和字體改為 Hacker News 的 #FF6600 和 Verdana, Geneva, sans-serif.

在 TailwindCSS 的

--accent: #ff6600;
font-family: Verdana, Geneva, sans-serif;src/styles/global.css

改完這兩項之後就已經初具人形了。

安能辨我是雌雄?

  1. 之後就是加上 giscus 這個評論組件了。加上一些微調。給這個站點換上一個 S 字母的 YC logo 😆

大功告成了,半天時間就完成了。AI 加持下,可謂兵貴神速。

總結

AI 時代下,從技術選型到構建,我都在使用 AI,除了一些細節上需要我介入,打磨一下,然後得到我想要的效果,其餘時間都是 AI 在工作。

毫無疑問,AI 已經深度介入我的工作流。遇到什麼我都虛心向 AI 請教,更多時間花在了驗證輸出結果的正確上,還能在和 AI 的結伴工作中得到一些 AI 激發我的額外思考,這個很有趣,很像 Antirez 說的:

Still, to verify all my ideas, Gemini was very useful, and maybe I started to think at the problem in such terms because I had a “smart duck” to talk with.

最後,開始我的新博客之旅吧。



Share this post on:

Comments


Previous Post
如何構建智能體應用?
Next Post
未來個人創業的 PoI 方法論