はじめに
ポートフォリオを手軽にそして安く作りたかったのですが、それを実現させた方法をまとめます。「手軽に」という点ではBootstrapテンプレートを利用することで実現します。「安く」という点ではGithub Pagesを利用します。無料というのは独自ドメインの取得料金は入っていないのでご注意ください(独自ドメインなしでよければこれもかかりません)。他はサーバー代もかかりません。さらに、Github PagesはHTTPS化もサポートしており、これも無料です。
今回私が作ったポートフォリオサイトを掲載しておきます。Bootstrapテンプレートベースで少々いじりましたが2時間程度でできました。このようなサイトが無料で運用できます。
Shizuma Kubo - Web engineering and Machine Learning
目次
1. Bootstrapテンプレートを利用する
テンプレートを探す
ポートフォリオサイトを一から作るのは時間がかかるので、ポートフォリオの元となるテンプレートを紹介します。おすすめは Start Bootstrapです。以下のBoostrapテンプレートを使えば、お洒落なサイトがすぐに手に入ります。コードはMITライセンスとなっているので無料で利用できます。
例えば、以下のリンク先のようなサイトのコードが無料で使えます。
他にも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ステップです。
ドメイン取得先でドメイン(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
ちなみに、Cレコードの場合はIPアドレスの箇所に(ユーザー名).github.ioの設定を一つだけすればいけると思います。（ただし、サブドメイン利用の場合のみ）
以上を登録の後、以下のコマンドでAレコードの設定の反映が確認できればオーケーです。数秒で反映されました。
$ dig +noall +answer (ユーザー名).github.io
Github側に独自ドメインの設定をする
次にGithub側の設定をします。レポジトリの「Setting」を開き、以下のような「Custom domain」という項目に独自ドメインを設定するだけです。
これで、独自ドメインからアクセスできることが確認できれば完了です。
5. HTTPSに対応させる
HTTPSの設定は簡単です。先程の「Custom domain」の下に「Enforce HTTPS」があるのでそれのチェックを入れるだけです。
独自ドメインの設定をして2、3分待つとチェックが押せるようになりました。また、チェックを押してから正常にアクセスできるまで5分程度かかりました。
まとめ
以上で、自分のポートフォリオサイトが完成です。テンプレートを使うことですぐに自分のサイトを作成できました。また、Github Pagesを使うことでサーバー代をかけずにサイトを公開し、独自ドメインの設定、HTTPS化まで無料でできました。是非、参考にしてポートフォリオサイトを作ってみてください！
