おこじょんの勉強ブログ

超プログラミング初心者の覚書

Cloud9 から Heroku に静的ページを公開するための 7 つのステップ

f:id:okojon:20170718131551p:plain

本題に入る前に

Cloud9 の公式ドキュメントに書いてある方法ではうまくいかないので、今回は Heroku 公式ドキュメント (https://devcenter.heroku.com/articles/heroku-cli) を参考に覚書きです。

STEP1 インストー

$ wget -qO- https://cli-assets.heroku.com/install-ubuntu.sh | sh

Heroku コマンドを使えるように必要なもの一式をインストールします。公式的には自動更新されないためあまりオススメでないようですが、他に試しても、公式コミュでも結局この方がうまくいくようでした。

STEP2 一応…

最新の状態にしなきゃなので一応 heroku update しておきます。

STEP3 Heroku にログインする

$ heroku login

Enter your Heroku credentials.
Email: adam@example.com
Password (typing will be hidden): *****

Email, Password を入力 -> Logged in as adam@example.com と出ればOK

STEP4 クローンする

$ git clone https://github.com/nulltask/heroku-static-provider.git my-site

サイト公開に必要なもの一式をクローンします。ちなみに my-site の部分は任意の名前でOK。

STEP5 Cloud9 にサイトデータをコピー

public ディレクトリにサイトデータ(HTML/CSS等)をドラッグ&ドロップします。
Github や Bitbucket を利用していたら同ディレクトリにデータをクローンします。

STEP6 いよいよ構築

$ cd my-site
$ heroku create my-site

これで my-site.herokuapp.com が構築されます。

STEP7 サイト公開

$ git add .
$ git commit -m 'Static site has developed'
$ git push -u heroku master
$ heroku open

以上でサイトが公開されました。

(おまけ) サイト更新するには?

ファイル編集後に

$ git add .
$ git commit -m '○○'
$ git push -u heroku master

するだけでOKです。ちなみに今回ワークスペースはテンプレートを Blank にしています。

ちなみに

私のプロフィールサイトは Heroku で公開しています。
https://webokojo.herokuapp.com/