文檔首頁
詳細文檔
開發準備
只需要滿足上述三個要求，任何人就都可以寫出來一套屬於自己的文檔網站~
新建github代碼倉庫
新建github代碼倉庫
克隆代碼到本地
克隆代碼到本地
使用Github Pages
新建index文件
在當前文件下新建index.html
新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>hello github</h1>
</body>
</html>保存並提交代碼至github，提交代碼後等待1分鐘
瀏覽器訪問 http://自己的github用戶名.github.io 看到hello github 到這一步 Github Page已經可以正常使用
如果不想用VuePress寫文檔，可以隨便寫點東西提交代碼即可更新。
VuePress 使用
安裝
# 全局安裝VuePress npm install -D vuepress
本地新建文件夾>vuepress vuepress/新建docs文件夾 vuepress/新建package.json文件 vuepress/docs/新建README.md文件
創建文件
在docs/README.md中添加代碼
# my first vuepress
在package.json中添加代碼
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}在vuepress中啓動命令
npm run dev
啓動成功後打開看到以下頁面說明vuepress已經初步配置成功
如果本地8080端口被佔用請根據命令行中提示點端口進行訪問
啓動開發模式
文件配置
docs/文件下新建public/文件下新建img/文件下放入一張圖片，用作首頁顯示圖片
首頁圖片
修改首頁顯示文件 docs/README.md 官方配置手冊
--- home: true heroImage: /hero.png actionText: 快速上手 → actionLink: /zh/guide/ features: - title: 簡潔至上 details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專注於寫作。 - title: Vue驅動 details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。 - title: 高性能 details: VuePress 爲每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作爲 SPA 運行。 footer: MIT Licensed | Copyright © 2018-present Evan You ---
docs/文件下新建.vuepress文件夾/新建config.js文件
config配置文件
導航欄及側邊欄配置 .vuepress/config.js 官方配置手冊
module.exports = {
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
],
sidebar: [
'/',
'/page-a',
['/page-b', 'Explicit link text']
]
}
}還可配置搜索框匹配、上/下一篇鏈接、自定義頁面等，官方文檔都寫的非常清楚，可根據需要自行配置即可。
打包項目
全部配置完成後打包項目
npm run build
打包成功之後找到 docs/.vuepress/dist 文件夾下文件，全部拷貝到剛開始配置的 Github Page代碼倉庫中，提交代碼，等待一分鐘後訪問 http://自己的github用戶名.github.io
到此已經完成了所有配置，至於裏面寫什麼，完全有你自己決定了。
最後說下爲什麼用這種方式寫一些文章、筆記 我曾在自己的服務器上寫博客，筆記網站，優點就是什麼都可以自定義，並且想改什麼就改什麼。但是缺點太多了，自己部署服務器環境，裝mysql，寫後臺，寫數據庫，再寫前端...這下來搞得頭皮發麻，成果還不盡理想，最關鍵的是服務器最便宜一年也好好幾百。。萬一那天養不起服務器了，之前寫的東西就全白費了不是。 現在用github加vuepress，理論上來說，域名是永久可以訪問的，這樣一個在線文檔或博客（根據你自己的配置喜好），並且vuepress也是基於vue的單頁應用，訪問速度及用戶瀏覽反饋還是很棒的！