司馬宏達 ll 旅嚼放題

上一篇：VuePress+GitHub架網站(一)-安裝VuePress，教大家如何安裝VuePress，安裝完接下來要進行VuePress專案的架構設定。

VuePress基本架構

VuePress基本的架構大概是這樣

主要資料夾
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

上一篇已經教大家透過 npm init  的方式建立了  package.json 其他的部分我們就需要自己建立。

建立內容包含：

1. 主要資料夾內建立： docs 資料夾

2.  docs 資料夾內建立： README.md 檔案、 .vuepress 資料夾

3.  .vuepress 資料夾內建立： config.js 檔案

網站基本設定 - config.js

在VuePress網站中， .vuepress/config.js 檔案用來掌控整個網站的必要配置，無論是架構、網站名稱、描述等等都撰寫在這裡。

一開始就先來設定網站標題、描述設定吧～

首先打開 config.js 檔案，輸入以下內容、存檔。

module.exports = {
    title: '司馬宏達的 VuePress 教學示範',
    description: '這是一個如何建立VuePRess的示範網站',
  }

語法說明：title指的是網站的標題、description則是網站描述，'  ' 單引號中間的文字可以自行更換。

網站首頁 - README.md

在VuePress網站中， docs/README.md  是預設的首頁，副檔名md指的是它是使用Markdown語法的檔案。

打開 README.md 檔案，輸入以下內容

# HELLO

執行專案

在終端機輸入

yarn docs:dev

或

npm docs:dev 

專案就會進行build，完成後使用瀏覽器進入 http://localhost:8080/ 就可以看到剛剛設定的標題與首頁內容囉！

接下來是設定側欄選單：VuePress+GitHub架網站(三)-側欄選單建立