HTML,CSS による静的サイトをHerokuにデプロイ

0. はじめに

　案件などで稼ぎたいときにエンジニアはポートフォリオを作成するだろう。そして誰もが躓くのが公開(以下デプロイ)だ。今回は無料でサーバを利用できるHerokuでポートフォリオをデプロイする方法について紹介する。デプロイにはgitを用いる。

1. 準備

　今回はPHPを用いてデプロイしていく。「PHP使ったことない」という人でも簡単に実装できるから身構えないでほしい。
　まずはじめにポートフォリオ用のディレクトリを作らず、他のHTMLファイルなどが混在している場合はポートフォリオ用のディレクトリを作成し、ファイルを入れる。ここで、HTML用、CSS用等ディレクトリを分けている場合は、HTMLファイルポートフォリオ用ディレクトリ直下に移動する。(HTMLファイルが複数ある場合はトップページのファイルのみ)
　以下のようなファイル構成にしてほしい。(HTMLやCSS等をディレクトリに分けなくても良い)

dir

Portfolio/
        ├ "ファイル名".html
        ├ HTML/
        │    └ "ファイル名".html(あれば)
        ├ CSS/
        │   └ "ファイル名".css
        └ JavaScript/
                   └ "ファイル名".js

2. PHPファイルとjsonファイル作成

　PHPのファイルを作成する。ポートフォリオ用ディレクトリ直下にindex.phpというファイルを作成し、以下を入力する。(ファイル名がindex.phpでないとサイトを開くことができない)

index.php

<?php include_once("'ファイル名`.html"); ?>

　次にjsonファイルを作成する。サイトの設定などを記入するファイルである。ポートフォリオ用ディレクトリ直下に'composer.json'を作成し以下を入力する。(ファイル名が'composer.json'でないとサイトを開くことができない)

composer.json

{}

3. デプロイ

　ここから実際にサーバー上にファイルを置きデプロイする。shellを開きカレントディレクトリをポートフォリオ用ディレクトリに移動、以下コマンドを叩く。

shell

heroku login
heroku create "アプリ名"
git init
git remote add heroku https://git.heroku.com/<アプリケーション名>.git
git add .
git commit -m "first commit"
git push heroku master

　エラーが起こらなければデプロイ完了だ。デプロイしたサイトを開くにはheroku openコマンドで開くことができる。

4. まとめ

　今回は静的サイトをHerokuにデプロイする方法を紹介した。ポートフォリオをデプロイする際に参考にしてほしい。