環境を汚さず（選ばず）Nuxtプロジェクトを作成しGitHub Pagesで公開するまでの一部始終

##事前準備

docker がインストールされていることが前提です。
docker が入ってさえいれば Windows, Mac, Linux いずれでも同じように操作できるはずです。

WindowsにDockerを導入する方法は以下にまとめています。
> [Windows 10 Home に Docker for Desktop をインストールする手順](https://qiita.com/nakazawaken1/items/2646e0dac287952c3fd3)

また、プログラムの編集にはVisualStudioCodeを使いますのでインストールしておいてください。

> [VisualStudioCodeのインストール手順(Windows)](https://qiita.com/nakazawaken1/items/a9aab1b7e8075b3c5867)

GitHubからクローンしたりプッシュしたりするのでGitHubのアカウントを用意し git もインストールしておいてください。

> [Windows に git をインストールする手順](https://qiita.com/nakazawaken1/items/bbcb4640cf9aceee5745)
 
----

## プロジェクト作成

プロジェクトを作る親フォルダに移動
（Windows の場合は例えば C:\dev を作ってコマンドプロンプトで `cd \dev` で親フォルダとする dev に移動します。）

----

node.jsが入ったLinuxを起動するため以下のコマンドを実行します。

```:windows
docker run --rm -itv %cd%:/app node:alpine sh
```

```shell:mac,linux
docker run --rm -itv $PWD:/app node:alpine sh
```
docker run は指定したイメージ(node:alpnine)からコンテナを作り、指定したコマンド(sh)を実行します。
--rm オプションは実行後にコンテナを削除します。これをつけないと docker run するごとにコンテナが増えていきディスクを圧迫します。
今回は作成したファイルはローカルに同期して残りますので、作業時以外コンテナは不要です。
-it は起動したコンテナに対して入力できるようにするためのオプションです。指定しないとコマンドが即終了してしまいます。
-v でローカルの$PWD or %cd%（カレントディレクトリ）とコンテナ内の /app を同期（ファイルやフォルダの内容がおなじになる）します。

----

コマンドが実行されると、Dockerコンテナ内のシェルに切り替わります。

```shell:Dockerコンテナ内
/ # 
```

/ は現在ルートディレクトリにいるということ、
 # はルートユーザを表しています。

----

node:alphine イメージを使っているのでnode環境は既にあります。
以下のコマンドで同期している /app フォルダに移動して first_nuxt という名前のプロジェクトを作成します。

```shell:Nuxtプロジェクト作成
/ # cd /app && yarn create nuxt-app first_nuxt
```

yarn create next-app としてしまうとReactベースの Next.js のプロジェクトになってしまいますので間違わないように注意しましょう。

----

実行すると以下のように表示されます。

```shell:プロジェクト名入力
yarn create v1.22.4
[1/4] Resolving packages...
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning create-nuxt-app > sao > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "create-nuxt-app@3.0.0" with binaries:
      - create-nuxt-app

create-nuxt-app v3.0.0
✨  Generating Nuxt.js project in first_nuxt
? Project name (first_nuxt) 
```

プロジェクト名を聞かれていますが、コマンド実行時に指定している first_nuxt でいいので、そのまま Enter を押します。

----

```shell:言語選択
? Choose programming language (Use arrow keys)
❯ JavaScript 
  TypeScript 
```

使うプログラミング言語を聞かれています。今回は JavaScript にしますのでそのまま Enter を押します。

----

```shell:パッケージ管理選択
? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm 
```

使うパッケージ管理を聞かれています。今回は最初に Yarn を使っていますので、そのまま Enter を押します。

----

```shell:UIフレームワーク選択
? Choose UI framework (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuesax 
  Vuetify.js 
```

使う UIフレームワークを聞かれています。今回は自分でUIを作るので None(なし)にします。そのまま Enter を押します。
この辺りからはプロジェクト作成後に追加することもできますので、よくわからなければ None で大丈夫です。

----

```shell:モジュール選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support
 ◯ Content
```

使うモジュールを聞かれています。
Axios はWebAPIを呼ぶときに使うものです。
PWA Support は Webサービスをスマートフォンのアプリのように使うようにするためのしくみです。
Content はブログ作成のためのモジュールです。
上下矢印キーで選択し、スペースキーを押すと選択／未選択を切り替えられます。
必要なら後から追加できるので、今回はそのまま Enter を押します。

----

```shell:チェックツール選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files
 ◯ StyleLint
```

使うチェックツールを聞かれています。
今回はVSCodeの拡張機能でチェック等を行うので、そのまま Enter を押します。

----

```shell:テストツール選択
? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA 
  WebdriverIO 
```

使うテストフレームワークを聞かれています。
後から使いできるのでそのまま、Enter を押します。

----

```shell:レンダリング方式選択
❯ Universal (SSR / Static) 
  Single Page App 
```

使うレンダリング方式を聞かれています。
SSR(Server Side Rendering)というのはサーバサーイドでHTMLを組み立ててブラウザに返す方式です。
Single Page App(SPA)はブラウザ側でページを組み立てる方式です。
今回は静的ファイルを生成して GitHub Pages に置くのでどちらでもいけますが、そのまま Enter を押します。

----

```shell:開発ツール選択
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests
```

使う開発ツールを聞かれています。
今回はVSCodeを使うので、 jsconfig.json をスペースで選択して Enter を押します。

----

質問はこれで終わりです。しばらく待っていれば以下のような完了表示が出ます。

```shell:Nuxtプロジェクト作成完了
? Choose development tools jsconfig.json (Recommended for VS Code)

🎉  Successfully created project first_nuxt

  To get started:

	cd first_nuxt
	yarn dev

  To build & start for production:

	cd first_nuxt
	yarn build
	yarn start

Done in 2842.73s.
```

ls で生成されたフォルダ、ファイルを確認してみましょう。

```shell:生成されたファイル確認
/app # ls first_nuxt
```

ローカルの first_nuxt フォルダにコンテナの first_nuxt 内と同様下記のファイルが作成されていることが確認できます。

```shell:生成されたファイル一覧
README.md       components      layouts         node_modules    package.json    plugins         store
assets          jsconfig.json   middleware      nuxt.config.js  pages           static          yarn.lock
```

これでプロジェクト作成は完了です。

----

開発モードで起動してみましょう。

まず、プロジェクトフォルダに移動します。

```shell:プロジェクトフォルダへ移動
/app # cd first_nuxt
```

----

yarn dev コマンドを実行します。

```shell:開発サーバ起動
/app/first_nuxt # yarn dev
yarn run v1.22.4
$ nuxt

ℹ NuxtJS collects completely anonymous data about usage.                                                                                                     12:06:56
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n) 
```

使用状況の匿名データ収集をしてもいいか聞かれますので、OKならY、NGならnを入力し、Enterを押します。

----

```
   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt.js @ v2.13.0                   │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                          12:11:17
ℹ Initial build may take a while                                                                                                                             12:11:17
✔ Builder initialized                                                                                                                                        12:11:17
✔ Nuxt files generated                                                                                                                                       12:11:17

✔ Client
  Compiled successfully in 10.22s

✔ Server
  Compiled successfully in 10.14s

ℹ Waiting for file changes                                                                                                                                   12:11:33
ℹ Memory usage: 125 MB (RSS: 211 MB)                                                                                                                         12:11:33
ℹ Listening on: http://localhost:3000/                                                                                                                       12:11:33
```

Listening on の行が表示されれば起動完了です。
コンテナ内の3000番ポートで動作しています。

----

## ブラウザでの動作確認

起動した画面をブラウザで確認したいですよね。
でも今の状態だと、ブラウザで http://localhost:3000 にアクセスしても何も表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/fbdd9035-2e34-e432-528d-e79495aea56b.png)

なぜかというと、コンテナ内の 3000 ポートは何も設定しないとローカル（PC)からアクセスできないようになっているからです。

ですので、いったんコンテナを終了して、設定を追加してもう一度コンテナを起動します。
Ctrl+Cを押して開発サーバを終了させて、 exit コマンドでコンテナから抜けます。

```shell
/app/first_nuxt # exit
```

----

まず、作成したプロジェクトフォルダに移動します。

```shell:共通
cd first_nuxt
```

以下のコマンドで開発サーバを起動します。

```shell:windows
docker run --rm -itv %cd%:/app -p 80:3000 -e "HOST=0.0.0.0" -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn dev
```

```shell:max,linux
docker run --rm -itv $PWD:/app -p 80:3000 -e "HOST=0.0.0.0" -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn dev
```

いくつかオプションが増えていますが、意味は次の通りです。
-v %cd%:/app は先程と同じ記述ですが、first_nuxtがカレントフォルダなので、first_nuxt とコンテナ内の /app が同期するようなります。
-p 80:3000 とするとコンテナの３０００番ポートがローカルの８０番ポートにつながります。
-e "HOST=0.0.0.0" でコンテナの環境変数 HOST に 0.0.0.0 が設定され開発サーバがコンテナ以外のホスト（今回はローカル）からつながるようになります。
-e "NUXT_TELEMETRY_DISABLED=1" で使用状況の匿名データ収集について聞いてこなくなります。
-w でコンテナのカレントディレクトリをプロジェクトのディレクトリに設定しています。
sh を yarn dev に変えていきなり開発サーバを起動するようにします。

これで、ブラウザを開いて http://localhost と入れればコンテナ内に起動したページを見ることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c8d81e5f-8939-040b-1a36-2681d93d0ed3.png)

----

## ソース編集と自動更新の設定

これで開発できる状態になりました。
さっそく、表示されたトップページを変更してみます。

first_nuxt フォルダを VisualStudioCode で開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f0d5afe7-c93a-0120-a6d0-5c115dc7040a.png)
Windowsならフォルダ右クリックで Code で開くを選択します。
(VisualStudioCodeを起動してからフォルダを開くでもOKです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/27f9ac84-554b-fd9a-6907-aa90c097aff9.png)
作成されたフォルダやファイルが表示されています。

----

## トップページの編集

pages フォルダ内に index.vue というファイルがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ce8d55dd-3f09-1986-cf00-7f290dcc2bea.png)
これがトップページの内容になります。

