HEROKUでウェブサイトを作る方法

よく「HEROKUを使うと簡単にウェブサイトを作ることができます」と書かれています。
実際には「簡単に」ではないと思います。
HEROKUの公式サイトの説明は丁寧ですが、指示通りに作業するだけで、いざ自分自身で作りたいとなると全くわかりません。
あとGitを使うのでこれも使ったことがない人間にはよく分かりません。
ネットの情報と我流を混ぜて一応、ウェブサイトを作ることができるようになりましたので、手順をメモしておきます。

準備

HEROKUを使うにはGitが必須のようです。
Gitより分かりやすいGitHubを使うのがポイントです。

HEROKUのアカウントを作りログインする。
GitHubのアカウントを作りログインする。

GitHubでの作業

左上のOctocatのアイコンをクリック。
Repository nameに適当なリポジトリ名を入力。ここでは「herokutest」とする。
下部にあるCreate repositoryをクリック。

作成したリポジトリのCodeが開く。
creating a new fileをクリック。
Name your fileに適当なファイル名を入力。ここでは「index.php」とする。
ファイルを編集する。例えば次の通り入力する。

<html>
<body>
<p>Hello World</p>
</body>
</html>

下部にあるCommit new fileをクリック。
ファイルがコミットされる（GitHubに反映される）。

HEROKUでの作業

左上のHEROKUのアイコンをクリック。
右上のNewをクリック。
Create new appを選択。
App nameに適当なアプリケーション名を入力。
Create appをクリック。

作成したアプリケーションのDeployが開く。
Deployment methodでGitHubを選択。
repo-nameにリポジトリ名を入力。ここでは「herokutest」と入力。
候補が表示されるので目的のリポジトリのConnectをクリック。
Manual deployのDeploy Branchをクリック。
下部に「Your app was successfully deployed.」と表示されれば成功。
その下のViewをクリック。
ブラウザでindex.phpが開く。URLは「https://アプリケーション名.herokuapp.com/」となる。

その他

リポジトリを削除する方法

いろいろ試していると不要なリポジトリができてしまいます。
不要なものは削除します。

リポジトリを選択。
Setingsを選択。
（最下部にある）Danger ZoneのDelete this repsitoryをクリック。
「Please type xxxxx/yyyyy to confirm.」の「xxxxx/yyyyy」の部分を入力してI understand the consequences, delete this repsitoryをクリック。
選択したリポジトリが削除される。

[ 2021年12月5日 | カテゴリー: デジタル | タグ: github , HEROKU ]

« 「日本語ダミーテキスト生成器」の英語版「English Dummy Text Maker」 | 最も優勝から遠ざかっているチーム(2021年度終了時点) »

You Look Too Cool