緣起

在全端打滾久了後， 終於在去年底默默轉職了純前端， 更多東西要塞進我小小的腦袋裡， 但是度過了一段很充實的時光， 只是心心念念的部落格就離我越來越遙遠了...

在今年初，Vue 團隊正式推出了 vitepress 1.0， 一瞥而過的我看到幾個關鍵字 vite、Markdown、SSG， 這不是完美符合我寫部落格的需求嗎? 要 SEO 有 SEO，要技術熟悉度有熟悉度，Markdown 和 Vue 混用? 尬店~ 聽起來也太棒了吧!! 然後，就繼續忙工作、家庭、小孩......

這樣不行， 剛好要鐵人賽了，有前年的經驗， 我知道參賽可以強迫我自己把東西弄出來 (雖然富含水分)， 加上 Vue.js Taiwan社群 大大們的鼓勵， 終於硬著頭皮跨出那一步了， 來記錄從無到有怎麼利用 VitePress 建立一個可以用的部落格好了!! 水分依然充足，能成功完賽就好。小孩真的是時間黑洞，完賽可能性下降百分之50

30天的建構階段

30天分成五個部分， 以一個心慌慌眼茫茫菜鳥學習筆記的角度來撰寫， 會記錄目標、流程、想法及過程中踩到的各種坑， 自己做筆記的同時，也許能讓其他人少走點彎路， 期望就算跌跌撞撞也能達陣。

1. 前言、環境專案建立和一些基礎設定。

2. Vite Plugin 和 ESLint & stylelint 整合

3. 利用製作一份簡述履歷來嘗試 VitePress 功能。

4. 改造 VitePress 主題、並把一些麻煩的東西動態化。

5. 利用一些套件擴充部落格功能 & 後記。

✨️ 文章閱讀基礎：

筆記中默認各位讀者都有一定的 Javascript(Typescript)、Vue3、Vite 基礎， 畢竟 Opshell 菜菜的，不會用啥高深的技巧 (所以各位大大都可以看懂)

小結

在架設過程中， 真的覺得 VitePress 是個好東西， 期望可以寫出不錯的文章， 讓各位讀者領略 viterpess 的魅力， 一同投入他的懷抱。

整個鐵人賽發佈的文章可以在it邦， 或者本目前所在地中觀看。 鑑於 VitePress 厲害的優化，部落格中提供更好的閱讀體驗， 歡迎大家來逛逛 (雖然完成度還很低，但是就愛現。