&lt;template&gt; タグ内が表示内容を構成するHTMLです。（通常のHTMLだけではなくVueの記法が使えるようになっています）

&lt;h1&gt;タグ内にタイトルの文字 first_nuxt があるので、
「はじめてのNuxt」に変えてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/d4ee5faa-da62-8ab6-f814-2603309261c7.png)
（ファイルを編集するとファイル名タブに●がつきます。保存すると消えます。）

----

## 変更の反映

WindowsならCtrl＋S、MacならCommand＋Sでファイルが保存できます。

保存すると、おそらくMacやLinux環境ならすぐにブラウザの内容が自動更新され文字が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/3ab7eb81-98ac-e560-a16d-86df9f8a0d0c.png)

Windows環境やうまく自動更新されない場合は、次の設定をしてみてください。

----

## （Windowsで）自動更新が効かない場合の設定

nuxt.config.js ファイルを開き、末尾に以下の記述を追加して保存します。

```js:変更前
  build: {
  }
}
```

```js:変更後
  build: {
  },
  watchers: {
    webpack: {
        poll: true
    }
  }
}
```

そしていったん docker コンテナから抜けて(CTRL+C)以下のコマンドで再度開発環境を起動します。

```shell:windows
docker run --rm -itv %cd%:/app -p 80:3000 -e "HOST=0.0.0.0" -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn dev
```

