初心者向け！Githubページを公開してみよう！
初心者向けにGithubページの公開の仕方を解説してみます。誰でもコピペでサクッと作れるようにするのが目標です。
Githubページは静的なページなら簡単に無料で公開できるので、WEBサーバー代わりに使えて便利です。
とりあえず、何も考えずにやってみましょう。
この記事で説明してること
- Githubページ(Github Pages)の特徴
- アカウントURLの静的ページを作る
- リポジトリごとの静的ページを作る
- Githubページでjekyll-nowブログを作る
Githubページ(Github Pages)のおおまかな特徴
Githubページの特徴をざっくりまとめると
- HTML,CSS,JavaScriptを使った静的なページが公開できる
- アカウントURLの静的ページが公開できる
- リポジトリごとの静的ページが公開できる
- jekyll-nowで簡単にブログを作れる
という感じのものです。
つまり、作れるものは静的ページとブログ、URLはアカウント用とリポジトリ用の各2種類です。
アカウントのページとは？
[ユーザ名].github.ioって名前のリポジトリを作って、そこに静的なhtml,css,jsなどをmasterプッシュして設定すると公開されます。
リポジトリごとのページとは？
適当な名前のリポジトリを作って、そこに静的なhtml,css,jsなどをmasterプッシュして設定すると公開されます。
Githubで作れるブログとは？
Jekyll(ジキル)を使ってブログ作成ができるように、GitHub Pagesが用意してくれている機能です。コミットのたびにJekyllがページを作ってくれます。(ちょっとタイムラグはあるけど)
GithubでアカウントURLに静的なページを作ってみる！
とりあえず、一番簡単なアカウントURLで静的なペラページを作ってみましょう！
最初なので、URLはアカウント直にしましょうか。
公開用リポジトリを作る
アカウント直のURLなら、公開用に[ユーザ名].github.ioという名前のリポジトリを作るだけです。
下記は単にリポジトリを作っているだけなので、分かる方は読み飛ばしましょう。
まず、Githubにログインします。
次に公開用のリポジトリを作ります。右上のメニューから「new repository」を選択。
「Repository name」は[ユーザ名].github.ioでいきましょう。
「Description」は何でもいいです。分かりやすいように書いておきます。
「Public・Private」のラジオボタンはPublicにしてください。
「Initialize this repository with a README」は、「あらかじめREADME.mdをリポジトリ内に作るかどうか」の選択です。チェックしておくとすぐにブログが作れるので、今回はチェックしておきます。
「Add .gitignore:」や「Add a license:」もそのままでいいです。
ここまでできたら「Create repository」をクリック。
これで公開用のリポジトリができました。
たったこれだけで、下記のようなURLが作成されています。
http://[ユーザ名].github.io
index.htmlを作る
作ったリポジトリにindex.htmlをmasterプッシュするとサイト更新ができます。
初期状態では、トップページはREADME.mdのコンテンツが表示されています。
これをindex.htmlで「Hello world」と表示してみます。
[ユーザ名].github.ioリポジトリの「Code」タブをクリックして、ページ内の「Create new file」をクリック。
「Name your file」と書かれたinputにindex.html、「Edit new file」内に<h1>Hello world</h1>とでも入れて「Commit new file」をクリックしましょう。
これだけでトップページが変更できました。
超簡単ですね。
基本的な流れはこんな感じで、あとは普通にGithubを使う感じです。
ローカルでindex.htmlを作り込んだり、CSS,JavaScriptを追加したり、他のページを作ったりして、このリポジトリのmasterブランチにコミットしてやれば、[ユーザ名].github.ioに公開されます。
GithubのリポジトリURLに静的なページを作る
リポジトリURLを公開する基本的な流れは、下記だけです。
- 適当な名前のリポジトリを作る。
- 「Settings」で公開フォルダをする。
以上！
リポジトリを作って、「Settings」タブの「GitHub Pages」設定部分から「Source」プルダウンで公開したいフォルダを選びます。
リポジトリをそのまま公開に使いたい時は、「master branch」を選択。
docsフォルダで公開したい時は、「master branch /docs folder」を選択。
どっちを選んでも、公開URLは下記になります。
http://[ユーザ名].github.io/[リポジトリ名]
簡単ですね。
サイト更新をしたければ、マスターブランチにコミットればいいんです。
GithubでJekyllを使ってブログを作る
ここまでで、Githubを使って静的サイトを作る方法をざっくりとまとめました。
次にGithubでJekyllを使ってブログを作ってみましょう。
http://[ユーザ名].github.io/blog/というURLにブログを作ってみます。
GitHub Pagesでは、標準でJekyllが使えるようになっています。インストールなどは必要ないので、テンプレートなどのファイル一式を用意してあげるだけでブログになります。
ローカルでもJekyllを作っておいた方が便利ですが、今回はローカルの手順をすっ飛ばして、いきなりGitHub上に作っていきます。
なお、ローカルでGitHub PagesのJekyll環境を構築するには、Rubyのgem install github-pagesでインストールすることもできます。
Jekyllについて
まずはJekyllの説明から。
JekyllはRubyを使った静的サイトジェネレーターです。DBを使わずにマークダウンで書かれた記事をHTMLに翻訳して出力してくれます。
シンプルなのが特徴で、Jekyllのルールに従ってファイルを配置するだけでサイト構築ができます。
GitHub Pagesで作る場合は、「Jekyll Now」というツールを使うのが一番簡単です。Jekyllを使ったことがない方でも、なんならRuby環境がない方でも、Jekyllをすぐに試せます。
Jekyll + GitHub Pages でブログをつくってみた
クリック1発で、Github上にブログを無料で作成できる「Jekyll Now」が超絶便利！
Jekyllを使うためのリポジトリ設定
Jekyllブログを簡単に作るには、「Jekyll Now」ファイル一式をフォークしてくると早いです。
まずbarryclark/jekyll-nowに行って、右上の「Fork」をクリックします。
フォークすると、ファイル一式が自分のアカウントで変更できるようになります。
[ユーザ名]/jekyll-nowの「Settings」を開いて、「Repository name」を自分が作りたいリポジトリ名に変更します。今回はhttp://[ユーザ名].github.io/blog/を作りたいので「blog」としました。
リポジトリ名を変更したら、「Settings」の「GitHub Pages」でSourceを「master branch」に変更します。
CSSコンパイル
jekyll-nowに同梱されている_sassフォルダ内のSASSをコンパイルして、style.cssを作る。
コンパイルすら面倒なら、公式のCSSをコピペして新規でstyle.cssを作ってもいいと思う。
_config.ymlの編集
直下にある_config.ymlを下記のように変更。
name: ブログのテスト description: ブログのdescriptionですよ。 baseurl: "https://[ユーザ名].github.io/blog/"
ここまでで、とりあえずブログは表示されるようになる。
jekyll-nowで記事投稿
記事を投稿してみる。
記事のファイル名は西暦年-月-日-タイトル.mdみたいな形式にする。
例えば、2017-8-28-Hello-World.mdみたいな感じ。
記事の内容はマークダウンで書く。
例の内容だと、URLはhttps://[ユーザ名].github.io/blog/Hello-World/になる。
その他テンプレ編集
HTMLテンプレートはindex.htmlや_layoutsのテンプレファイルを変更してやればいいし、CSSやJavaScriptは好みで追加していけばいい。
まとめ
これまで見てきたように、GitHub Pagesなら静的サイトも動的っぽいJekyllサイトも作成できる。
今回紹介できなかったが、GitHub Pagesは独自ドメインにも対応している。
GitHubのリポジトリ容量は1GBまで無料だし、簡単なサイト制作やスタートアップならこれで十分だと思う。