1時間で自作ページをGitHubPagesでWeb公開

#はじめに
自分のポートフォリオページを作ってWeb公開したいという背景から
まずは、vueのサンプルページをGitHub Pagesで公開してみた。

実際の作業時間は1時間程度。
まっさらな状態からのハンズオン。

#環境
Macbook Air(M1チップ)
node v14.16.0

nodeが入ってない人は[こちら](https://nodejs.org/ja/download/)からインストールできるよ。

#採用したフレームワーク

* フロントサイド
Vue.jsというJavaScriptのフレームワークを使ってプロジェクトを作成する。
フレームワークの中でも比較的学習コストのが低い割に便利なVueを採用した。
今回はプロジェクトを作った後の初期画面であるサンプルページを作るとこをまでを行う。

* Webサイトの公開
GitHub Pages は、静的なウェブページをホスティングするサービス。
GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、
任意でビルドプロセスを通じてファイルを実行し、Webサイトを公開できる。
採用した理由は、GitHubアカウントさえあればタダでできるしサーバーが不要で簡単そう。

#全体の流れ

* Vue CLIのインストール
Vue CLIはVue Command Line Interfaceで、
コマンドラインを使って開発を行うためのツール。

* Vueプロジェクトを作成・ローカルホストで確認
* GitHubでリポジトリを作成してpush
* GitHub PagesでWebサイトを公開

#Vue CLIのインストール

vueを入れてバージョンを確認。

```
$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.5.13
```


#Vueプロジェクトを作成・ローカルホストで確認

first-projectという名前をつけてプロジェクトを作成。

```
$ vue create first-project
```

Vueでプロジェクトを作成すると以下のような画面が出てくるのでEnter。
<img width="450" alt="スクリーンショット 2021-05-22 19.50.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/4b3cc471-49db-dd2b-a467-928fdc7d3c65.png">

こんな感じでプロジェクト作成に成功。

<img width="500" alt="スクリーンショット 2021-05-22 19.54.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/10026248-7395-016c-98d3-74a439ef7640.png">

言われた通り、npm run serveをしてみる。

```
$ cd first-project
$ npm run serve
```

するとローカルホストで今作ったプロジェクトが立ち上がるはず。

<img width="500" alt="スクリーンショット 2021-05-22 19.58.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/e818f838-b5d3-46ba-c322-795bf95ccc79.png">

この画面に従ってlocalhost:8081を適当なブラウザを開いて確認してみる。
(指示されたportを指定する必要あり)

今回は割愛するが、基本的にページを制作するときは、
vueファイルを編集してこの画面を確認して、の繰り返しになる。

<img width="500" alt="スクリーンショット 2021-05-22 20.03.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/eca081fc-12b8-ec90-7738-d88373d32cd9.png">

一旦、ターミナル上でCtrl+Cを使ってコンソール画面に戻り、ディレクトリ構造を確認。

* README.md
* package-lock.json
* src -> ページの制作で主に編集するファイルが格納されたディレクトリ
* babel.config.js	
* package.json -> npmでインストールしたモジュール一覧等が記載されている
* node_modules
* public

srcの中がこれからページの作成でいじるファイル。
基本的にcomponents化された部品をApp.vueで組み合わせて行くことになる。

今回はWeb公開が目的なのでデフォルトのままで進めていく。

<img width="300" alt="スクリーンショット 2021-05-22 20.05.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/587da7b4-f66c-4fd2-e989-c033021f88a8.png">

続いて、Webに上げるための生成物を作っていく。
一旦、ターミナル上でCtrl+Cを使ってコンソール画面に戻り、ビルドをする。

```
$ npm run build
```

するとビルド生成が出来てるはずなので、distディレクトリを確認。  

デフォルトで公開用ディレクトリの名前がdistになっているが
GitHub Pagesの仕様に従って名前をdocsに変える必要がある。

まずdistディレクトリを削除。
vue.config.jsを新規で作成して以下のように編集。

``` vue.config.js
module.exports = {
    publicPath: './',
    assetsDir: './',
    outputDir: 'docs'
  }
```

もう一度`npm run build`をするとdocsができているはず。
これでフロントの準備はOK。

#GitHubでリポジトリを作成してpush

gitが初めてであれば、ローカルで以下の設定をする。

```
$ git config --global user.name [名前]
$ git config --global user.email [メールアドレス]
```

GitHubのアカウントがない方は[こちら](https://github.co.jp/)からどうぞ。
右のボタンから新しいリポジトリを作成してみて下さい。
<img width="５00" alt="スクリーンショット 2021-05-22 20.35.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/292355b4-1384-d9ef-6019-cb16f7491f35.png">

リポジトリのメインページの [Code]ボタンからURLをコピー。

```
$ git remote add origin [GithubのリポジトリURL]
```

VSCodeでローカルリポの中をadd&commit&pushする。
[VSCode](https://code.visualstudio.com/)のgitの拡張機能は便利なのでお勧め。
私はGit操作に関してVSCodeを使ったが、コマンドラインで操作したい方は下のコマンド。

```
$ git add .
$ git commit -m "<commit-message>"
$ git push origin master
```

GitHubのページを見てファイルが上がっているか確認。

* GitHub PagesでWebサイトを公開

リポジトリのホーム->Settings->Pagesに進む。
Branchをmain、folderをdocsに変更し、save。

<img width="５00" alt="スクリーンショット 2021-05-22 20.51.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1057425/1684d9ae-debc-6803-c8f3-96951a767ed2.png">

https://[GitHubのusername].github.io/[リポの名前]/　にアクセスすると
ローカルで確認した画面がWeb公開されている。

この後はローカルのsrcを編集して、pushをする形でvueでのWebサイト開発ができる。

##GitHub Pagesで表示されない場合の対処法

そもそも反映に少し時間がかかるみたいなので、1時間くらい待ってみましょう。

それでも404ページが表示されてしまう場合は、
index.htmlに関して無駄なコミットして刺激を与えて上げると
表示されるようになるという記事を読みましたが私はダメでした。
キャッシュの問題なんですかね・・

リポを一回消してもう一回作ると反映されたりします。
何も変えていないのに、リポの作り直しで解決した話をよくネットで見かけます。