作業メモ

10 November 2013

再びなんとなくJekyllとかgithub pagesをいじりたい。

仕組みができてからならmarkdownで十分だけど、序盤はテンプレートをいじれるようにさくっとhtml書ける環境が欲しい。

さいきんwindows上でhtml書くときはadobe bracketsを使うのがマイブームで、emmet(aka zen-coding)のプラグインもあったりするんだけど、 bracketsのlinux版はubuntuしか対応してないらしく、fedoraでは茨の道っぽい。

emmetが使いたいならvimプラグイン使えばいいんじゃないか、とふと気づく。

emmet-vim

github上のリポジトリを見つけたので、readmeどおりに入れてみる。

$ cd ~/download
$ wget -O emmet-vim.zip http://www.vim.org/scripts/download_script.php?src_id=20637
$ cd ~/.vim
$ unzip ~/download/emmet-vim.zip

以上。

ためしにviで適当にファイルを作って、html:5って入力してからctrl+yとカンマを入力。展開される。便利。

なんとなくjekyll-bootstrapを使ったサイトを作ってはいるけど、しっくりこないのでJekyllを一から勉強する。Jekyllはインストール済みな前提。

とりあえずなんかディレクトリ作ってそこで仕事する。

$ mkdir ~/memo
$ cd ~/memo

マークダウン作る。

vi memo.md

内容は以下。

title
=====

hello.

Jekyll動かす。

$ jekyll build

_siteっていうディレクトリが作られて、その中にサイトの構成が出来上がる。今回はmemo.mdがコピられるだけ。

markdownをhtmlに変換するにはテンプレートを用意する。

$ mkdir _layouts
$ vi _layout/smemo.html

内容は以下。ここでemmetが威力を発揮。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    
</body>
</html>

作ったテンプレートを使うように、memo.mdも変更を加える。

---
layout: memo
---

title
=====

hello.

Jekyll動かす。

$ jekyll build

ディレクトリ_siteにはmemo.htmlが作成される。基本はこんな感じかな。