vuepressで作った静的サイトをGithub pagesで公開するまで

vuepress + github pages。自動デプロイについては別記事。

# このページで分かること

  • 1からvuepressの導入する方法・基本的な使い方
  • Github pagesで静的サイトを公開する方法

# 前提条件

  • nodejsを導入する
  • githubにリポジトリを用意する

# vuepressを導入する

# 1. 以下のコマンドを実行

# gitclone
git clone [リポジトリのurl]

# package.json作成
npm init

# vuepressインストール
npm install -D vuepress

# 設定ファイルを格納するディレクトリ作成
mkdir .vuepress

# 2. ページを作成する

プロジェクトルートにindex.mdを作成する。 index.md

# Hello Vuepress!
Top page.

# 3. package.json編集

package.jsonscriptsに以下の記述を追加する

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

# 4. vuepress設定ファイル作成

.vuepress/config.jsを作成し、以下の設定を記述する。

module.exports = {
    // サイト名
    title: "Vuepress introduction",
    
    // githubのリポジトリ名を指定する。カスタムドメインを使う場合は不要。
    base: '/vuepress-introduction',
    
    // markdown: {
    //   // ソースコードに行数を表示する。
    //   lineNumbers: true
    // }
}

# 5. 動作確認

npm run devを実行してhttp://localhost:8080/vuepress-introductionを開き、ページが表示されることを確認する。

完了。ここまででcommit & pushしておく。

# Github pagesの設定 ~ サイト公開

# 1. gh-pagesリポジトリを作成する

# 2. リポジトリの設定を変更する

githubリポジトリの設定ページでsourceをgh-pages branchにする。

# 3. ビルドしてgh-pagesリポジトリにpushする

npm run build

cd .vuepress/dist

git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:qnaiv/vuepress-introduction.git master:gh-pages

cd ../..

# 完了

https://ユーザ名.github.io/リポジトリ名/でページが表示される。

https://qnaiv.github.io/vuepress-introduction/

# 今回のソース

https://github.com/qnaiv/vuepress-introduction