Agendy

# Vuepressを使ってGithub Pagesにデプロイする際の設定について

2024-02-10 15:46

VuePressで作ったサイトをGitHub Pagesにデプロイしたところ、HTMLが正しく表示されなかった。 config.js の base にリポジトリ名を指定すると、正しく表示されるようになった。

# GitHub Pagesでは配信パスにリポジトリ名が入る

VuePressを使うのは初めてで、デプロイ後の表示崩れの原因が分からなかった。 調べた結果、次の設定が必要だと分かった。

// config.js
module.exports = {
  base: '/repo/'
}

/repo/ の部分は、自分で作成したGitHub Pagesのリポジトリ名に置き換える。

# 公式ドキュメントも base に /<REPO>/ を指定するよう案内している

VuePress 1.xのデプロイガイドには、https://<USERNAME>.github.io/<REPO>/ へデプロイする場合は base を "/<REPO>/" にすると書かれている。

このサイトも agendy リポジトリから配信しており、生成されたHTMLは /agendy/assets/ 以下のファイルを参照している。

←