VueでGitHubにホームページを立てる方法まとめ

Javascript

どういう人に魅力のあるプランか?

自分でレンタルサーバ、ないしはサーバをもっているのであればわざわざGitHubを利用してHPを公開するメリットはありません。

が、以下に該当する人はメリットありありなので検討してみましょう。

サーバを借りることができない

未成年・あるいはクレジットカードを持っていないなどでサーバを借りることができない方。または単にサーバを借りる資金的な余裕がない方。

WordPressのような動的サイトでなくても構わない

GitHubではPHPは動作しないのでWordPressのような動的サイトは動作しません。

あくまでもHTMLとJavascriptとCSSだけで完結できるサイトである必要があります。

が、Firestoreという仕組みを導入することでアクセス回数に制限はありますが、無料でクラウド上のデータベースを使うことができます。

無料で広告なしのサーバが使いたい

無料HPやWikiなどは性質上、広告などが表示されてしまいます。

それは嫌だなっていう方にはぜひともおすすめしたいです。

ソースコードが公開されることに抵抗がない

GitHubは性質上、ソースコードが全世界に公開されます。

Javascriptはファイルの中身を秘匿にできないので秘密鍵を含んだコードを実行させることができません。つまり、APIキーを必要とする仕組みは基本的に使えません。

ソースコードを公開しても大丈夫なのであればぜひ検討ください。

Vue+GitHubの魅力

Vue(もといVue.js)はJavascriptのフレームワークでサーバーサイド(PHPとかSQL)なしにウェブページをつくることができます。

そしてPHPやSQLを使わないということはGitHubのgh-pagesという仕組みを使ってGitHub上に自身のホームページを設立することができるわけですね。

GitHubは登録が必要であるものの、gh-pagesという仕組み自体は無料会員でも使うことができるのでドメイン名だけで自分のホームページがつくれることになります。

gh-pagesの注意点

GitHubはあくまでもファイルを置いておくためのファイルサーバーとしての役割しか持っていないため、PHPやSQLを動作させることは不可能です。これらが動作しないということはWordPressも動作しません。

gh-pagesで実現できるのはあくまでもJavascript, HTML, cssだけで実現できるウェブサイトです。

また、GitHubはファイルサーバーをソースコードを公開することと引き換えに提供しています。ソースコードを公開することになるということはAPIキーのような情報をファイルに書いておくことはできないわけです(特にAWSのキーは書いておくと大変なことになる)

まあiksm_sessionくらいなら洩れたところで大したダメージはないが…

環境構築

まずは以下に列挙されているものをインストールしよう。

VSCode

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

万能エディタ、入れておいて損はない。

Node.js

Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

とりあえず最新版を入れておけば困ることはなさそう。

yarn

Yarn
Fast, reliable, and secure dependency management.

Node.jsにはnpmというパッケージマネージャがすでにあるのだが、それを強化したようなものだと思えば良い。

git

Git for Windows
We bring the awesome Git VCS to Windows

gitのコマンドが使えないと困るのでインストール。

レポジトリをつくろう

GitHubにレポジトリをつくります。今回はShogiBoardというレポジトリをつくったのでその場合のコマンドを書いていきます。

プロジェクトの作成

まずはプロジェクトを作成しよう!

で、その後で必要なフレームワークをガンガンインストールします。

Vueの導入

Installation | Vue CLI
🛠️ Standard Tooling for Vue.js Development

普通のVueではなくVue/cliを使う。何が違うのかはよくわかっていない。

yarn global add @vue/cli
vue create shogiboard
cd shogiboard

Vueだとvue init <project>みたいな感じでプロジェクトを作るのだが、Vue/cliの場合はcreateを使う。繰り返すが、何が違うのかはよくわかっていない。

なんかどっかの記事ではyarn global add vueも書いていたような気がするが、なくても動作するかもしれない。

Vue-router

Installation | Vue Router
The official router for Vue.js.

Vue-routerはページ遷移を可能にするフレームワーク。これがなくても実装はできると思うが、あったほうがめっちゃ楽。

vue add router

これで勝手にVue-routerを追加できる。

Vuetify

Quick start — Vuetify.js
Get started with Vue and Vuetify in no time. Support for Vue CLI, Webpack, Nuxt and more.

見た目をカッチョ良くしてくれるフレームワーク。あったほうが頼もしい。

vue add vuetify

ファイルを編集しよう

shogiboard/src/router/index.jsを編集します。

ここの下の方にあるrouterという変数を以下のように変更します。

// Before
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// After
const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

これはSPA(シングルページアプリケーション)のページ遷移がhistory modeではgh-pages上で正しく動作しないためです。そのためhash modeに切り替える必要があります。

これがわからんくて30分くらい格闘したのはここだけの秘密。

ちなみにhash modeに切り替えるとURLがちょっとダサくなるんですが、それはご愛嬌ということで。

vue.config.jsの編集

Vuetifyをインストールした状態だと、vue.config.jsは以下のようになっているのだがこれを追記します。

Vue.jsでつくったSPAをGitHub Pagesで公開する

https://qiita.com/sayuprc/items/3164ac0a1fe84273e652
// Before
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]
}

// After
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  publicPath: process.env.NODE_ENV === "production"
    ? "/ShogiBoard/"
    : "/",
  productionSourceMap: false,
  assetsDir: "",
  outputDir: "./dist"
}

意味としては出力ディレクトリの変更とプロダクションソースマップの無効化です。

出力ディレクトリをdistフォルダにした上で、publicPathを開発モードと本番モードで切り替えます。

Pushing updates manually

https://cli.vuejs.org/guide/deployment.html#github-pages

本番モードのときはページのルートディレクトリがレポジトリ名になるので、まあよくわからなくてもレポジトリ名をそのまま突っ込めば大丈夫です。

package.jsonの編集

// Before
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

// After
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "deploy": "gh-pages -d dist"
  },

deployというコマンドを認識するように変更します。

lintの行の最後にカンマを入れるのを忘れないようにしましょう。

動作確認しよう

ここまでできたら動作確認しましょう。以下のコマンドで開発用サーバを建てることができます。

yarn serve

このようにVuetifyのページが表示されたら成功!

ちなみにフレームワークをRouter->Vuetifyの順に追加するとこうなる。Vuetify->Routerで追加するとこれとは違う画面になります。

GitHubにプッシュしよう

git add .
git commit

コミットの内容は適当にInitial commitとかでいいんじゃないかと思います。

git remote add origin https://github.com/tkgstrator/ShogiBoard.git
git push -u origin master

あとはコミットの内容をプッシュします。

するとGitHub上のレポジトリのページが以下のように変わるはずです。

gh-pagesブランチの追加

ブランチのmasterというところをクリックしてgh-pagesと入力します。該当するブランチがないのでCreate branch: gh-pagesを選択します。

ブランチの作成に成功!!

gh-pagesツールのインストール

yarn add gh-pages --dev

ここまでできたら実際にファイルを作成してアップロードしてみましょう。

yarn build
yarn deploy

yarn buildコマンドでソースコードからHTMLやJavascriptのファイルを作成します。そしてそれらのファイルをyarn deployでアップロードするわけですね。

gh-pagesにアップロードされているファイルがこんな感じに変わったらアップロード成功です。

設定内にGitHub pagesの項目があり、そこにURLが載っています。

ページの確認

shogiboard

おまけサイト

上のやつはデフォルトそのまんまですが、ちょっといい感じにつくったページが以下の感じになります。

tkgling

記事は以上。

コメント

タイトルとURLをコピーしました