iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
Modern Web

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

開始一個 VuePress 專案吧!

開始一個 VuePress 專案吧!

凡事都從最簡單基礎的架構開始體驗吧,第一步就是先確認電腦上有沒有相應的開發環境,因為 VuePress 是使用 Webpack 來進行模組處理的,而且目前前端各項工具基本上都離不開 Node.js 的執行環境,所以要先進行安裝,如果已經安裝的也要確認版本喔。

VuePress 需要 Node.js >= 8.6

如果沒有安裝過 Node.js 的話,可能你目前不是專精於前端領域的開發者,先到 Node.js 官方網站下載 LTS 版本安裝即可,本文撰寫時 LTS 版本為 12.18.3

而 Node.js 中有內建一個叫做 npm 的套件管理工具,但是因為 VuePress 官方建議使用 Yarn 進行套件管理,所以還需要打開終端機視窗輸入下面的指令安裝 Yarn:

npm install -g yarn

該裝的環境安裝完,就可以進行下一步囉!


建立專案資料夾

不管你是喜歡下指令,還是喜歡用滑鼠點,都沒有關係,反正有辦法建立出一個專案資料夾就可以了,但是資料夾建立好之後,還是得靠指令了喔!

一樣打開終端機,先進入剛剛建立好的資料夾輸入指令 yarn init

專案初始化的設定可以不用管,先都用預設值一路 Enter 就好了
https://i.imgur.com/1lK2k88.png

完成後資料夾內會多一個 package.json 的檔案,這個檔案會記錄專案內用到的套件與指令,接著我們就來安裝第一個套件 VuePress 吧!

yarn add -D vuepress

接著要在剛剛提過的 package.json 中新增一段腳本,透過腳本的運行環境才能順利執行 VuePress 的各項指令喔:

"scripts": {
    "dev": "vuepress dev ./",
    "build": "vuepress build ./"
},

貼上之後的 package.json 大致上會長這樣:
https://i.imgur.com/ymG0qvn.png


新增第一份文件啦

直接在專案根目錄中新增一個 README.md 檔案,檔案裡面可以使用 Markdown 的語法先隨便輸入一些內容
https://i.imgur.com/FEL64kC.png

接著就可以到終端機視窗,輸入指令 yarn dev 來運行開發模式囉!

輸入完等子彈飛一會,沒有意外的話就會看到像這樣的畫面:
https://i.imgur.com/VQM93u8.png

這時候我們就可以打開瀏覽器連線到 http://localhost:8080/ 來確認一下運行結果啦!

可以看到剛剛我們在 README.md 中輸入的內容已經呈現在網頁上了,而且如果有安裝
Vue.js devtools 的話,還可以看到組件與狀態喔。


新的頁面分類

當然網站也不可能只有一個頁面對吧?

我們就來試試看新增一個資料架 news,裡面新增兩個檔案:

  • README.md
  • test.md

儲存完之後我們再到網頁上面看看,網址列直接輸入 http://localhost:8080/news/ 就會顯示我們剛剛在 news 資料夾中 README.md 的內容

這個是因為 VuePress 預設將資料夾內的 README.md 視為根目錄文件喔。

所以如果想到看到 test.md 的內容,就只能輸入完整的路徑 http://localhost:8080/news/test.html 囉。

而這個 .html 則是因為 VuePress 將 .md 編譯為 HTML 文件的關係。

其實 VuePress 預設的主題內就有搜尋功能,也是可以趁機玩玩看啦!


更深入的專案結構

今天就透過簡單的展示來帶你啟動第一個 VuePress 專案,但是真正想要活用 VuePress 的話,這樣可就太單調啦。

明天就來針對專案結構做一個比較進階的解說吧。


上一篇
偏冷門卻有趣的 VuePress
下一篇
從了解 VuePress 的專案結構開始吧
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言