LoginSignup
6
7

More than 5 years have passed since last update.

octpressでmaterial design風味のblogをつくる

Last updated at Posted at 2014-10-06

どうやるか

を使う

前提

  • git
  • Node
  • npm
  • ruby

※最低限のバージョンは調べてない。動かなかったら最新入れてください。

準備

hubがなければ入れる

なくてもいいです。

% gem install hub

bowerがなければ入れる

% npm install -g bower

やりかた

octopressを入れる

% mkdir my_octopress
% hub clone imathis/octopress my_octopress
% cd my_octopress
% bundle

octostrap3を入れる

% hub clone kAworu/octostrap3 .themes/octostrap3
% rake 'install[octostrap3]'
% rake generate

bootstrap-material-designを入れる

% echo '{"directory": "source/assets"}' > .bowerrc
% bower i bootstrap-material-design

htmlの調整

source/_includes/custom/head.heml
+ <link href="{{ root_url }}/assets/bootstrap-material-design/dist/css/material.min.css" rel="stylesheet" type="text/css">

navbar-defaultがあるとタイトルとか見えないので、外す

source/_includes/custom/navigation.html
- <nav class="navbar navbar-default" role="navigation">
+ <nav class="navbar" role="navigation">

確認

% rake new_post['test']
% echo '#hoge\n<!-- more -->\nfuga' >> source/_post/yyyy-mm-dd-test.markdown # 操作日で
% rake preview

http://localhost:4000で確認

screenshot-octopress.png

「READ ON」のボタンがそれっぽくなるだけなんですけどね... :stuck_out_tongue:

6
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
7