2015.10.02
- 人×技術
4009の裏っかわ
はじめまして。
普段はフロントエンドを担当しているR&Dで一番若いshinyaです。
4009サイトがオープンしてはや、2ヶ月。先日SPA化して個人的には一段落した感じです。
このサイトの制作をやらせていただいたので、今回はこのサイトの裏っかわで使っているものの紹介です。
jekyll
github pagesでも使われているので、その界隈では有名なruby製の静的blogサイトジェネレータ。
今回は後述するgulpで吐き出したファイルからblog仕様に生成する際に利用。
めんどうくさい管理画面もなくauthorがmarkdownで記事を作成しbuildすればすぐに完成。
なにはともあれ、動かす。
準備
gem install jekyll octopress redcarpet
で必要なやつを、全部install。
octopress
redcarpet
install完了したら
jekyll new #{project_name}
で準備完了。
超簡単
構築、制作
上まで完了するとこんな、構成ができている。
.gitignore
_config.yml
_includes/
_layouts/
_posts/
_sass/
about.md
css/
feed.xml
index.html
を
jekyll build
すれば、とりあえず、形になる。
あとは、目指すものに向けごにょごにょやれば、blogができてしまう。
超簡単、お手軽。
実際に記事やサイトの改修をするさいは
jekyll server
これで、サーバーが立ち上がりかつ、ファイルが更新されれば _config.yml
の destination
にjekyllが構築したファイルがdeployされます。
超簡単、お手軽、らくちん。
カスタマイズ
今回の現制作段階で導入しているのは paginate
だけなので一旦それの導入方法をご紹介。
# File: _config.yml
paginate: 5
paginate_path: '/page:num'
みたいに書いとけば paginator
に色々はいってるので for
やら if
やら使って好きなようにできる。
超簡単、お手軽、らくちん、便利。
blog機能として思いつくもので、アーカイブとか、検索とかありますが _plugins/
に放り込めば、簡単に機能追加できる模様(未だ試してない)。
当サイトも、今後フィルター機能などを盛り込んでいく予定。
gulp
nodejs製のビルドシステム。
弊社では、普段の制作から使用させていただいております。感謝感謝
このタイプの子が使えない環境では、もう制作できないといっても過言じゃございません。
詳しくは、http://gulpjs.com/
構成、構築、リリース
_app/ #gulp環境
├──__src__/ #公開されるファイルの一式を格納
├── css/
├── img/
├── jade/
└── js/
├──bower_components/
├──gulp/
├──node_modules/
├──bower.json
├──gulpfile.js
├──package.json
└──.bowerrc
_drafts/
_includes/
_layouts/
_plugins/
_posts/
_site/ #jekyllのdeploy先
assets/ #サイト構築用の素材
post_assets/ #記事用の素材を格納
_config.yml
favicon.ico
feed.xml
index.html
sitemap.xml
ファイル構成はこんな感じ
htmlはjade、cssはsass、jsはes6で制作。
サイト制作の際、 __src__
以下に記事以外の公開される全ファイルを格納し、基本的には、そこのみで作業。
そこから、gulpで変換して_appの外に吐き出し。
終わったタイミングで自動でnodeから上述の jekyll build
コマンドを叩いてサイトを再構築しながらサイト制作。
var spawn = require('child_process').spawn;
//- イベント登録
stream.on('end', function(){
var jekyll = spawn('jekyll', ['build', '-s', '{buildする場所}', '--destination', '{deploy先}']);
jekyll.on('exit', function (code) {
//- ビルド完了
});
}.bind(this))
//- ※streamはgulpのstream.
で、改修終えたらgit pushしてstg環境でjekyll buildが走ってrsync。
所感
本当は各自ブランチ切ってstg?でマージしてみたいな流れにしないと、記事のリリースの管理だったり機能追加のpreviewとかが、むつかしい。。みたいな問題があるんだなぁと、なんとなく思った。まあうまく説明できない
jekyllは便利だけど、弊社の通常業務に落とすケースはあんまりないなと思います。
使用できなくもないけど、まあいらない位の温度感。
次回は4009の表っかわの背景でごにょごにょしてるのとか、SPA化の祭に使用したものを紹介をしまっす。