在centos7 上部署 vuepress

Centos · 發表 2018-09-16 22:45:00

摘要： vuepress是一款十分優秀簡潔的文件生成器，可以根據目錄下的md文件自動生成對應的html檔案，介面簡潔大方。每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的載入效能和搜尋引擎優化（SEO）。本文將介紹如何在CentOS7環境下部署vuepress。可以...

vuepress是一款十分優秀簡潔的文件生成器，可以根據目錄下的md文件自動生成對應的html檔案，介面簡潔大方。每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的載入效能和搜尋引擎優化（SEO）。本文將介紹如何在CentOS7環境下部署vuepress。可以先欣賞一下效果再決定是否要搭建：https://mfrank2016.github.io/wikibook/。個人覺得還算不錯的，比較簡潔大方。

一、安裝nodejs

curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install nodejs

二、安裝vuepress

npm install -g vuepress

三、建立工作目錄

mkdir project
cd project
mkdir docs

四、初始化前

npm init -y
vim package.json

編輯成如下內容，這裡其實是設定命令別名。

{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

建立.vuepress目錄。

mkdir .vuepress
cd .vuepress

建立config.js，這是vuepress的全域性配置檔案，大部分屬性在這裡設定。

mkdir public
vim config.js

修改成如下內容，對應內容可以自行修改。官方說明文件在這裡：https://vuepress.vuejs.org/zh/config/

module.exports = {
title: '清風wiki',
description: '我在等風，也在等你',
// 相對於git倉庫的路徑 如全路徑為：https://mfrank2016.github.io/wikibook/ 則設定為'/wikibook/'
base: '/wikibook/',
host: '0.0.0.0',
// 執行埠
port: 8081,

themeConfig: {
//gitc 倉庫地址
repo: 'https://github.com/MFrank2016/wikibook',
// 如果你的文件不在倉庫的根部
docsDir: 'docs',
// 可選，預設為 master
docsBranch: 'master',
// 預設為 true，設定為 false 來禁用
editLinks: true,
//導航欄
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
{ text: 'Languages',
items: [
{ text: 'Chinese', link: '/language/chinese' },
{ text: 'Japanese', link: '/language/japanese' }
]}],
sidebar: [{
title: 'Group 1',
collapsable: false,
children: [
'/'
]
},
{
title: 'Group 2',
children: [
'/'
]
}
]
},
//搜尋
search: true,
searchMaxSuggestions: 10,
lastUpdated: 'Last Updated', // string | boolean
}

整體結構

project

├─── docs

│ ├── README.md

│ ├── .vuepress

│├── config.js

│└── public

│└── hero.png

│ └── guide

│└── README.md

└── package.json

五、初始化

在docs目錄下建立README.md

---
home: true
heroImage: /hero.png
actionText: 點選閱讀
actionLink: /guide/
footer: MIT Licensed | Copyright © 2018-present Frank
---

然後回到project目錄

# 開啟除錯模式，執行服務，此時開啟 http://localhost:8081 (這裡即上面設定的埠) 即能看到最簡單的頁面
vuepress dev

# 構建，此時會將md文件轉化成html檔案儲存在docs/.vuepress/dist目錄
vuepress build

六、除錯部署

此時靜態網頁已經生成在了**docs/.vuepress/dist**目錄下，可以先開啟除錯模式，然後使用ftp等軟體先對伺服器進行遠端連線，修改docs下面的文件，每次修改上傳後，會自動重新編譯，當然整個過程需要一兩分鐘時間，這取決於伺服器的效能。調整到合適的程度即可將其移動到nginx或者apache相應目錄下即可。