はじめに

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

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

環境

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

nodeが入ってない人はこちらからインストールできるよ。

採用したフレームワーク

フロントサイド
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。

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

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

$ cd first-project
$ npm run serve

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

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

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

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

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

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

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

続いて、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のアカウントがない方はこちらからどうぞ。
右のボタンから新しいリポジトリを作成してみて下さい。

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

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

VSCodeでローカルリポの中をadd&commit&pushする。
VSCodeの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。

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

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

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

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

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

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

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