#04 Nuxt & GitHub Pages メモ

はじめに

GitHub Pages を、Nuxtを使って公開した時のメモをアップします。
これらの情報は、たくさん公開されていますが、いざ、自分で構築しようとした時に時間がかかってしまいます。その時のための、自分用のメモです。

対象のバージョン

• Nuxt 3.13.2

Create GitHub Page

ドキュメントを参照しながら、GitHub　Pagesを作成します。
"<好きな名前>.github.io"　の、リポジトリを作成する。そのまま、公開アドレスになります。
NUXT_APP_BASE_URL = "<好きな名前>.github.io"

参照:Creating a GitHub Pages site

公開されているテンプレートを参考に、GitHub Pageを作成します。

自分が作成したいページのイメージに近いテンプレートを探します。

• テンプレートから、"Freemium"を参考にする。
• nuxt blog site:github.comで検索する。
• pagesを更新してデザインを整えながら、contetを作成していきます。

GitHub にデプロイする

• GitHub Pagesは、"静的なページしか公開できない。"ということを留めておきます。

  GitHub Pages only support static sites, Nuxt will pre-render your application to static HTML files.

• "GitHub Action"を使ったCI/CDを利用します。
  .github/workflows/depoloy.yml を、下記を参考に作成します。 ※YMLファイル名称は自由
  depoloy.yml
• GitHub Pagesは、"静的なページしか公開できない。"ということを留めておきます。

  $ npm run build //.output に、GitHub Page用の静的ページが作成されます。
  $ npm run dev //動作確認と、500 Errorの除外作業。
   ----
   [info] [nitro] Initializing prerenderer
   [info] [nitro] Prerendering 5 initial routes with crawler
   [log] [nitro]   ├─ /200.html (33ms)
   [log] [nitro]   ├─ /404.html (34ms)
     │ └── Error: [500]
   ----
  

• ソースをPUSHして、GitHub Actionを実行しデプロイする。