はじめに
自分のポートフォリオページを作って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を新規で作成して以下のように編集。
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に関して無駄なコミットして刺激を与えて上げると
表示されるようになるという記事を読みましたが私はダメでした。
キャッシュの問題なんですかね・・
リポを一回消してもう一回作ると反映されたりします。
何も変えていないのに、リポの作り直しで解決した話をよくネットで見かけます。