1.VuePressをインストールする
まず、コマンド ラインで次のコマンドを実行して、VuePress をグローバルにインストールします。
npm install -g vuepress
2.VuePressの初期化
次のコマンドを実行して、新しい VuePress プロジェクトをローカルに作成します。
mkdir my-blog && cd my-blog npm init -y npm install -D vuepress
次に、my-blog ディレクトリに docs ディレクトリを作成し、その中にホームページ コンテンツとして新しいREADME.mdファイルを作成します。
3. ブログのコンテンツを書く
docs ディレクトリには、ブログやその他のドキュメント コンテンツを記述するための複数の Markdown ファイルを作成できます。VuePress は Markdown を使用してドキュメントを作成するため、Markdown 構文を参照して作成することができます。
4.VuePressの設定
プロジェクトのルート ディレクトリに新しい .vuepress ディレクトリを作成し、VuePress を設定するための config.js ファイルを作成します。
module.exports = { title: 'My Blog', // 博客标题 description: 'This is my blog', // 博客描述 themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '博客', link: '/blog/' }, { text: '关于我', link: '/about/' }, ] } }
上記のコードでは、ブログのタイトルと説明を定義し、ナビゲーション バーを構成します。次に、docs ディレクトリに blog と about という 2 つの新しいディレクトリを作成し、その中にブログ リストと個人プロフィールを表示するためのindex.mdファイルを作成します。
5.VuePressを起動する
コマンドラインで次のコマンドを実行して VuePress を起動します。
vuepress dev docs
次に、ブラウザで http://localhost:8080/ にアクセスすると、ローカルに構築されたブログ Web サイトが表示されます。
6. ブログ Web サイトを展開する
VuePress を使用してブログ Web サイトを構築する場合、VuePress のコンパイルによって生成された静的ファイルをサーバーにデプロイする必要があります。デプロイメントには GitHub Pages を使用することをお勧めします。
まず、GitHub 上にブログ Web サイトと同じ名前のリポジトリを作成し、リポジトリの master ブランチにコードを送信します。
次に、プロジェクトのルート ディレクトリで次のコマンドを実行して、ブログ Web サイトをコンパイルして生成された静的ファイルを GitHub Pages に公開します。
npm run deploy
このコマンドを実行する前に、次のように package.json にデプロイ スクリプトを追加する必要があることに注意してください。
{ "scripts": { "deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" } }
実行が完了すると、GitHub リポジトリの設定ページに、正常にデプロイされたブログ Web サイトが表示されます。