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

Vuepressをビルド

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

# ビルド
yarn build

!(/image/tech_0002/webserver.png)

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

!(/image/tech_0002/GithubPages.png)

参考サイト

• VuePressで作成した静的サイトをGitHub Pagesで公開する