```shell:max,linux
docker run --rm -itv $PWD:/app -p 80:3000 -e "HOST=0.0.0.0" -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn dev
```

これでソースを変更して保存するとすぐにブラウザの表示内容が切り替わるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/bce8a843-9a0c-27b9-2380-5212f51f349f.png)

試しに、タイトルを「Nuxtはじめました」に変えてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/85de43e3-c86f-3698-6627-b0812e958171.png)

保存してブラウザを見るとすぐに内容が変わります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/1c95c4b4-b745-66a0-e5e1-57603145eacf.png)

----

## 拡張機能を入れる

vueファイルを見やすくしたり、ミスを教えてくれたりする拡張機能を入れておきます。

画面左の上から6番目のボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/2fe64c5f-e81d-6b88-d714-054af03642e3.png)を押します。

検索欄に vetur と入れて Vetur という拡張機能を探します。
見つけたら install ボタンを押しまてインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7506e9ed-2e64-26da-9ada-4ccf8036861c.png)

インストールできると以下のようにに内容が色分けして表示されます（シンタックスハイライトといいます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9b264ca7-d09d-b6c1-0729-83b2908ddf39.png)

----

## 余分なポートの通信を止める

ブラウザでF12を押し開発者ツールを出します。
そうすると、以下のようにエラーが出ているのが確認できると思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/457af9ad-1db8-f254-9a77-ffed4214c65a.png)
エラーを見ると localhost の 40791 ポートにアクセスしようとしてエラーになっています。
（このポート番号はプロジェクトごとにランダムで変わります。）
このポートも -p 80:3000 としたように Docker 内のポートにつなげないと通信できません。

