ほろ酔い開発日誌

AI企業のエンジニアのブログです。機械学習、Web開発の技術的お話、ビジネスチックなお話、日常のお役立ち情報など雑多な内容でお送りします。

独自ドメイン+HTTPSなポートフォリオサイトを簡単に作成し、無料で運用する方法

f:id:seishin55:20190216173409j:plain

はじめに

ポートフォリオを手軽にそして安く作りたかったのですが、それを実現させた方法をまとめます。「手軽に」という点ではBootstrapテンプレートを利用することで実現します。「安く」という点ではGithub Pagesを利用します。無料というのは独自ドメインの取得料金は入っていないのでご注意ください(独自ドメインなしでよければこれもかかりません)。他はサーバー代もかかりません。さらに、Github PagesはHTTPS化もサポートしており、これも無料です。

今回私が作ったポートフォリオサイトを掲載しておきます。Bootstrapテンプレートベースで少々いじりましたが2時間程度でできました。このようなサイトが無料で運用できます。

Shizuma Kubo - Web engineering and Machine Learning

目次

  1. Bootstrapテンプレートを利用する
  2. github.ioのURLを使って静的サイトを公開する
  3. ポートフォリオを充実させる
  4. 独自ドメインを設定する
  5. HTTPSに対応させる

1. Bootstrapテンプレートを利用する

テンプレートを探す

ポートフォリオサイトを一から作るのは時間がかかるので、ポートフォリオの元となるテンプレートを紹介します。おすすめは Start Bootstrapです。以下のBoostrapテンプレートを使えば、お洒落なサイトがすぐに手に入ります。コードはMITライセンスとなっているので無料で利用できます。

startbootstrap.com

例えば、以下のリンク先のようなサイトのコードが無料で使えます。

startbootstrap.com

他にもBOOTSTRAP ZERO ALL BOOTSTRAP THEMESもおすすめです。 好きなテンプレートを見つけて、ダウンロードし、ローカルで確認してみましょう。

ローカルでの確認

各テンプレートにダウンロードボタンがあるのでダウンロードして解凍しましょう。その中にindex.htmlがあるのでそれをクリックしてください。ライブプレビューと同じものがブラウザで表示されるはずです。index.htmlがサイトのトップになります。

ダウンロードしたファイルの中から必要なファイルををまとめてディレクトリにしましょう。そしてそれをGit管理します。commitまでしておきましょう。

$ git init
$ git add .
$ git commit -m "Initial commit"

2. github.ioのURLを使って静的サイトを公開する

それでは、まず用意したサイトをそのまま公開してみましょう。

公式サイトはこちら: Websites for you and your projects.

以下のようにGithubでレポジトリを作成します。そのときに、(ユーザー名).github.ioとします

レポジトリ作成
レポジトリ作成

ちなみに、有料版利用者(Pro)の人はPrivate Repositoryにしてもサイトの公開ができます。

あとは、先程作成したディレクトリで以下のようにpushしてください。(URLは自分のレポジトリに変更)

$ git remote add origin git@github.com:kuboshizuma/kuboshizuma.github.io.git
$ git push -u origin master

ここまでで、https://(ユーザー名).github.ioにアクセスすると作成したページが公開されます。なお、pushしてから反映まで30秒くらいかかったので少しだけ待つと反映されます。

3. ポートフォリオを充実させる

テンプレートの内容を自分の内容に書き換えましょう。HTML、CSSに詳しければ自分流に修正を加えてもよいと思います。

また、テンプレートの利用が必須ではないので、自分のオリジナルのものを作成しても問題ありません。

コードを書き換えたら、Githubにpushしましょう。pushすると自動的にサイトに反映されます。

以上で(ユーザー名).github.ioのURLで自分のポートフォリオサイトを持つことは可能ですが、独自ドメインにしたい場合は以下に進みます。

4. 独自ドメインを設定する

独自ドメインの取得にはお名前.comムームードメインを私はよく使います。今回はムームードメインで取得しました。

独自ドメインの設定の手順は以下の2ステップです。

  1. ドメイン取得先でドメイン(github.io)を設定する
  2. Github側に独自ドメインの設定をする

ドメイン取得先でドメイン(github.io)を設定する

公式サイト: Setting up an apex domain

ドメインの設定はAレコードの設定をするとよいと思います。サブドメインの場合はCレコードでも設定できますが、今回は公式サイトに書かれている にAレコードで進めます。

ムームードメインの場合、「ムームDNS」からドメインを選択して、カスタム設定を行います。他の業者でも同様の設定場所があるはずなのでそれを探しましょう。

そして、以下のように4つのIPアドレスをAレコードとして登録します。サブドメインの場合は画像の空白箇所にプレフィックスを入れます。

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Aレコードの設定
Aレコードの設定

ちなみに、Cレコードの場合はIPアドレスの箇所に(ユーザー名).github.ioの設定を一つだけすればいけると思います。(ただし、サブドメイン利用の場合のみ)

以上を登録の後、以下のコマンドでAレコードの設定の反映が確認できればオーケーです。数秒で反映されました。

$ dig +noall +answer (ユーザー名).github.io

Github側に独自ドメインの設定をする

次にGithub側の設定をします。レポジトリの「Setting」を開き、以下のような「Custom domain」という項目に独自ドメインを設定するだけです。

カスタムドメイン
カスタムドメイン

これで、独自ドメインからアクセスできることが確認できれば完了です。

5. HTTPSに対応させる

HTTPSの設定は簡単です。先程の「Custom domain」の下に「Enforce HTTPS」があるのでそれのチェックを入れるだけです。

HTTPSセッティング
HTTPSセッティング

独自ドメインの設定をして2、3分待つとチェックが押せるようになりました。また、チェックを押してから正常にアクセスできるまで5分程度かかりました。

まとめ

以上で、自分のポートフォリオサイトが完成です。テンプレートを使うことですぐに自分のサイトを作成できました。また、Github Pagesを使うことでサーバー代をかけずにサイトを公開し、独自ドメインの設定、HTTPS化まで無料でできました。是非、参考にしてポートフォリオサイトを作ってみてください!