使用 GitHub Pages 和 VuePress 搭建網站
Create by jsliang on 2018-10-20 10:34:39
Recently revised in 2018-10-24 13:54:52
Hello 小夥伴們，如果覺得本文還不錯，記得給個 star ， 你們的 star 是我學習的動力！GitHub 地址
本文教你如何利用 GitHub 平臺搭建自己的部落格/文件庫。
如果，你的目的僅僅是想了解如何配置。那麼，你應該在看完 第三章 基礎配置 後，就可以自己去寫自己的部落格/文件庫，遇到不懂的問題，可以自己翻閱 VuePress 文件，解決你所需要解決的問題。
如果，你的目的是具體查詢某元件：例如導航條、例如側邊欄的配置。那麼，你可以直接查詢目錄，跳到對應章節進行閱讀。
參考文件：
-
參考地址：GitHub Pages
-
參考地址：VuePress 中文網
目前效果：
一 目錄
| 目錄名 |
|---|
| 一 目錄 |
| 二 前言 |
| 三 基礎配置 |
| 3.1 搭建 GitHub Pages |
| 3.2 搭建 VuePress |
| 3.2.1 目錄講解 |
| 3.2.2 導航欄 |
| 3.2.3 側邊欄 |
| 3.2.4 預設首頁 |
| 四 VuePress 進階 |
| 4.1 修改樣式 |
二 前言
一般的網站，大體由三部分組成：域名、伺服器部署環境以及部署程式碼。
- GitHub Pages，由 GitHub 網站服務，為眾多 GitHub 使用者提供了良好的伺服器部署環境以及域名的好工具。【Github Pages 官網】
- VuePress，是以 Vue 為驅動的主題系統的簡約靜態網站生成工具 balabala……它是我們尤雨溪大神折騰出來的一個工具，初始目的是為了方便他使用 Markdown 語法來寫文件，然後生成 HTML 程式碼，部署到伺服器上即可。在眾多網友的修改下，它可以拿來寫靜態網站，也就是可以拿來發布我們編寫的博文。【VuePress 官網】
說到這裡，小夥伴們大概懂了我們要講什麼了~
但是，如果這只是一篇關於如何入門 GitHub Pages 和 VuePress 的文件，我會覺得毫無意義。所以，jsliang 希望這篇文章能夠整合網上的 GitHub Pages 和 VuePress 資料，並且比它們豐富一丟丟，加入 jsliang 使用心得，讓小夥伴們看完無需翻閱大量文章也能快速做好自己的個人文件庫/部落格。那樣，我就心滿意足了。因為……
不折騰的前端，跟鹹魚有什麼區別！
本文涉及的技術點：
- GitHub
- Git
- Markdown
如果你不是很熟悉上面的技術，jsliang 推薦你去百度下資料，先學習下這些技術，再回來繼續學習。其中 GitHub 和 Git 的文章 jsliang 尚未整理，小夥伴只能去百度獲取資料了，這裡我提供一篇自己寫的 Markdown文章：地址。
如果你熟悉且瞭解上面的技術，那麼，讓我們愉快地繼續往下去折騰吧！
三 基礎配置
3.1 搭建 GitHub Pages
- 新建倉庫( New repository )，在倉庫名( Repository name )中輸入
使用者名稱.github.io，例如我的就是：LiangJunrong.github.io，然後點選 Create repository 即可建立一個部署好的環境。
- Clone 專案至電腦，並新增
README.md和index.html：
Hello Github Pages
===
 這是我的 GitHub Pages 初始目錄
