自己做一個部落格？嗯，我要多一點時間，好讓我再想一想。

本文主要記錄這十天試著建部落格的心路歷程，從意義與目的開始，嘗試了哪些技術，學到的東西，以及最後決定要用的方式。

尋它千百度的建部落格過程，實作時不斷被意義與目的瘋狂打臉

大概從兩三個月前開始吧，有意無意的搜尋那些關於「為什麼要寫技術文章」、「選擇架站技術的理由」，參觀了許多前輩的心路歷程，瞬間迷失在茫然大海中。為了創建一個部落格，我簡直是夢裡尋它千百度。

就不提「建部落格的目的及意義」，跟自己自我答辯了兩天，目前的結論是「發表文章能夠幫助自己梳理思緒」，就連域名也想了兩天，終於想出一個最適合的。

就在各種腦洞大開的多方嘗試下，赫然發現再這樣下去真的是沒完沒了，「理想很豐滿，現實很骨感」，這句話真真切切地打中我的心。

原因是我似乎找不到一個平衡點，對現在的我來說，要做出自己理想中的部落格，我的技術能力還差太遠了。所以要不我繼續寄生在平台上面，要不就是妥協版面，先做一個簡單的出來。

在這個過程中，開部落格的目的每天都出來打我的臉，「部落格最重要的是持續的創作，過度追求理想中的工具簡直不切實際」，嗚嗚臉好痛。

零零散散的開了十五篇筆記，覺得不寫一篇文章出來，我會繼續痛扣下去，所以這裡主要想記錄試著創建一個部落格的過程，以及最後決定用的方案。

一路上接觸到的技術名詞

仔細探究了一下，發現部落格可以分成幾個層面：

1. 前台長相：Gatsby, hexo, eleventy, Next, hugo

2. 後台管理：Ghost、Netlify、其他 CMS

3. 部署：Netlify、GitHub Pages、Vercel

4. 其他：Tailwind CSS

來吧，11ty

首先試著跑了 eleventy-high-performance-blog，很快的就裝好了。前輩分享的技術果然好棒好香，lighthouse 一百分。但是呢，在不斷嘗試的過程中，才真正意識到心中所想及需要的功能是什麼。

寫出需求才發現自己眼高手低

我的需求其實寫下來也不是那麼簡單，還有一些漂亮啊、好修改啊等等等：

1. 頁面以卡片式陳列，能有漂亮的圖片

2. 如果是用 algolia 做的全文搜尋功能就太好了

3. 盡量以 SSG 部署到 GitHub Pages

4. 不能有後台也沒有關係

5. 有標籤功能

6. 程式碼高亮功能

7. 支援兩種語言

這幾天幾乎看了不下幾百個 starter template，尋尋覓覓，又換到了另一個坑。

Next.js + Tailwind

意外看到了這個 網站，簡直太美了，堪稱心中的完美典範，找到了 Tailwind Nextjs StarterBlog，修修改改兩三天以後，發現跟心裡所想的還是有一段差距。

來看看 File Structure

.
├── LICENSE
├── README.md
├── components
├── css
├── data
├── jsconfig.json
├── layouts
├── lib
├── next.config.js
├── package-lock.json
├── package.json
├── pages
├── postcss.config.js
├── prettier.config.js
├── public
├── scripts
└── tailwind.config.js

一開始在本地端跑起來，看到的檔案的時候還是傻眼，即使裡面沒有像 11ty 用 Nunjucks，大部分都是我熟悉的前端技術，但對我來說，要可以隨心所欲的修改還是非常吃力。

第一次體驗到 Vercel 部署的魅力，我真的驚呆了，怎麼會有這麼容易的部署方式啊，這一切的一切，Next.js 加上 Tailwind 美到不行的框架，完全佔據了我的注意力。

在這裡我學習到了 Tailwind 這個極美易用的工具，也體驗了 Next.js，裡面是相對於其他技術比較熟悉的 React 好夥伴。

可是可是，研究了幾天，洋洋灑灑寫了一則修改全記錄，還是感覺維護這個網站所花費的心力，對現階段的我來說不太合適，畢竟持續記錄比什麼都來得重要。於是我又把目光轉向其他模板，就在一陣苦思以後，我決定再次回到 11ty，再給彼此一個機會。

