LoginSignup
2
0

More than 3 years have passed since last update.

GitHub Learning Lab をつかって GitHub Pages を作る

Last updated at Posted at 2019-12-30

はじめに

GitHub Pages を使ってサイトが作れることを知り GitHub Pages のヘルプページ を見てみたのですが,翻訳中ということもあり少しわかりにくい.

GitHub Learning Lab の中に GitHub Pages のコースを見つけたので,これに沿って GitHub Pages を作成してみました.(とても簡単)

GitHub Learning Lab とは

GitHub Learning Lab は GitHub 上でプログラミングやプログラミングに関連した内容を学べる簡易コースです.コースでは,bot が issue (課題) を作成してくれます.issue 内のタスクを完了すると評価コメントが返ってきたり,その issue が閉じられて次の issue が作成されるようになっています.

GitHub Learning Lab には,GitHub Pages 以外にも GitHub 自体の使い方 (Apps/Actions), HTML やマークダウンの基礎などいろいろなコースが用意されています.
英語のみですが,読む文章量は少ないのでそれほど難しくありません.

事前準備

  • GitHub のアカウント
  • GitHub のアカウントと GitHub Learning Lab の紐付け

こちらのページに方法がまとまっています.
GitHub初心者が「GitHub Learning Lab」を使ったら良かった話

GitHub Pages の作成

GitHub Learning Lab の Learn GitHub with GitHub セクション内の GitHub Pages からスタートします.
Screen Shot 2019-12-31 at 7.40.41.png

コースの項目は7項目で,読み飛ばしていけば10分ほどで終了します.
Screen Shot 2019-12-31 at 7.45.28.png

内容は以下の3つです.
1. GitHub Pages を有効化
2. ページのテンプレート (Jekyll) の複製(複製は自動)
3. テンプレートの編集

GitHub Pages の作成方法は GitHub Learning Lab に従ってできるので省略し,補足をしておきます.

GitHub Learning Lab を使って GitHub Pages を作る際の注意点

  • URL の変更(任意)
    デフォルトでは,レポジトリ名が github-pages-with-jekyll になっており,サイトの URL が http(s)://github.com/%ユーザ名%/github-pages-with-jekyll/になってしまいます.
    ページ作成が完了したら,Settings の Repository name を以下のように %ユーザ名%.github.ioに変更してください. Screen Shot 2019-12-31 at 7.59.22.png

これで,サイトの URL が http(s)://%ユーザ名%.github.io となります.

  • 誤作動が起こったら

    途中で誤った操作をして,bot が正常に作動してくれないことがありました.その場合は一度レポジトリを削除してやり直しました.(もっといい方法があるかもしれません)
    GitHub Pages に戻って Leave Course を押すと,ポップアップが出てきます.そのポップアップ内のレポジトリを削除するかどうかのチェックボックスをオンにすることでレポジトリを削除できます.
    Screen Shot 2019-12-31 at 8.11.08.png

  • テーマの変更
    Settings > GitHub Pages > Theme Chooser から変更できます.
    Screen Shot 2019-12-31 at 8.16.58.png

サイトのベースが完成

味付けはこれから.
Screen Shot 2019-12-31 at 8.28.34.png

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0