jsのライブラリや、ドキュメントのページを見ていると、
\nよく**~~~.github.com**というアドレスを目にします。
このアドレスは何なんだろう。
\nGithubに認められしものの証なのだろうか。と調べてみたところ、
\nGithubがホスティングしてくれるサービスGithub Pagesという物でした。
手軽に始められるし、Markdownが使えてテンプレートも使えるという代物だったので
\n使えるようにするまでの手順をまとめました。
今回の記事の目標は、
\n「Githubページを作成し、Markdownで更新する」ことです。
\nMarkdownについては、過去に書いた記事
\n\n\n
を御覧ください。では早速始めます。
\nこれだけです。
\nGithubへの登録は、あらかじめ済ませておいて下さい。
なお、今回使用しているgemのバージョンは1.8.24です。
\nGithubページは、リポジトリを作るだけで作成出来ます。
\nまず、こちらからリポジトリの作成画面へ行きます。
\nここで、Repository nameを、**USER_NAME.github.com_とします。
\nこの名前のリポジトリを作成すると、
\n自動的にhttp://USERNAME.github.com**にアクセスできるようになります。
USER_NAMEの部分は、自分のGithubのIDを入力して下さい。
\n例えば私の場合はIDがLekoなので、leko.github.comを名前にします。
\n大文字・小文字の区別はされないようです。
\nIDに大文字が混じっている人も小文字で作りましょう。
Repository nameを入力したら、適当な説明を入れて、pushします。
\nリポジトリを作成したら、index.htmlを作成して、完成！
\nと行きたいところですが、今回はテンプレートとMarkdownを利用することが目標なので
\nとりあえずindexは作らずに、先へ行きましょう。
テンプレート＋Markdownを利用するためには、jekyllというライブラリを使います。
\nターミナルを開いて、
\n$ cd ~\n$ gem install jekyllを実行します。インストール完了です。
\n次に、先ほど作ったUSER_NAME.github.comフォルダへ移動します。 特に何もしていなければ、リポジトリは空のはずですので、
\nUSER_NAME.github.com/\n - README.md\n - index.md\n - _config.yml\n - _layouts/\n - default.html上記の構成でファイルを追加します。
\nざっと説明すると、
\nREADME.mdは、Githubでこのリポジトリを誰かが見つけた時の説明文
\nindex.mdが、公開されるhtmlの元となるページ
\n_cofig.ymlが、jekyllを使うための設定ファイル
\n_layouts/はテンプレート用のフォルダ
\ndefault.htmlが、テンプレートファイルです。
このファイルをそれぞれ編集していきます。
\nconfig.ymlは上でも言いましたが、jekyllで使うための設定ファイルです。
\nこれを適当なエディタで開き、
auto: true\nserver: true\nmarkdown: kramdownと入力して保存します。
\n設定について詳しく知りたい方は、設定一覧を御覧ください。
次に、_layoutsの中のdefault.htmlを編集します。
\nこれがテンプレートとなるHTMLファイルで、headタグの中身などは全部こちらへ書きます。 default.htmlを適当なエディタで開き、
<!DOCTYPE html> \n<meta charset=\"UTF-8\">\n<title>Lekohub</title>\n<!-- cssとかjsもここで読み込み --> \n<link rel=\"stylesheet\" href=\"css/common.css\">\n<script src=\"js/top.js\"></script> \n<div class=\"container\"> {{ content }} </div>と入力して、保存します。
\nこのファイルがページの枠組みとなって、
\n{{ content }}の部分に、ページの中身が入ります。
ちなみに、色々とタグが省略されていますが、これでW3Cが認める正常なHTMLです。
\n詳しくは、過去に書いた記事
\n\n\n
を御覧ください。
\n最後に、index.mdを編集します。 ここ部分は、default.htmlで{{ content }}と書いた部分にあたります。
index.mdを適当なエディタで開き、Markdown形式で入力します。
\n---\nlayout: default\n---\n\n# leko.github.com\n\nとりあえず作ってみたGithubページ\n----------------------------------------\n\nほげほげと入力して、保存。
\nここで重要なのが、layout: defaultと上下の**—**です。
\nlayout: defaultと書くことで、先ほど書いたdefault.htmlが
\nテンプレートとして読み込まれます。
では実際にプレビューしてみましょう。
\n再びターミナルを開いて、
\n$ cd (USER_NAME.github.comリポジトリへのパス) \n$ jekyllと入力します。すると、
\nConfiguration from /Users/***/leko.github.com/_config.yml Auto-regenerating enabled: /Users/***/leko.github.com -> /Users/***/leko.github.com/_site [2013-02-26 22:38:59] regeneration: 7 files changed [2013-02-26 22:39:00] INFO WEBrick 1.3.1 [2013-02-26 22:39:00] INFO ruby 1.9.2 (2012-04-20) [x86_64-darwin11.4.2] [2013-02-26 22:39:00] INFO WEBrick::HTTPServer#start: pid=70965 port=4000というのが表示されると思うので、
\nブラウザを開き、**http://localhost:4000**にアクセスします。
と表示されていれば完了です。
\nMarkdownがきちんとHTMLに変換されているのがわかると思います。
今の状態で、**http://USER_NAME.github.com**にアクセスしても、
\nまだ何も表示されないと思います。
今まで行った変更は、Githubにプッシュすることで適用されます。
\nGithubにプッシュしたら、もう一度**http://USER_NAME.github.com**にアクセスしてみて下さい。
\n先ほど確認したページと同じように表示されていれば完了です。
たったこれだけの手順で、
\nテンプレート＋Markdownを使ったページ作成が出来ました。