Vuepressは優れた簡潔なドキュメントジェネレータであり、ディレクトリ内のmdドキュメントに従って対応するhtmlファイルを、シンプルで寛大なインターフェイスで自動的に生成できます。 VuePressによって生成されたすべてのページには、事前にレンダリングされたHTMLが付属しているため、読み込みパフォーマンスと検索エンジン最適化（SEO）が非常に優れています。この記事では、CentOS7環境にvuepressをデプロイする方法を紹介します。ビルドするかどうかを決定する前に、効果を理解することができます：https：//mfrank2016.github.io/wikibook/。個人的にはそれはかなり良いと思います、そしてそれはシンプルで寛大です。
**1つは、nodejs **をインストールする
curl -sL https://rpm.nodesource.com/setup_8.x | sudo bash -
yum install nodejs
2つ目は、vuepressをインストールする
npm install -g vuepress
3、作業ディレクトリを作成します
mkdir project
cd project
mkdir docs
4、初期化前
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:'涼しいそよ風ウィキ',
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',//オプション、デフォルトはマスターです
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
5、初期化
docsディレクトリにREADME.mdを作成します
---
home:true
heroImage:/hero.png
actionText:クリックして読む
actionLink:/guide/
footer: MIT Licensed | Copyright © 2018-present Frank
---
次に、プロジェクトディレクトリに戻ります
# デバッグモードを開き、サービスを実行し、この時点でhttpを開きます://localhost:8081(これが上に設定されたポートです)私は最も単純なページを見ることができます
vuepress dev
# ビルド、この時点で、mdドキュメントはhtmlファイルに変換され、ドキュメントに保存されます/.vuepress/distディレクトリ
vuepress build
6、デバッグ展開
この時点で、静的Webページが** docs / .vuepress / dist **ディレクトリに生成されています。最初にデバッグモードをオンにしてから、ftpおよびその他のソフトウェアを使用してサーバーにリモート接続し、docsの下のドキュメントを変更し、各変更をアップロードできます。 、もちろん、自動的に再コンパイルされます。サーバーのパフォーマンスに応じて、プロセス全体に1〜2分かかります。適切なレベルに調整し、nginxまたはapacheの対応するディレクトリに移動します。
Recommended Posts