iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

DAY 1

JAMstack 讓你架站不用大費周章

JAMstack 讓你架站不用大費周章 其實很多時候接到的案子,業主的需求真的非常單純,他們不會整天吃飽太閒去改頁面的架構與設計、沒有太多的功能要求,而且最核心...

2020-09-14 ‧ 由 Sid 吸管 分享
DAY 2

JAMstack 到底是什麼巫術?

JAMstack 到底是什麼巫術? 首先呢,我先上一段引文來讓文章看起來高大上一點 A modern web development architecture...

2020-09-15 ‧ 由 Sid 吸管 分享
DAY 3

Markdown 到底在紅什麼?

Markdown 到底在紅什麼? 請容我故技重施,先來一段引用提升一下檔次 Markdown 是一種輕量級標記式語言,它允許人們使用易讀易寫的純文字格式編寫文...

2020-09-16 ‧ 由 Sid 吸管 分享
DAY 4

偏冷門卻有趣的 VuePress

冷門卻有趣的 VuePress 靜態網站生成器的選擇非常的多,比較常聽到用來產生部落格網站的可能有 Hexo 、 Gatsby.js ,其實也都是很棒的靜態網站...

2020-09-17 ‧ 由 Sid 吸管 分享
DAY 5

開始一個 VuePress 專案吧!

開始一個 VuePress 專案吧! 凡事都從最簡單基礎的架構開始體驗吧,第一步就是先確認電腦上有沒有相應的開發環境,因為 VuePress 是使用 Webpa...

2020-09-18 ‧ 由 Sid 吸管 分享
DAY 6

從了解 VuePress 的專案結構開始吧

從了解 VuePress 的專案結構開始吧 首先呢,就先來說明一下「約定」的目錄結構吧! 我們先來回顧一下昨天建立的檔案結構: . ├── README.md...

2020-09-19 ‧ 由 Sid 吸管 分享
DAY 7

VuePress最基礎的客製化:config.js

VuePress最基礎的客製化:config.js 這一篇不會把所有 config.js 的設定參數都完整列出,我只列出我覺得比較必要的設置,如果想看完整的設定...

2020-09-20 ‧ 由 Sid 吸管 分享
DAY 8

VuePress 客製化的核心:佈景主題

VuePress 客製化的核心:佈景主題 主題是客製化的基礎,其實我們前面直接運作起來時看到的畫面佈局,就是 VuePress 的預設主題。 而當預設主題無法滿...

2020-09-21 ‧ 由 Sid 吸管 分享
DAY 9

VuePress 1.x 版的架構核心:擴充套件

VuePress 1.x 版的架構核心:擴充套件 VuePress 目前的大版本號是 1.x ,而與 0.x 版相比,最重大的改變就是架構上使用 Pluggab...

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

Front Matter : Markdown 的細節設定

Front Matter : Markdown 的細節設定 我平常在寫 Markdown 文件的時候,常常都是新增一個文件之後就開始進行寫作了,其實這樣在畫面的...

2020-09-23 ‧ 由 Sid 吸管 分享