読者です 読者をやめる 読者になる 読者になる

takanakahiko’s blog

多分三日坊主で辞めます。

学生が無料でmeドメインもらってgithub Pagesに適用する話

こんにちは。 これは、ディジコンアドベントカレンダーの12/12分の記事です。

www.adventar.org

今回は、学生限定になりますが、 完全無料でドメインの取得からWebサイトの作成までを行える方法を書いていきます。

GitHubのStudent Developer Packを使えるようにする

ちなみに記事を見ている方はGitHubのアカウント持っていますか? GitHubの会員登録に関してGitHubアカウント作成とリポジトリの作成手順 - Qiitaにて詳しく書いてあります。5分くらいで完了します。

学生メールを登録

アカウントができた、または既に持っている場合は、アカウントにメールアドレスを登録しましょう https://github.com/settings/emailsにアクセスしてください。

f:id:takanakahiko:20161212212737p:plain

で、上記の画面のなると思うので、「Add email address」の項目に、大学で使っているメールアドレス(ac.jp)を記入して「Add」を押してください。

その後、確認用のメールが来ると思うので認証(Verify email address)しておいてください。

GitHub Educationでの登録

次に、https://education.github.com/discount_requests/newにアクセスします。

f:id:takanakahiko:20161212213358p:plain

上記の画面になるとおもうので、学生さんの個人アカウントでしたら「Student」/「Individual account」と答えてください。 「next」を押します。

f:id:takanakahiko:20161212213800p:plain

上記のような画面になると思います。

  • Nameはそのままで大丈夫、
  • Verify academic statusは、先ほど登録した学生メールを選択、
  • School nameは学校の名前(英語表記)を入力、
  • Graduation yearは卒業年を入力
  • How do you plan to use GitHub?は適当な理由を英語で書きましょう。

最後の設問に関しては、例えば「My name is フルネーム and I learn computer science at university. The reason why I request ‘Education Account’ is for learn Git and proggraming.」と、こんな感じでそうでしょうか。

そしたら、メールが返ってくるまで待ちましょう。 申請完了の旨が書いてあったらOKです。

GitHub Pages用のリポジトリを作ろう

作り方がわからない方は、リポジトリの作り方に関してGitHubアカウント作成とリポジトリの作成手順 - Qiitaにて詳しく書いてあります。

ただ、注意点としては、リポジトリ名を「'GitHubアカウント名'.github.io」にしてください。例えば、私のGitHubアカウントはtakanakahikoなので、「takanakahiko.github.io」ですね。 で、リポジトリ内にindex.htmlを配置して、まずはテスト用にHelloWorldとでも表示するようにしておいてください。

終わったら、「http://‘GitHubアカウント名’.github.io」にアクセスしてください。ちゃんとindex.htmlの内容が表示されていれば大丈夫です。

私の説明がわかりづらかったら Git初心者でも大丈夫!完全無料でGithub PagesにWebページを公開する方法 | 株式会社LIGあたりにわかりやすい説明があるのでそこらへん頼ってください…(丸投げ)

ドメインを取る

次に、ドメインをもらいに行きましょう。 https://education.github.com/packにアクセスします。

f:id:takanakahiko:20161212221545p:plain

上記のような画面だと思うので、get your packボタンを押します。 次の画面で、バーッとスクロールして「namecheap」の項目まで行きます。

f:id:takanakahiko:20161212222119g:plain

で、上記のようにリンクをクリックします。(GIF画像貼ってますが再生できなかったらすみません)

f:id:takanakahiko:20161212222316p:plain

こんな感じの画面が出たら「Login with GitHub」でログインします。

f:id:takanakahiko:20161212222448p:plain

上記の画面で、自分の取りたいドメインの英字を入力します。 「takanakahiko.me」を取りたかったら、「takanakahiko」と入力します。

f:id:takanakahiko:20161212222744p:plain

xxxxxxxx.meの隣の「ADD」ボタンをクリック、「Complete Order」で次に進みます。 次の画面で「Finish Up」ボタンを押します。

Login画面で、右上の「REGISTER」ボタンをクリックします。

頑張って情報を入力します。 住所の入力がややこしいので、ここは例を挙げてみましょう。 「〒163-8001 東京都新宿区西新宿2丁目8−1」(都庁の住所)を使います。 この場合は

  • Address Line 1 に「2-8-1」
  • Address Line 2 に「西新宿」
  • City に「新宿区」
  • State に「東京都」
  • Postal Code に「163-8001」

を入力します。 Phone numberは090-xxxx-yyyyの場合「+8190xxxxyyyy」と入力します。

んで、登録ができたら「Fiinish UP」をクリックします。

ドメインの設定をする

もうひと踏ん張りです!頑張りましょう!

リポジトリ側の設定

先ほど作った「'GitHubアカウント名'.github.io」というリポジトリの中に「CNAME」というファイルを新規作成して1行目に「xxxxxxxx.me」(さっき取ったドメイン)と記述して保存してください。

namecheap側の設定

https://www.namecheap.comにアクセスします。

f:id:takanakahiko:20161212232819p:plain

上記のように左上の「SIGN IN」からログインします。

f:id:takanakahiko:20161212233105p:plain

上記の画面になるはずです。「Dashboaed」から自分のドメインの項目の右側にある「MANAGE」をクリックします。

f:id:takanakahiko:20161212233414p:plain

上記画面のように「Domain」の項目にいるはずです。 「Adbanced DNS」に移動してください。

f:id:takanakahiko:20161212235007p:plain

つぎに、上記画面のハイライトしてる部分にある「xxxxxx.me.」を「'GitHubアカウント名'.github.io.」(最後のドットを忘れないように)に変更してください。 つぎに、右のAutomaticを「1min」に変更してください。

で、その右にあるチェックボタンを押して保存します。

以上!

実際に「http://xxxxxxxx.me」(さっき取ったドメイン)にアクセスしてみましょう! リポジトリのindex.htmlが表示されるはずです!

以上になります。学生最高!!!!

何か不明点ありましたら なかひこくん@技術書典2 え-06 (@takanakahiko) | Twitterまでどうぞ!