目錄
- 一、介紹
- 二、環境準備
- 三、安裝運行vuepress
- 四、目錄結構
- 五、配置文件
- 六、導航欄配置
- 七、導航欄logo
- 八、瀏覽器圖標
- 九、側邊欄配置
- 十、添加 Git 倉庫和編輯鏈接
- 十一、部署到GitHub
- 十二、搭建成功
一、介紹
VuePress 是 Vuejs 官方提供的一個是Vue驅動的靜態網站生成器，基于Markdown語法生成網頁。簡單的說它就是一個快速建設文檔站點的工具，在簡單配置好功能后，需要做的事情就剩下寫好一個個 Markdown 文檔，并且可以將其發布到github。
VuePress ,一個全新的基于 vue 實現的靜態網站生成器，實際上就是一個 vue 的 spa 應用，內置 webpack，可以用來寫文檔。
VuePress 由兩部分組成：一個以 Vue 驅動的主題系統簡約靜態網站生成工具，和一個為編寫技術文檔而優化的默認主題。它是為了支持 Vue 子項目的文檔需求而創建的。
vuepress官網：https://vuepress.vuejs.org/zh/
我的博客：小宇博客
二、環境準備
1、安裝NodeJs： NodeJs 安裝教程
2、安裝Git ：Git基礎使用教程
3、注冊GitHub賬號：GitHub官網
三、安裝運行vuepress
npm install -g vuepress # # 安裝
接下來，創建一個新的 VuePress 項目：
# 創建一個目錄
mkdir vuepress-starter
# 進入目錄
cd vuepress-starter
初始化項目：生成一個package.json文件
npm init -y
安裝本地依賴
npm install -D vuepress
修改package.json 中添加一些 scripts
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
在本地啟動服務器 VuePress 會在 http://localhost:8080 啟動一個熱重載的開發服務器。
npm run docs:dev
四、目錄結構
.
├── docs
│ ├── .vuepress (可選的)
│ │ ├── components (可選的)
│ │ ├── theme (可選的)
│ │ │ └── Layout.vue
│ │ ├── public (可選的)
│ │ ├── styles (可選的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可選的, 謹慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可選的)
│ │ └── enhanceApp.js (可選的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.jsondocs/.vuepress: 用于存放全局的配置、組件、靜態資源等。
docs/.vuepress/components: 該目錄中的 Vue 組件將會被自動注冊為全局組件。
docs/.vuepress/theme: 用于存放本地主題。
docs/.vuepress/styles: 用于存放樣式相關的文件。
docs/.vuepress/styles/index.styl: 將會被自動應用的全局樣式文件，會生成在最終的 CSS 文件結尾，具有比默認樣式更高的優先級。
docs/.vuepress/styles/palette.styl: 用于重寫默認顏色常量，或者設置新的 stylus 顏色常量。
docs/.vuepress/public: 靜態資源目錄。
docs/.vuepress/templates: 存儲 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于開發環境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 構建時基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客戶端應用的增強。
五、配置文件
在項目根目錄下創建一個 .vuepress 文件夾，并在其中創建一個 config.js 文件，這是 VuePress 的配置文件
編輯 .vuepress/config.js 文件，添加基本配置
module.exports={title: "小宇博客", // 網站的標題description: "我的個人博客", // 網站的描述}
在docs目錄下創建README.md 首頁的配置
---
home: true
heroImage: /assets/img/logo.png
heroText: Hero 標題
tagline: Hero 副標題
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/cpnfig.js 中配置
themeConfig: {nav: [{ text: '首頁', link: '/' },{text: '技術筆記',items: [{ text: '前端', items:[{ text: 'HTML & CSS', link: '/guide/前端學習筆記/' },{ text: 'JavaScript', link: '/guide/japanese/' },{ text: 'Vue', link: '/guide/japanese/' },]},{ text: '后端', items:[{ text: '前端學習筆記', link: '/guide/前端學習筆記/' },{ text: 'Java學習筆記', link: '/guide/japanese/' }]},]},{text: '常見問題',items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }]},{text: '面試常問',items: [{ text: 'Chinese', link: '/language/chinese/' },{ text: 'Japanese', link: '/language/japanese/' }]},{text: '開源項目',items: [{ text: 'Chinese', link: '/language/chinese/' }// { text: 'Japanese', link: '/language/japanese/' }]},{ text: '關于我', link: '/about/about.md' }],}
七、導航欄logo
編輯 .vuepress/config.js 創建/public/assets/img/
module.exports = {themeConfig: {logo: '/assets/img/comet.png',}
}
八、瀏覽器圖標
編輯 .vuepress/config.js
module.exports={head: [['link', { rel: 'icon', href: '/assets/img/favicon.ico' }]],}
九、側邊欄配置
我把側邊欄的內容放在了guide下了
導航欄的配置在 docs/.vuepress/cpnfig.js 中配置
themeConfig: {sidebar: [{title: 'HTML基礎學習', // 必要的// path: '/前端學習筆記/', // 可選的, 標題的跳轉鏈接，應為絕對路徑且必須存在collapsable: true, // 可選的, 默認值是 true,sidebarDepth: 1, // 可選的, 默認值是 1children: [{title: 'HTML基礎學習',path: '/guide/前端學習筆記/01html基礎.md'},{title: 'bas',path: '/guide/前端學習筆記/00html基礎.md'},]},{title: 'Group 2',children: [{title: 'java',path: '/java/01java.md'}],// initialOpenGroupIndex: -1 // 可選的, 默認值是 0}]}
禁止側邊欄
---
lang: zh-CN
title: 頁面的標題
date: 2077-10-01
description: 頁面的描述，可省略
sidebar: false # sidebar: false 禁用側邊欄 auto 開啟
---
十、添加 Git 倉庫和編輯鏈接
git配置在 docs/.vuepress/cpnfig.js 中配置
themeConfig: {// 你的 Git 項目地址，添加后會在導航欄的最后追加repo: '地址',}
十一、部署到GitHub
項目/docs/.vuepress/config.js base必須配置正確
在vuepress項目的根目錄下添加deploy.sh文件，該文件是用于執行發布的腳本文件。
#!/usr/bin/env sh# 確保腳本拋出遇到的錯誤
set -e# 生成靜態文件
npm run docs:build# 進入生成的文件夾
cd docs/.vuepress/dist# 如果是發布到自定義域名
# echo 'www.example.com' > CNAMEgit init
git add -A
git commit -m 'deploy'# 如果發布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master# 這里是填寫你的github倉庫地址，把git@github.com:xxx/xxx.git替換成你的倉庫地址
git push -f git@github.com:fanchens/vuepress.git master:gh-pagescd -
部署教程1
在項目根目錄下打開終端(git bash、cmd等都可以)，執行sh deploy.sh命令
sh deploy.sh
部署教程2
npm run docs:build
dist是反編譯后的文件 把這個文件的內容放到git就可以了
十二、搭建成功
演示
我的博客：小宇博客
