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


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

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

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

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

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

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

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

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

一路上接觸到的技術名詞

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

  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 吧,其他的事就留給以後了。

我的體悟

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

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

開機執著,關機放下。







你可能感興趣的文章

JavaScript除錯

JavaScript除錯

JavaScript: Object-oriented JavaScript, Prototype Chain & This

JavaScript: Object-oriented JavaScript, Prototype Chain & This

pWnOS v2.0 Walkthrough

pWnOS v2.0 Walkthrough






留言討論