複製程式碼index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Github Pages</title>
<style>
.container {
margin-top: 300px;
text-align: center;
}
</style>
</head>
<body>
<h1 class="container">Hello Github Pages</h1>
</body>
</html>
複製程式碼- 上傳到 GitHub：
git add .
git commit -m "Github Pages"
git push
複製程式碼- 開啟
使用者名稱.github.io：
如上，完成 GitHub Pages 的搭建，現在我們已經擁有了一個免費部署靜態頁面的平臺了。那麼，下面我們將講解如何通過 Markdown + VuePress 來編寫部落格。
3.2 搭建 VuePress
- 安裝 VuePress
在你需要存放的目錄中，通過終端命令列安裝 VuePress：npm i vuepress -D
- 建立目錄及部署程式碼
編輯 package.json：
package.json
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"devDependencies": {
"vuepress": "^0.14.4"
}
}
複製程式碼注：
npm run dev即可開始實時編輯模式npm run build即可對程式碼進行壓縮打包，打包後的資料夾在.vuepress/dist上。
然後建立 docs 資料夾，並在 docs 資料夾下建立 README.md 檔案
Hello VuePress
===
複製程式碼 最後在終端執行命令 npm run dev，並開啟 http://localhost:8080，得到初步配置介面如下：
值得注意的是。在這裡，我們是通過 npm run dev 即時獲取我們修改的頁面顯示。
然後，我們可以通過 npm run build 打包我們的程式碼，你可以在 .vuepress 中找到一個 dist 資料夾，然後將 dist 中的資料夾上傳至 使用者名稱.github.io，即可完成 VuePress 的部署。
3.2.1 目錄講解
在前面，我們講解了如何設定 VuePress 並啟動 現在，我們來個基配的目錄，進行講解：
- docs - VuePress 存放目錄
- .vuepress - VuePress 配置目錄
- public - 共用檔案儲存目錄
- img - 共用圖片目錄
- banner.png - 圖片-首頁 banner
- logo.ico - 圖片-網站右上角小圖示
- config.js - VuePress 的 js 配置檔案
- listOne - 側邊欄專案組1
- pageOne.md - 專案組1頁面1
- README.md - 專案組1預設頁面
- listTwo - 側邊欄專案組2
- pageThree.md - 專案組2頁面3
- pageTwo.md - 專案組2頁面2
- README.md - 專案組2預設頁面
- README.md - 網站預設首頁
+ node_modules - node 依賴包
- package.json - webpack 配置檔案
複製程式碼 其中，.vuepress 存放 VuePress 的配置目錄，public 中存放共有的檔案，config.js 為 VuePress 的配置檔案，listOne、listTwo 是側邊欄組，對頁面進行個分類。
3.2.2 導航欄
在這裡，我們開始進行頂部導航欄的配置。
首先，我們填寫下 config.js 中的配置程式碼：
config.js
module.exports = {
// 左上角標題
title: 'jsliang 的文件庫',
// 描述
description: '前端工程師 jsliang 的文件庫',
// 頭部部署，右上角小圖示
head: [
// ico 配置
['link', {
rel: 'icon',
href: '/img/logo.ico'
}]
],
// 主題部署
themeConfig: {
/**
* 右側導航條
* text - 顯示欄位
* link - 連結：注意前後帶 / 符號
*/
nav: [
{
text: '主頁',
link: '/'
},
/**
* 多級選單
* 開頭 text 為一級標題
* 陣列內 text 為二級標題
* link 為連結，注意帶 /
*/
{
text: '博文',
items: [
{
text: '微信小程式 bug 集中營',
link: 'https://github.com/LiangJunrong/document-library/blob/master/other-library/WeChatApplet/WeChatAppletBug.md'
},
{
text: '使用 GitHub Pages 和 VuePress 搭建網站',
link: 'https://github.com/LiangJunrong/document-library/blob/master/other-library/GithubPages/GithubPages.md'
}
]
},
{
text: '關於',
link: '/about/'
},
// 連結到網站
{
text: 'Github',
link: 'https://www.github.com/LiangJunrong'
},
]
}
}
複製程式碼 然後，啟動 npm run dev，開啟 http://localhost:8080，你可以看到導航欄部署完畢了。
3.2.3 側邊欄
VuePress 中的側邊欄配置，一共有三種方式：簡單配置，按組配置，分頁配置，有興趣的小夥伴可以去：地址 直接檢視，這裡我們單純講下我們部署我們的文件庫用到的分頁配置。
目錄如下：
然後，我們修改下 config.js：
config.js
module.exports = {
title: 'jsliang 的文件庫',
description: '前端工程師 jsliang 的文件庫',
head: [
// ...省略，配置程式碼同 3.2.2
],
themeConfig: {
nav: [
// ...省略，配置程式碼同 3.2.2
],
/**
* 側邊欄配置：側邊欄組
*/
sidebar: {
// 側邊欄在 /index/ 目錄上
'/index/': [
['', 'README'],
['indexTwo', '導航第二頁']
],
// 側邊欄在 /about/ 目錄上
'/about/': [
['', 'README'],
['GithubPages', 'GithubPages'],
['VuePress', 'VuePress']
]
}
}
}
複製程式碼 最後，我們執行 npm run dev，檢視 http://localhost:8080 所示如下：
可以看出，我們已經成功配置了分頁形式的側邊欄。
3.2.4 預設首頁
VuePress 為我們設定了一套預設的首頁，我們直接拿來用，看看它長什麼樣子吧！
首先，我們找一張 banner.png 圖，放到 public/img/banner.png 上。
然後，我們修改下 docs/README.md 檔案：
docs/README.md
---
home: true
heroImage: ./img/banner.png
actionText: 皮皮蝦 我們走 →
actionLink: /index/
features:
- title: 裝逼
details: 在這裡，你可以看到 jsliang 在這裡無限裝逼，所以你可以盡情打臉。就算你懂，沒關係，打了臉再說~
- title: 搞笑
details: 在這裡，你可以獲得各種學習歡樂，輕鬆進擊前端程式設計。點滴進步，成就不一樣的你。
- title: 深沉
details: 在這裡，你可以收穫一個廣州自身漂泊的人的情懷，感受在這個煩躁的社會 jsliang 如何安身立命。
footer: jsliang 的文件庫 | Copyright © 2018 不折騰的前端，和鹹魚有什麼區別
---
複製程式碼 OK，由於我們重新修改了首頁（即 docs/README.md），所以我們重新重啟下，Ctrl+C -> y -> npm run dev，重新開啟 http://localhost:8080：
完美！這樣，我們就完成了基礎的配置了！！！
四 VuePress 進階
4.1 修改樣式
正在逐步完善。
如果你覺得該篇文章對你非常有用，請給我在 GitHub 上的文件庫一個 star，你的 star 是我不斷折騰的動力~ 【Github 地址】
jsliang 的文件庫 由 樑峻榮 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/LiangJunron…上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。