これは、Nuxtの自動ロード時に進捗率を表示するために使われているようです。
https://ja.nuxtjs.org/api/configuration-build/#indicator
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/407686af-4a50-03bf-a539-c52d1ad73189.png)
エラーは出てほしくないのでこの設定をOFFにします。

nuxt.config.js ファイルを開き、以下のように変更して保存します。

```js:変更前
  build: {
  },
```

```js:変更後
  build: {
    indicator: false
  },
```

もしくは、ONのままにしたい場合は、docker run 実行時に -p 40791:40791 のようにポートの通信を通すようにします。

----

## github pages に公開する

まだトップページしかありませんが、動作はするので、これを Github pages にデプロイしてみましょう。

## 静的ファイルの生成

docker コンテナを一度終了して、以下のコマンドを実行します。

※Nuxt 2.13以降は generete コマンドが定義されていないので、 package.json の scripts に以下を追加してください。

```json:package.json
"generate": "nuxt build && nuxt export"
```

```shell:windows
docker run --rm -itv %cd%:/app -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn generate
```

```shell:max,linux
docker run --rm -itv $PWD:/app -e "NUXT_TELEMETRY_DISABLED=1" -w /app node:alpine yarn generate
```

```shell:実行結果
yarn run v1.22.4
$ nuxt generate

ℹ NuxtJS collects completely anonymous data about usage.                                             07:35:21
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? No

ℹ Production build                                                                                   07:35:42
ℹ Bundling for server and client side                                                                07:35:42
ℹ Target: static                                                                                     07:35:42
✔ Builder initialized                                                                                07:35:42
✔ Nuxt files generated                                                                               07:35:42

✔ Client
  Compiled successfully in 20.32s

✔ Server
  Compiled successfully in 601.69ms


Hash: f6c77d51cae28b7be227
Version: webpack 4.43.0
Time: 20320ms
Built at: 06/20/2020 7:36:19 AM
                         Asset       Size  Chunks                         Chunk Names
../server/client.manifest.json   6.68 KiB          [emitted]
                      LICENSES  389 bytes          [emitted]
                app.656ba39.js   51.3 KiB       0  [emitted] [immutable]  app
        commons.app.4dd2efa.js    154 KiB       1  [emitted] [immutable]  commons.app
        pages/index.573dd1d.js   2.85 KiB       2  [emitted] [immutable]  pages/index
            runtime.b17d028.js   2.32 KiB       3  [emitted] [immutable]  runtime
 + 2 hidden assets
Entrypoint app = runtime.b17d028.js commons.app.4dd2efa.js app.656ba39.js

Hash: 28f709d14cc9b922eefa
Version: webpack 4.43.0
Time: 603ms
Built at: 06/20/2020 7:36:19 AM
               Asset       Size  Chunks             Chunk Names
      pages/index.js   11.9 KiB       1  [emitted]  pages/index
           server.js   80.5 KiB       0  [emitted]  app
server.manifest.json  207 bytes          [emitted]
 + 2 hidden assets
Entrypoint app = server.js server.js.map
ℹ Generating output directory: dist/                                                                 07:36:19
ℹ Generating pages                                                                                   07:36:19
✔ Generated route "/"                                                                                07:36:19
✔ Client-side fallback created: 200.html                                                             07:36:20
Done in 72.08s.
```

dist というフォルダに静的ファイルが生成されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6b320a07-0b56-069c-3c46-50bc3ed578ff.png)

これらのファイルをレンタルサーバ等に置けばインターネット上に公開できます。

今回はこのファイルを GitHub Pages で公開します。
GitHub には GitHub Actions というコマンド実行機能がありますので、それを使って、push 時今の生成操作を自動実行して公開できるように設定していきます。

----

## GitHub Actions 用ファイルの作成