忽有龐然大物，拔山倒樹而來，蓋 google 也

接著我居然腦洞大開的想說，不然把 google 用 11ty 技術做的現成網站拿來改好了，畢竟我這麼想要搜尋功能。找到了下面兩個網站，試著把它們複製到本地跑跑看

1. https://web.dev/

2. https://developer.chrome.com/

這一做發現不得了了，我根本改不動啊啊啊啊啊啊啊啊啊啊，對於自己的異想天開感到羞恥，在本地端試跑的過程中，風扇不斷瘋狂運轉燃燒，我的小宇宙也不斷不斷的被現實打擊。好吧，這樣下去真的不行，我簡直要在電腦前大笑起來。

藉由觀摩大專案，好像也有一些些收穫：

1. 原來肥碩的專案長這樣

2. file structure with top level

// https://web.dev/
.
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── algolia.js
├── cloud-secrets.js
├── dist
├── firebase-config.js
├── firebase.incl.json
├── firebase.json
├── functions
├── gulp-tasks
├── gulpfile.js
├── jsconfig.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── redirects.yaml
├── rollup.config.js
├── run-algolia.js
├── shared
├── src
├── test
├── tools
├── tsconfig.json
├── types
├── ui-debug.log
└── version-check.js

// https://developer.chrome.com/
.
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── algolia.js
├── app.yaml
├── ava.config.js
├── cloud-secrets.js
├── dist
├── external
├── gulp-tasks
├── gulpfile.js
├── lighthouserc.js
├── netlify.toml
├── package-lock.json
├── package.json
├── redirects.yaml
├── rollup.config.js
├── server
├── site
├── tests
├── tools
├── tsconfig.json
├── types
└── version-check.js

3. 大部分的修改會在 src 底下

4. 這裡跑出了一個子課題：「新手怎麼從頭看一個專案？」

a. 確認需求，條列出所有功能

b. 試著在本地端跑跑看

c. 找出運用的技術，拆解這些技術

d. 以最快的速度做出一個最小 MVP 練習技術

就在體認到這條路不可行以後，我開始妥協了，把需求刪刪減減，最後找到了看似需求很符合的 template。

與 Gatsby 初次見面

一直聽說 Gatsby 的強大，在用盡所有關鍵字的情況下，找到了一個感覺都符合我需求的 Gatsby and Netlify CMS，經過一陣修修改改，就在我感覺好像是這個網站的時候，忽然意識到，如果有後台的話，部署必須要有個主機託管。我開始思考到底後台這件事，對於發表文章的影響有多大？沒有後台會是一個阻礙嗎？

在這裡也學習到了，Gatsby 號稱擴展性強，同時也意味著複雜，仔細想想也是很有道理的。在一陣掙扎後，我看到了這篇文章 Obligatory blog post to explain why I moved from SSG GitHub Pages to Ghost，真的是寫得太好了，非常感謝這篇文章的作者，把心路歷程完整的寫出來，彷彿看到了未來的自己，假設我繼續這樣走下去的話，我大概也會是一個平台換過一個平台。

「用自己喜歡的技術，建一個部落格」這件事對目前的我來說，還太遙遠。

我又回到了最一開始最常看見的關鍵字 Ghost，並偶然看到了這篇文章 利用Netlify/Vercel和Digitalpress搭建免费Ghost静态博客，心想不然照著做做看好了，看用起來會是怎麼樣。

基本上就是利用 DigitalPress 免費的 Ghost 方案，部署在 Vercel 並且讓 DigitalPress 跟 Vercel 掛勾，在 DP 的後台發文時，就會自動觸發 Vercel 的部署。

程式碼高亮暫時用 code injection 解決了，所以暫時應該會窩在 CoderBridge + Ghost 吧，其他的事就留給以後了。

我的體悟

發現自己在修改的過程中蠻快樂的，居然到了廢寢忘食的地步，也太扯了。

想要馬好又要馬不吃草是不可能的。

開機執著，關機放下。