どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

GitHub Pagesを使用してVue.jsで作った静的サイトを公開する

f:id:nogawanogawa:20190308205709p:plain

今どきのwebフロントエンドの勉強がしたくなったときに、アウトプットの公開場所に困ることないですか? そんでもって無料で作りたくないですか?

私が最近Vueの勉強してるってのもあって、できた画面を公開できたらいいなーとか思ってたところに、こんな記事が。

karaage.hatenadiary.jp

githubではGithub Pagesというサービスで静的サイトを無料で公開することができるらしいです。 大したことやっているわけでは無いので、公開するネタは無いんですが、まあ作ったもんを公開してもバチは当たらない。。。はず。。。

ただ、Vue.jsを使った場合には、ちょっとひと手間必要らしいので今回は、その覚書です。

作り方

vueで作ったページを公開する

この辺の記事を参考にやってみました。

medium.com

qiita.com

techacademy.jp

github

github pagesには、ユーザーサイトとプロジェクトサイトの2種類あるそうで、ユーザー本人の紹介ページかプロジェクトの紹介ページかの違いになっています。

今回はお試しなので、プロジェクトサイトを作ってみます。 やり方はこんな感じです。

手順

  1. ローカルリポジトリに"gh-pages"という名前のブランチを作ってチェックアウトする
  2. githubサイドでもリポジトリを作成(my-first-projectとして進める)
  3. (vue.js特有)プロジェクトフォルダ直下に"vue.config.js"というファイルを作成
  4. 下記のように内容を作成

    // vue.config.js
    module.exports = {
    publicPath: ‘<my-first-project>’
    }

  5. .gitignoreファイルを編集し、'/dist'のに関する行をコメントアウトする(公開されるファイルが配置されるため)

  6. vue.jsをビルドする

    npm run build

  7. (.gitignore と vue.config.jsをコミットする前に)下記のコマンドを実施

    git add dist && git commit -m "コメント"

  8. 下記コマンドを実施(github側にブランチがない場合)

    git subtree push --prefix dist origin gh-pages

  9. githubのプロジェクトページに行って、設定をいじる
  10. Github Pagesの欄で、Sourceをgh-pagesブランチに設定する

実際にやってみた

前回遊びで作ったものがありますので、それを公開してみます。

nogawanogawa.github.io

なんかできとるwww

感想

とりあえず公開できたので良しとします!