Github pagesでホスティングされた静的Webページを、Jekyllを使ってMarkdownで書いてみました。 ページを作成して、Githubにレポジトリを作成して、独自ドメインを割り当てるまでのまとめ。
ローカルにWebページを作成する
まずは、ローカルにWebページを作成します。
Gem をインストール
bunlderを使います。bundlerがインストールされていない場合は、入れましょう。
何はともあれGitレポジトリを作成
$ mkdir github.io $ cd github.io $ git init $ mkdir -p vendor/bundle/ $ touch vendor/bundle/.gitkeep $ git add vendor/bundle/.gitkeep $ cat <<EOS > .gitignore /vendor/bundle /.bundle /_site EOS
てきとーなプロジェクトディレクトリを作って、git init
します。
$ cat <<EOS > Gemfile source 'https://rubygems.org' gem 'jekyll' EOS $ bundle install --path=vendor/bundle
_config.yml を書く
jekyll の設定ファイルっぽいです。書いておきましょう。
file: _config.yml
auto: true server: true markdown: kramdown exclude: - vendor - Gemfile - Gemfile.lock - .bundle
exclude:
でjekyllに処理させないファイルを指定します。
layoutを書く
レイアウトです。これの{{ content }}
の中に、変換されたMarkdownが埋め込まれます。
file: _layouts/default.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>{{ page.title }}</title> </head> <body> <h1>{{ page.title }}</h1> {{ content }} </body> </html>
Markdown を書く
メインの部分です。コンテンツをMarkdownでてきとーに書いていきます。 また、Markdownのヘッダにはyamlで情報を埋め込む必要があるようです。
file: index.md
--- layout: default title: PAGE TITLE HOGEHOGE --- - hoge - fuga - piyo
jekyll serverを起動してみる
$ bundle exec jekyll serve -w
これでjekyllサーバーが起動します。
ブラウザからhttp://localhost:4000
に接続すると、作成したページが確認できます。
これで、てきとーに確認しながらMarkdownをがりがり書いていきます。
Github にレポジトリを作成する
作ったWebページを公開します。
レポジトリ作成
<USERNAME>.github.io
という名前でレポジトリを作成します。
私のユーザー名はpocke
なので、pocke.github.io
で作成しました。
Push
作ったものをpushします。
まつ
待ちます。10分ぐらいかかるそうです。
アクセスしてみる
http://<USERNAME>.github.io
にアクセスして、ローカルと同じものが表示されれば成功です。
わーい
独自ドメインをつける
レポジトリに、CNAME
という名前のファイルを作成して割り当てたいドメイン名を記述します。
$ echo 'yourdomain.example.com' > CNAME
ついでに、CNAME
も_config.yml
のexclude
に追記しておきましょう。
DNSの情報を書き換えます。
トップレベルドメイン
Aレコードに204.232.175.78
サブドメイン
CNAMEレコードに<USERNAME>.github.io
まつ
ドメインが反映されるのを待ちます。
こんな感じで、github-pages で静的サイトを公開出来ました。わーい。
なーんもやってないから、ほんと素のMarkdownのままですが…(白目