iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列

JAMstack 網站開發架構拉近了靜態網站與 SSR 之間的功能差距,同時保持了靜態網站高性能、低成本、高安全性的關鍵優勢。

而 VuePress 則是一個以 Vue 為核心的靜態網站生成器,VuePress 最大的特色就是對 Markdown 的預處理機制,可以讓使用者透過 Markdown 建構內容時在 md 檔中靈活的使用各種預先定義好的 Vue 組件。

這系列的文章就來分享如何使用 VuePress 實作 JAMstack 網站開發架構,一起來玩弄 Markdown 建置一個超高靈活性的部落格兼官網吧。

DAY 21

Layout : VuePress theme 主題的基礎

Layout : VuePress theme 主題的基礎 想要進行主題的開發,自然就要先對主題的專案結構有所了解,最最最基本的主題結構莫過於此: . └─ ....

2020-10-04 ‧ 由 Sid吸管 分享
DAY 22

VuePress theme 主題結構

VuePress theme 主題結構 上一篇說明了 Layout 的概念其實就已經可以達成一定程度的客製化了,但人都是貪婪的,光靠簡單的 Layout 切換我...

2020-10-05 ‧ 由 Sid吸管 分享
DAY 23

VuePress : `theme/index.js` 主題配置文件

VuePress : theme/index.js 主題配置文件 上一篇說明了 theme 主題中的目錄結構,但是關鍵的 theme/index.js 卻被我賣...

2020-10-06 ‧ 由 Sid吸管 分享
DAY 24

VuePress : theme/enhanceApp.js 主題增強術

24. VuePress : theme/enhanceApp.js 主題增強術 上一篇說明了主題在需要安裝 plugins 外掛套件時需要配置的 theme/...

2020-10-07 ‧ 由 Sid吸管 分享
DAY 25

VuePress 的全域計算屬性

VuePress 的全域計算屬性 在開發主題的時候,關於 config.js 、 theme/index.js 以及 .md 當中的 Front Matter...

2020-10-08 ‧ 由 Sid吸管 分享
DAY 26

來用 Vue 玩弄 Markdown 囉

來用 Vue 玩弄 .md 囉 VuePress 有一個滿有趣的機制,我認為也是一個很有趣的特色,其實這系列剛開始的介紹篇就有提到過了,猜到我要說什麼了嗎?沒錯...

2020-10-09 ‧ 由 Sid吸管 分享
DAY 27

不會程式也能用 VurPress 玩 JAMStack 架設網站(1)

不會程式也能用 VurPress 玩 JAMStack 架設網站(1) 我在研究 JAMstack 的過程中,一直在想是否能夠整理出一個流程,讓即使是完全不懂技...

2020-10-10 ‧ 由 Sid吸管 分享
DAY 28

不會程式也能用 VurPress 玩 JAMStack 架設網站(2)

不會程式也能用 VurPress 玩 JAMStack 架設網站(2) 這篇延續上一篇的進度,我們看到我們的 GitHub Actions 在 yarn bui...

2020-10-11 ‧ 由 Sid吸管 分享
DAY 29

把 HackMD 當成網站後台

把 HackMD 當成網站後台 前面已經分享了如何完全透過網頁的操作,就可以把 VuePress 網站給架設起來,還可以修改文章與發新文章,不過如果未來網站要交...

2020-10-12 ‧ 由 Sid吸管 分享
DAY 30

Netlify CMS : 完全就是為了 JAMstack 而設計的 CMS 系統

Netlify CMS 完全就是為了 JAMstack 而設計的 CMS 系統 前面分享了直接使用第三方的網頁服務來進行內容修改的方法,但有時候如果想提升整體網...

2020-10-13 ‧ 由 Sid吸管 分享