僕らの大志の。

なんで?どうして?を解決する雑記的な役立つブログです。

自分のWebアプリを無料で公開してみる

おはようございます、Earthです。

今日は前回の記事に引き続くような感じで、実際にWebアプリを一般公開してみようと思います!

今回は、Github.ioというGitHubのサービスを使って簡単に、無料で一般公開してみます。まあテストなので、簡単なHTMLだけですが。

GitHubに登録

まずはGitHubにアカウント登録していきます。GitHubとは、すごく簡単に言うとWeb上でソースコードを管理しておけるサービスのことです。多くのIT企業が採用しているので、危ないものではないですよ。

The world's leading software development platform · GitHub

登録はこちらから。

github.ioリポジトリを作成

アカウントが作成出来たら、github.ioリポジトリを作成していきます。github.ioって?とかリポジトリって?とかいう疑問はとりあえず置いておきます。

f:id:Ourambitions:20171212005757p:plain

上記の画像のように「New repository」を選択し、「Repository name」を「アカウント名.github.io」に指定して、「Initialize this repository with a README 」の項目にチェックを入れ、「Create repository」を選択!

f:id:Ourambitions:20171212010500p:plain

上の画像のようになれば成功です。

index.htmlを追加

次に一般公開する対象となる、index.htmlを作成します。上の画像の真ん中辺りの「Create new file」を選択し、

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>hello</title>
</head>
<body>
    <p>hello, world!!</p>
</body>
</html>

こんな感じのファイルをindex.htmlとして作成してみてください。

アクセスしてみる

なんと、以上で一般公開完了です。
さっそく、「https://アカウント名.github.io/」にアクセスしてみましょう。ブラウザ上に「hello, world!!」と表示されていれば成功です!!お疲れ様でした!
あとは上記のhtmlを書き換えていけば自分の好きなようなWebアプリを公開することができますね。CSSJavaScriptも動きます!
サウナタイマーもとりあえずこんな感じで一般公開すれば良いですかねー。
以上です、ありがとうございました!

参考

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.

GitHubを使って3分でHPを公開する。 - Qiita