Vuepressで作成したブログをGIthub Pageで公開する

サーバーを契約するのが面倒くさいので，Github PagesでVuepressを公開します．

Vuepressをビルド
GitHub Pagesでホスティングする
ファイル構成
docsを公開する設定を行う
参考サイト

全国630店舗以上！もみほぐし・足つぼ・ハンドリフレ・クイックヘッドのリラクゼーション店【りらくる】

# Vuepressをビルド

ビルドが終了するとdocsディレクトリが生成され，その中にビルドファイルが出力されます．ビルドファイルで動作確認するにはgoogle chromeのWeb Server for Chromeという拡張機能を利用すると便利です．

# ビルド
yarn build

# GitHub Pagesでホスティングする

ビルドしたvuepressをGitHub Pagesでホスティングします．そのためにはリポジトリが必要になるのでプロジェクトと同じ名前で”hamlet_engineer”というリポジトリを作成します．

config.jsの中身では以下のように設定できます．

// GitHub Pagesにホスティング
// base:リポジトリの名前,dest:出力ディレクトリの名前
base: '/hamlet_engineer/',
dest: 'docs',

# ファイル構成

ファイル構成は以下通りです．

hamlet_engineer
├── src
│   ├── _posts
│   │   └── 20190803.md
│   │   └── 20210118.md
│   └── .vuepress
│       ├── public
│       │    ├── img
│       │          └── hirasu.jpg
│       │    
│       └── config.js
├── package.json
├── yarn.lock
├── /.git
└── docs
    ├── /assets
    ├── /img
    ├── /posts
    ├── 404.html
    └── index.html

# docsを公開する設定を行う

vuepressをコミットしGitHubのリポジトリへpushします.
次にリポジトリのsettingsページのOptionsで下にスクロールすると，GitHub Pagesの設定があります．
そして，sourceを"None"から"main branch /docs folder"へ変更して保存します.
反映されるまでに時間がかかりますが，しばらくすると以下のようなURLで表示されます．
https://hirasu1231.github.io/hamlet_engineer