【GitHubPages】無料でWebページを公開する方法！
Webサイトを試しに作ってみたから公開してみたい！けど、お金はかけたくない！って人向けの情報です。
目次
- GitHub Pagesってなに？
- 公開して何がうれしい？
- 導入① GitHubのアカウントを作成しよう
- 導入② Repositoryを作成しよう
- 導入③ index.htmlファイルを取り込もう！
- 導入④ 公開しよう
- まとめ
GitHub Pagesってなに？
GitHubで公開しているHTMLやCSS、Javascript等を利用した静的ページを公開するサービスのことです。
公開して何がうれしい？
色々あります。
- 友人や同僚に公開して喜んでもらえる
- 副業でクラウドソーシングする時に実績を簡単に見てもらえる
- ソースを持っていなくても画面レイアウトの確認が簡単にできる
例えば、ランサーズ（クラウドソーシング）では以下のように業務募集をしており、こちらから～～万円で〇月〇日までに対応可能です。という提案をしなければなりません。ただし、募集している側からしても出来ない人にやってほしくはありません。実績として見せられるものがない状態では中々受注できるものも出来なくなってしまいます。そこで、今回紹介するGitHub Pagesを使って公開しておけば任せたいと思ってもらえる可能が高くなります。
導入① GitHubのアカウントを作成しよう
ここからGitHubのホームページに飛べるので、右上ボタンの「Sign up」から新規にアカウントを作成しましょう！
The world’s leading software development platform · GitHub
導入② Repositoryを作成しよう
ログインするとユーザのホーム画面が表示されて、左にRepositoryの一覧が並んでいます。初めての場合は何もないと思います。「New」をクリックしてください。
「Repository name」に「test」と入力して下さい。その後に「Create Repository」をクリックしてください。
これでRepositoryはできました！
導入③ index.htmlファイルを取り込もう！
まずは、index.htmlファイルを作成しましょう。GitHub Pagesはindex.htmlファイルじゃないとダメみたいです。
以下のように簡単なものでOKです。
<html lang="en">
<head>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
先ほどのGitHubページに戻って、「uploading an existing file. 」をクリックしてください。
画面が切り替わるので、indexファイルをドラッグして「Commit Changes」をクリックしてください。
これでコミットできました。
導入④ 公開しよう
「Settings」をクリックして設定画面に移動してください。
下にスクロールすると「GitHub Pages」という欄があります。これを「master」に変更してあげるとサイトのURLが現れます。クリックしてみると「Hello world!」が表示されます。
完璧！！
まとめ
今回は簡単なサイト表示をやってみましたが、cssやjavascriptも使用できるので色々試してみてください！
