たった3分!無料!GitHubにWebページ(GitHub Pages)を作る方法 | Select *
Web Web制作

たった3分!無料!GitHubにWebページ(GitHub Pages)を作る方法

github-pagesオハヨウゴザイマス!
GitHubと仲良くなりたい@deepblue_willです。

エンジニアのメッカともいうべきGitHub。GitHub上にWebページを作ることができるのはご存知ですか?カップ麺を作るぐらい簡単で、しかも無料です!これは作らない手はないですよね!



GitHub Pages

github-page1
GitHub上につくるWebページは「GitHub Pages」と呼ばれます。
作成すると「http://deepblue-will.github.io/」といういうURLでアクセスできる自分のWebページが作成できます。
しかも、いいかんじのテンプレートが10種類以上も用意されてます!
残念ながら静的なページのみ(PHPとかRubyとかで動くものは無理)ですが、ちょっと自分のページ持ちたい!とか私みたいにデモページ置き場にするとか色々使い道はあるかと思います。

作り方

3分で作れます。頑張れば1分で作れます。それくらい簡単です。
カップ麺できるの待っている間に是非作ってみてください。
事前準備としてGitHubのアカウントを作成しておいてくださいね。(メールアドレスが必要)

  1. まずリポジトリを作ります。「New repository」をクリックすると以下の様な画面が表示されるので、Repository nameに{username}.github.ioと入力してください。私の場合はusernameはdeepblue-willなので、「deepblue-will.github.io」になります。入力し終わったらCreate Repositoryをクリックします。
  2. github-page6
  3. そしたら以下のような画面になるので、右下の「Settings」をクリックします。
  4. github-page5
  5. 表示された画面の下のほうにGitHub Pagesというセクションにある「Automatic Page Genarator」をクリックします。
  6. github-page4
  7. ページの編集画面が表示されます。ここではMarkdownでページを編集できるのですが、あとからでも編集できるので「Continue To Layouts」をクリックして先に進みます。
  8. github-page3
  9. テンプレートを選択する画面です。これだ!と思うやつを選択したら右上のボタンをクリックします。
  10. github-page2
  11. これで完成です。あとはhttp://{username}.github.ioにアクセスしてWebページが作成されていることを確認しましょう。

最後に

先日、「最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました!」という記事を書いたのですが、せっかくだからデモページ公開したいなぁと思ってどこに作ろうが迷ってたのですが、GitHub上に作れることを思い出したので作ってみました。そしたらものすごく簡単にできたので本日紹介した次第です。

注意としては、新たにファイルを追加したり、変更する場合はGitHubにアップロードする必要があることです。
GitHubにファイルをアップロードするのはFTPと違って特殊です。
詳しくは説明しませんが、流れとしては、
  1. 自分のPCにリポジトリを作る
  2. リポジトリにファイルを追加する
  3. コミットする→GitHubにプッシュする
という感じです。

コマンドでできるのですが、初心者はクライアントを使うのがいいと思います。
GitHub純正のクライアント Windows版 Mac版などです。
私はSourceTreeというフリーのGitクライアントを使用しています。

GitHubはWebやるなら知ってて損はないので、これを気に少し覚えてみてはいかがでしょうか?

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)