FIRST_NUXT フォルダ直下に .github/workflows フォルダを作成します。

具体的には、nuxt.config.jsなど直下のファイルを選択した状態で
フォルダ作成ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f351cfe4-c027-4b54-5a3c-53ef293a4b4c.png)を押します。

出てきたフォルダ名入力欄に .github/workflows を入力します。（先頭のピリオドを忘れないでください）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/55f23532-bbf3-a90a-7be6-e40df6f3416f.png)

フォルダが作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/64ad9745-fcbf-691f-8c26-738734f1bd84.png)

----

作成したworkflowフォルダを選択した状態で、ファイル作成ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c6bd980a-e58b-d6eb-fb93-60764ea6f40f.png)を押して、gh-pages.yml ファイルを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/dc4bac85-c9c4-765a-9ea3-8d6a6b447a4f.png)

ファイルの内容は以下の通り入力し、保存します。

```yml:.github/workflows/gh-pages.yml
name: github pages

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1 
      - run: yarn install
      - run: yarn generate
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
```

----

## GitHubリポジトリの作成

下記の記事にGitHubのアカウント作成からプッシュするまでをまとめていますので参考にして、
リポジトリ作成まで（「ローカルにクローンする」の手前まで）進めてください。

> [GitHubのアカウントを作成して、リポジトリ作成、クローン、コミット、プッシュまでの手順](https://qiita.com/nakazawaken1/items/b4ffe6d401999e4f31c5)

----

## ローカルのGit管理開始

ローカルで Git の初期化を行います。

first_nuxt フォルダ上で git init コマンドを実行します。

```shell:git初期化
git init
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/970edce9-c9ea-bfa3-7a1c-630305c59f90.png)

初期化したあと、VisualStudioCodeのソース管理![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7826c5dd-3962-434d-45d0-45f7f6739390.png)を見ると、
gitでまだコミットされていないファイルが列挙されてきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/e2a8ff53-24c7-a660-a900-287903c59319.png)

----

## GitHubリポジトリをリモートリポジトリとしてセット

ローカルのgitリポジトリとGitHubのリポジトリを関連付けます。

```shell:リモートリポジトリ設定
git remote add origin https://github.com/GitHubアカウント名/リポジトリ名.git
```

※GitHubアカウント名、リポジトリ名はご自身で作成したものを指定します。

登録されたかどうかは `git remote -v` で確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/722ed059-5339-4ddc-7870-7e73a7b3c5d1.png)

----

## コミットする

VisualStudioCodeでソース管理の上部分にコミットコメントを入力します。
今回は「初コミット」としています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/e491e9e6-4826-fddf-7226-d7fc54f443e1.png)

コミットボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/c82cc68c-e098-2175-94cf-8d56b2f83bc9.png)を押します。

ステージされていないファイルをコミットするかの確認が出ます。全ファイルコミットするので Yes を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6f0d9ea3-cf81-e675-39db-ecc40c4f747c.png)

以下の画面が出る場合はCancelボタンを押して、git config コマンドで名前とメールアドレスを設定してから再度コミットしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/71d9d9d5-f95c-6847-88cb-61a97b85b0f7.png)

```shell:名前、メールアドレス設定
git config user.name あなたの名前
git config user.email GitHubに登録したメールアドレス
```

コミットされると、コメント欄、一覧が空になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/abd5446b-5373-64ba-955d-8302ddb15481.png)

----

## GitHub に push

その他ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/7407b298-54a7-5533-ffeb-8c4ab7bcddd9.png)を押し、Push to...を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/f6b21b3a-af35-1fd5-c5a5-8752cd5421b7.png)

origin を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/eb88ad4f-a0bb-e971-b17a-0a1b04faebb7.png)

2回目以降はPush先が記録されるので Push to ではなく Push で実行可能です。

----

GitHubにログインしていない場合は以下の画面が出ます。ログインします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/58b8f58b-8c88-63bb-f6d4-ea7f71d9b3ff.png)

----

上向きの矢印が出ない状態になっていればPushされています。

●Pushされている状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/4b36e94e-b674-1dfe-c559-b841cf5ef99d.png)

●Pushされていない状態
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/88ea1064-91ba-94cf-c09f-bfa44653a8cd.png)

----

## 動作確認

Pushすると GitHub Actions が実行され GitHub Pages にページが公開されているはずです。

公開先URLは以下の通りです。
https://GitHubのユーザ名.github.io/プロジェクト名（今回はfirst_nuxt）/

例えば私が作ったURLは
https://github-japanese-user.github.io/first_nuxt/
になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/4235cf42-7370-e2f2-f80c-1ae44a0bc2ec.png)

もし、404エラーが表示される場合は正しくHTMLが登録されている確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/6963ce85-3494-a0a5-1959-15c34aad0a2c.png)

----

## GitHub Pages に公開されているかを確認する

GitHubのリポジトリページに行き、Branchボタンを押して、gh-pages を選択します。
gh-pages というのが生成されたHTMLが格納されているブランチになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9254dfd1-f7d5-b11e-21bb-3d8a58bef618.png)

gh-pages のファイル内に index.html があれば生成は成功しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/35b93095-5361-85bb-3d75-d7c3722a8ee1.png)

----

次に、設定を確認します。

同じ画面の右上にある Settings ボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b3fdb07f-9a7b-7cad-101b-28127efca106.png)を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/44a2f141-03cc-ed27-ecdc-4e2ba3e3ab28.png)

設定画面の下を見ていくと、GitHub Pages の設定部分があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a4633aad-989c-8605-ec97-5eaa8a1684ca.png)

ここの Source が gh-pages branch になっているか確認します。
また、緑で Your site・・・と表示されていればリンクをクリックすればサイトが表示されます。
もし、設定もあっていて、index.html も生成されているのに、リンクが表示されていない場合は、
一旦、Sourceの部分を master に切り替えて、

https://GitHubのユーザ名.github.io/プロジェクト名（今回はfirst_nuxt）/README.md
がブラウザで表示できることを確認してから、
再度、Sourceの部分を gh-pages に切り替えるとうまくいくようです。

----

## URLの調整

これで、完成のように見えますが、トップページの裏でエラーが発生しています。

F12で開発者ツールを出し、Networkタブを開くと、404エラーになっているファイルが見つかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/b33fb905-c210-7616-2561-5c1854b92bbd.png)

これは、通常Nuxtで作ったプロジェクトはルートで動作する設定になっているためです。

https://GitHubのユーザ名.github.io/
が基準となっており、

実際のルートとなる
https://GitHubのユーザ名.github.io/プロジェクト名（今回はfirst_nuxt）/
とズレがあるため、相対パスがおかしくなるのが原因です。

最後にこれを解決する設定を行います。

----

VisualStudioCode で nuxt.config.js を開き、以下の通り変更します。

```javascript:nuxt.config.js変更前
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Global CSS
  */
```

```javascript:nuxt.config.js変更後
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/first_nuxt/favicon.ico' }
    ]
  },
  router: {
    base: '/first_nuxt/'
  }
  /*
  ** Global CSS
  */
