はなちるのマイノート

Unityをメインとした技術ブログ。自分らしくまったりやっていきたいと思いますー!

Vue.js+GitHub+CloudFlare Pagesで無料でサイトを公開する

はじめに

Webサイトを新しく公開しようということで色々と調べたところ、なるべく簡単かつ無料でやろうと思い以下を採用しました。

  • Vue.js
  • GitHub
  • CloudFlare Pages
イメージ図

一度環境構築さえ出来てしまえば、GitHubの特定ブランチを更新すればサイトが自動更新されるのでかなり使い勝手は良いと思います。その環境構築も楽なのが本当に嬉しいですね。

久々にWeb系を触ったので、メモがてらにどんな作業をしたのか書き残しておきたいと思います。

技術技術しているというよりかは、どっちかというと息抜き回ですね。

Vue.jsを用いたサイト作成

Vue CLIを使えば簡単にプロジェクト作成できます。

$ vue create プロジェクト名

ここでは紹介しませんが、作成したプロジェクトを好きにいじってサイトを作ってみてください。
ja.vuejs.org

公開フォルダ(デフォルトはdist)を生成・更新するには以下のコマンド。

npm run build

ローカルでのサーバー立ち上げは以下。

npm run serve

GitHubへアップロード

書く必要もないと思いますが、作成したプロジェクトをGitHubにアップロードします。

CloudFlare Pagesの設定

CloudFlareのサイトに行き、ログインもしくは登録を行います。
www.cloudflare.com

言語を日本語に変えられるので、英語が苦手な方も安心です。

あとはCloudFlare Pagesの画面からプロジェクトを作成、GitHubと連携してリポジトリを選択し、Vue.jsを選択してあげれば完了です。

設定している様子

ちなみに公開フォルダをdistから変更している場合は設定を忘れずに。

独自ドメインを設定する

お名前ドットコムにて独自ドメインを取得し、CloudFlare Pagesに設定をしました。(独自ドメインは有料です)
www.onamae.com

またお名前ドットコムといえば大量のメールが届くとのことで悪名高い?ですが、設定すれば来ないようにすることができます。ただ管理画面の遷移が遅いのと宣伝が挟まってくるのは辛いところではあります。

CloudFlare Pagesの画面から先程のプロジェクトを選択し、カスタムドメインを選択。

カスタムドメイン

DNS移行を選択。プランはFreeでOKです。

DNSレコードの確認&追加を行います。私の場合は変更は加えていません。

最後にネームサーバー変更とのことでお名前.comの方で作業が必要になります。

ネームサーバーの変更

お名前ドットコムのネームサーバーの変更から、以下の画像のように2箇所に値を打ち込みます。

ネームサーバーの変更

ここまでできたらCloudFlareに戻り、ネームサーバーの変更は完了です。

再度CloudFlare Pagesの画面に移動し、カステムドメインを設定してあげれば独自ドメインからのアクセスが可能になっているはずです。

公開されたサイト