5ステップでできる Herokuにデプロイ 作成サイト公開

ハローヘロクをしよう

• ポイントとして
• gitでHerokuへpushするのでgitが必要
• Herokuアカウントが必要
• Herokuへ接続＋pushするためにHeroku CLIが必要
• ハローヘロクファイルの作成

ということを覚えてしまえばいとも容易く自分のホームページをHerokuにて紹介することができます！

まず必要なものをすべてダウンロードしてインストールしましょう

1st
・gitのインストール(vs code使ってたら右下に出てきて入れてるかも)
ダウンロードはこちらから
いつも通り手順をスクショとりながらやろうかなと思ったのですが調べたら手順紹介がたくさんあったので割愛
このページがわかりやすいっぽい　ですけど他に自分で調べても良いかも！！

2nd
・Herokuアカウント作成ですけどこれもかなり紹介ページが多いですね......
デプロイまでするページもかなりあってそもそも記事を書く必要があるのかわからなくなってくる......
まあ自分用のメモということで続けます


例えばこちら←こちらを参考に勧めましょう

3rd
・Heroku CLIのインストール
　まずはHeroku dev centerでHeroku CLIをダウンロードインストールします

4th
・ハローヘロクファイルの作成
　まずプロジェクトフォルダの作成
　ハローヘロクファイルのためのindex.htmlを作るのですが抑えておきたいポイントは２つ

• Herokuではphpやerbなどhrmlに埋め込むタイプの動的ページしか対応していない
• indexファイル(もしくはルートで"/"のページを設定していないと失敗する)がないと失敗する

ということで一番簡単な方法として作るのがこれ

左の白で囲ったのがフォルダ構成
そしてindex.htmlと内容をコピーしたindex.phpファイルを作る！
phpファイルをブラウザ確認するのには別にソフトを使うなどが必要なので
index.htmlをブラウザ表示で確認しよう
このプロジェクトフォルダをHerokuにアップするので画像などもここに入れるなど注意が必要ですよ！


さて準備完了　コマンドプロンプト、powershell、ターミナルの起動
プロジェクトフォルダで開いたほうが早いので一応掲載
フォルダ左上のファイルを押せばpowershellをこのフォルダで開けます

5th
1.まずgitを使ってプロジェクトフォルダを保存する
使用者の設定として

  git config --global user.name "名前"
  git config --global user.email ～@example.com
　　　　　　　　を入力する(GitHub Desktop してたら要らないかも)

プロゲートで確認して覚えてほしいのですがgitのコマンドを使ってプロジェクトフォルダを保存
git init   でgitファイルを作成
git add -A　   にて全ファイルをgitでの保存対象にする
git commit -m "メッセージ"    でgitで対象をメッセージ付きで保存
といった手順

2.そのままのコマンドでHerokuへログインする
heroku login  と入力して
Heroku登録時に使ったメールアドレスとパスワードの入力

イメージこんな感じ
これでログインまでしたのであとはプッシュするだけ！

heroku create "アプリネーム"

アプリネームは何でも良いし入力なしだと勝手につけてくれます
同じ名前は登録できないようになっているのでそこにも注意が必要です

コマンドには緑っぽい色のアンダーラインをつけてます
黄色のアンダーラインはアプリネームが影響して作られる公開ページのURLです
ここをブラウザ開くと自分が作ったページを表示できます
今回はアプリネームを書いてないので勝手につけてくれてる

表示されるページはこれだけ！笑

Railsに関してはこちらを参考にしてください

今日もお疲れさまでした ^^) _旦~~