今どきのwebフロントエンドの勉強がしたくなったときに、アウトプットの公開場所に困ることないですか? そんでもって無料で作りたくないですか?
私が最近Vueの勉強してるってのもあって、できた画面を公開できたらいいなーとか思ってたところに、こんな記事が。
githubではGithub Pagesというサービスで静的サイトを無料で公開することができるらしいです。 大したことやっているわけでは無いので、公開するネタは無いんですが、まあ作ったもんを公開してもバチは当たらない。。。はず。。。
ただ、Vue.jsを使った場合には、ちょっとひと手間必要らしいので今回は、その覚書です。
作り方
vueで作ったページを公開する
この辺の記事を参考にやってみました。
github
github pagesには、ユーザーサイトとプロジェクトサイトの2種類あるそうで、ユーザー本人の紹介ページかプロジェクトの紹介ページかの違いになっています。
今回はお試しなので、プロジェクトサイトを作ってみます。 やり方はこんな感じです。
手順
- ローカルリポジトリに"gh-pages"という名前のブランチを作ってチェックアウトする
- githubサイドでもリポジトリを作成(my-first-projectとして進める)
- (vue.js特有)プロジェクトフォルダ直下に"vue.config.js"というファイルを作成
下記のように内容を作成
// vue.config.js
module.exports = {
publicPath: ‘<my-first-project>’
}.gitignoreファイルを編集し、'/dist'のに関する行をコメントアウトする(公開されるファイルが配置されるため)
- vue.jsをビルドする
npm run build
- (.gitignore と vue.config.jsをコミットする前に)下記のコマンドを実施
git add dist && git commit -m "コメント"
- 下記コマンドを実施(github側にブランチがない場合)
git subtree push --prefix dist origin gh-pages
- githubのプロジェクトページに行って、設定をいじる
- Github Pagesの欄で、Sourceをgh-pagesブランチに設定する
実際にやってみた
前回遊びで作ったものがありますので、それを公開してみます。
なんかできとるwww
感想
とりあえず公開できたので良しとします!