```

linkのhrefの修正と、router: の追加です。

これで、相対パスのルートの設定が / から /first_nuxt/ に変更されます。

----

## 最終確認

変更したソースをコミットして、プッシュします。
変更内容はソース管理の nuxt.config.js を選択すると確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/80549b82-6320-18b2-0fbe-058609bb8690.png)
変更前と後の内容が左右に並び、変更した行がマークされています。
これをみて間違いがないかを確認できたら、コミットコメント
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/ccb5d59e-0af3-cecb-30ec-0158114b9b42.png)
を入力して、コミットボタン![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/3028e6e6-b643-8d4d-ef54-09c5f0aa7d83.png)を押します。

----

つづけて、その他ボタンから Push を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/4812e1c8-76f2-02b2-7fa7-1d851897e58f.png)

----

Push すると GitHub Action が動作しますので、GitHubのリポジトリページから Actions タブを開いて
動作が完了しているか確認してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/add1d356-75b8-12fc-6c7f-6bfb548b75dd.png)
コミットコメントの左が黄色マークの場合はまだ実行中です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/9a3195fe-3a27-953f-9039-64ecf632ff0d.png)
緑のチェックマークになれば実行完了です。

----

ブラウザでトップページをリロードして404エラーが消えていることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/82535/a7f86060-91eb-3421-dd88-4a2e648c418b.png)

----

長くなりましたが、以上ですべての作業が完了しました！