今日就教大家如何建立自己的知識檔案庫！
不要服務器！
不要流量費！
只需要一個碼雲賬戶！
白嫖纔是程序員的王道！
一切的收費都是耍流氓！
我們要把錢存着娶媳婦！
什麼是vuepress
通過編寫Markdown 來生成靜態網頁
VuePress 由兩部分組成：一個以 Vue 驅動的主題系統的簡約靜態網站生成工具，和一個爲編寫技術文檔而優化的默認主題。它是爲了支持 Vue 子項目的文檔需求而創建的。
由 VuePress 生成的每個頁面，都具有相應的預渲染靜態 HTML，它們能提供出色的加載性能，並且對 SEO 友好。然而，頁面加載之後，Vue 就會將這些靜態內容，接管爲完整的單頁面應用程序(SPA)。當用戶在瀏覽站點時，可以按需加載其他頁面。
VuePress 是一款使用 Vue 驅動的靜態網站生成器，是 Vue 的作者 Evan You 爲了方便文檔的編寫而開發的。
- 默認主題與 Vue 官方文檔一致
- 簡潔，少配置，高性能
- Markdown 專爲技術文檔提供拓展
- 自帶 PWA
- 自定義主題，可定製程度完全由自己決定
vuepress生成的博客大概就是這樣！
實戰準備
1、 node.js
Node.js 版本
請確保你的 Node.js 版本大於等於 8。
2、碼雲賬戶一個
實戰開始
node.js 的安裝本文不做介紹
安裝步驟
第一步 安裝vuepress
命令: npm install -g vuepress
第二步 創建項目
1、命令: mkdir vuepress-demo2、命令: cd vuepress-demo
第三步 初始化項目
初始化項目
命令: npm init -y
第四步 創建文件
創建各種配置文件以及文件夾
- 修改「package.json」
{
"name": "vuepress-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},
"keywords": [],
"author": "",
"license": "ISC"
}
創建 「docs」 文件夾
mkdir docs
進入「docs」文件夾
cd docs
創建README.md文件
echo > README.md
---
home: true
heroImage: /logo.png
actionText: 快速上手 →
actionLink: /blog/
features:
- title: 簡潔至上
details: 以 Markdown 爲中心的項目結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 組件，同時可以使用 Vue 來開發自定義主題。
- title: 高性能
details: VuePress 爲每個頁面預渲染生成靜態的 HTML，同時在頁面被加載的時候，將作爲 SPA 運行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---
創建**.vuepress**文件夾
命令: mkdir .vuepress
創建「blog」文件夾
命令: mkdir blog
進入.vuepress
命令: cd .vuepress
創建「public」文件夾
>命令: mkdir public
>
>進入 public 放入2個 圖片
>
>一張logo.png
>
>一張favicon.ico
創建「config.js」
命令: config.js
module.exports = {
title: 'fc blog',
description: '我的個人網站',
head: [ // 注入到當前頁面的 HTML <head> 中的標籤
[
'link', {
rel: 'icon',
href: '/logo.jpg'
}
] // 增加一個自定義的 favicon(網頁標籤的圖標)
],
base: '', // 這是部署到github相關的配置
markdown: {
lineNumbers: true // 代碼塊顯示行號
},
themeConfig: {
sidebarDepth: 3,
nav: [ // 導航欄配置
{
text: '博客',
link: '/blog/'
}
],
sidebar: {
'/blog/': [{
title: '文檔',
collapsable: false,
children: [
'document/vuepress',
]
}]
}
}
};
進入「blog」文件夾，創建「document」文件夾
mkdir document
創建「README.md」
命令: echo > README.md
內容:我的博客介紹
進入document文件夾創建vuepress.md
命令: echo > vuepress.md
# vuepress介紹阿斯達卡還是都很好看
創建start.cmd
npm run dev
創建build.cmd
npm run build
一些命令截圖
第五步 啓動
啓動
訪問地址: http://localhost:8080/
第六步 vuepress總結
vuepress官網:https://www.vuepress.cn
docs/README.md 爲項目首頁，可以根據自己需求修改
docs/.vuepress/config.js 爲項目的總配置文件
'/blog/': [{ title: '文檔', collapsable: false, children: [ 'document/vuepress', ] }]
文章的添加就在children 節點添加
例如:
children: [ 'document/vuepress', 'document/vue', ]
文件夾下面必須有vue.md
vuepress-demo/docs/blog/document/
部署到碼雲
1. 創建倉庫
2. 修改配置文件
>vuepress-demo\docs\.vuepress\config.js
>
>base改爲碼雲同項目名字
>
>base: '/vuepress-demo/', // 這是部署到github相關的配置
3. 編譯vuepress-demo
運行build.cmd
4. 上傳到碼雲
5. 選中Gitee Pages
6. 填入靜態HTML地址
7. 點擊更新
8. 訪問
http://xxxxx/vuepress-demo
