【初心者向け】GitHub Pagesを使ってHPを爆速で公開する

4707 ワード
新人プログラマ応援 初心者向け 転職 github-pages GitHub GitHub テキストリンク

上記の記事を読んで、転職活動のために自分のプロフィールやスキル、
成果物をまとめたHPを作ろう！と思って作成しました。
　
HP、作ったからには公開しないと誰にも見てもらえないです…(´・ω・`)
HPを作成する際、作ったは良いけど公開するのがちょっと手間ですよね。

HPを公開する際にはサーバが必要です。自前で用意するのは今回はナシとして、
レンタルサーバでも良いけど折角ならGitHubの機能の一つ、GitHub Pageを使って
めっちゃお手軽に自分の作ったページを公開しちゃいましょう！

最初に紹介した記事のドメインがGitHubのものだったのでどうやったんだろうと
調べて知りました。とっても便利ですよ！

ちなみに実際に作ったのは↓です。
https://stern118.github.io/

GitHub Pageとは

「GitHub Pages」とは、「GitHub」を使ってHPを公開することができる機能です。
サーバを用意する必要がなく、GitHubのアカウントを持っていれば誰でも使用することのできる機能です。

詳しくは下記の公式のHPをご参照ください。
https://pages.github.com/

GitHubを使用しているので以下の様なメリット、デメリットがあります。

  • メリット

    1. Webサーバが不要！
    2. GitHubのアカウントを持っていれば爆速でHP公開できる
    3. 公開しているファイルを増やしたり、編集する際Gitの基本練習になる

  • デメリット

    1. ソースコードが公開される
    2. 多数の人がアクセスするサイトには向いてない

実際やってみる

早速やろうぜ～！GitHubのアカウントがない人は作成してね！
PCにGitがインストールされていない人はまずGitをインストールしましょう。
[Git OS名 インストール]などで調べれば沢山の有益な情報がネットには転がっています。

リポジトリの作成

公式HPを見ると、

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

とありますので、[自分のユーザ名].github.ioというリポジトリを作成しましょう。

  1. Repository nameの欄に「[自分のユーザ名].github.io」を入力
  2. Create repositoryボタンを押下して、リポジトリを作成

リポジトリのクローン

リポジトリをクローンします。

上の画像のURL部分をコピーして、git cloneします。
(テキストボックスの横のボタン押すとコピーされます)

リポジトリを置きたい任意の場所に移動します。
OSがMacの人はターミナルで、Windowsの人はGit Bash上で、以下のように入力してください。
※Git Bashはクローンしたい場所で右クリックからGit Bash Hereを選べば使えます。

$ git clone https://github.com/stern118/stern118.github.io.git

警告が出ますが無視して大丈夫です。

index.htmlの作成

以下のコマンドを実行して、index.htmlを作成します。

$ cd stern118.github.io               // クローンした場所へ移動
$ echo "Hello World" > index.html

GitHubにindex.htmlをpush

あと一息です！
以下のコマンドを実行して、ローカルで作成したindex.htmlをGitHubにpushします。

$ git add --all                         // ステージングエリアに変更ファイルを追加
$ git commit -m "Initial commit"        // ローカルリポジトリにコミット
$ git push -u origin master             // リモートリポジトリにプッシュ

ページにアクセス

公開の準備は整いました。
https://[自分のユーザ名].github.io.にアクセスしてHello Worldと表示されていれば成功です！
あとはこのページを充実させたり、新しくファイルを作ってリンクを繋いだりして
カスタマイズしていきましょう。

やってみて感想

爆速すぎて感動しました。
静的なページを公開するのにお手軽で早くて本当におすすめです！

あとQiita初投稿なんですが、コンスタントに記事を投稿してる方々凄いなぁと思いました。
初投稿故色々見苦しいところがあるかと思いますが、参考になれば幸いです。

参考

https://pages.github.com/
https://qiita.com/turmericN/items/76559f0b70983469e7c7

最後に

転職活動中の人は一緒に頑張ろうな！！！！