pockestrap

Programmer's memo

Github pages + jekyll を使って、Markdownで静的Webページを書いた


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.ymlexcludeに追記しておきましょう。

DNSの情報を書き換えます。

トップレベルドメイン

Aレコードに204.232.175.78

サブドメイン

CNAMEレコードに<USERNAME>.github.io

まつ

ドメインが反映されるのを待ちます。


こんな感じで、github-pages で静的サイトを公開出来ました。わーい。

なーんもやってないから、ほんと素のMarkdownのままですが…(白目

参考