octopress でブログを書いてみる

html で今までゴリゴリ書いてきたけど、疲れたので markdown な文法を使いたいなぁ
ってのと、ブログをもう少し手軽に書けて、自由度が欲しい(ブラウザから離れてみたい)なぁって思って octopress を使ってみることにした。

最初にやったこと

  • kui theme を導入
  • tag cloud を導入
  • それぞれについて、html, css を少し編集

kui を導入

footer にも出しているけど、デフォルトのテーマが少し気に入らないので
Octopress Theme for k-ui.jp を入れてみる

少し変更したコードは後述

tag cloud を導入

categories が使えるけど、表示される トコがなかったので、導入

http://tokkonopapa.github.com/blog/2012/01/04/octopress-plugin-for-categories-cloud/ このまま

後述部分

まず、kuiのcssを変更した。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# sass/_kui.scss
--- .themes/kui/sass/_kui.scss   2012-03-24 21:40:27.000000000 +0900
+++ sass/_kui.scss  2012-03-24 23:17:26.000000000 +0900
@@ -9,7 +9,7 @@
   padding: 0px;
 }

-h2, h3, h4, h5, h6{
+h1, h2, h3, h4, h5, h6{
   font-family: "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;
 }

@@ -125,6 +125,7 @@
     margin: 0px;
     padding: 8px;
     font-size: 80%;
+    clear: both;
     p {
  margin: 0px;
     }
@@ -139,3 +140,39 @@
 #dsq-reply > h3, #dsq-account-dropdown, #dsq-subscribe { display: none; }
 #disqus_thread #dsq-content #dsq-global-toolbar { margin: 0.3em 0px; }
 #dsq-reply{ margin: 0.3em}
+
+/* custom */
+header[role="banner"] a:hover {
+  text-decoration: none;
+}
+.pagination {
+  display: block;
+  clear: both;
+  margin-top: 40px;
+}
+
+.sidebar {
+  display: block;
+  clear: both;
+  margin-top: 40px;
+  border-top: 1px solid #ddd;
+}
+.sidebar section {
+  float: left;
+  width: 380px;
+  margin-left: 20px;
+}
+.sidebar section:nth-child(2n+1) {
+  clear: left;
+}
+
+.tag-cloud a {
+  font-size: 80%;
+  line-height: 2em;
+}
+
+.avator {
+  width: 128px;
+  height: 128px;
+  padding: 8px 0 0 9px;
+}

h1もh2,h3と同じスタイルを適用するように
.pagination, .sidebar を実装して、.sidebarは2カラムで表示するように変更
.tag-cloud は tag-cloudプラグインで書かれていたものをそのまま、
.avator は custom/acide/about.html の変更にて(この後に出てくる)

source/_includes/social_service_links.html の変更

これは本家のままだと、上部に出てくるgithub,twitterがkuiのままになってしまうので、下記のように変更

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# source/_includes/social_service_links.html
--- .themes/kui/source/_includes/social_service_links.html   2012-03-24 21:40:27.000000000 +0900
+++ source/_includes/social_service_links.html   2012-03-24 22:16:02.000000000 +0900
@@ -1,17 +1,18 @@

 <div id="social-links">
   <ul>
+    {% if site.github_user %}
     <li id="social-links-github">
-      <a title="GitHub" href="https://github.com/kui">github</a>
+      <a title="GitHub" href="https://github.com/{{site.github_user}}">GitHub</a>
     </li>
+    {% endif %}
+    {% if site.twitter_user %}
     <li id="social-links-twitter">
-      <a title="twitter" href="http://twitter.com/k_ui">twitter</a>
-    </li>
-    <li id="social-links-tumblr">
-      <a title="tumblr" href="http://daftbeats.tumblr.com/">tumblr</a>
+      <a title="twitter" href="http://twitter.com/{{site.twitter_user}}">twitter</a>
     </li>
+    {% endif %}
     <li id="social-links-feed">
-      <a title="feed" href="http://k-ui.jp/atom.xml">feed</a>
+      <a title="feed" href="http://nowelium.github.com/atom.xml">feed</a>
     </li>
   </ul>
 </div>

基本はそのまま、ただ、if site.github からuserを拾うようにてみたりしてみた。

source/index.html を変更

kuiのデフォルトはかなりシンプルで、トップページに記事のリンクへのリンクだけになっているので
もう少し記事を全面に出せるように、classicの部分をmerge

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

# source/index.html
--- .themes/kui/source/index.html    2012-03-24 21:46:01.000000000 +0900
+++ source/index.html    2012-03-24 22:21:55.000000000 +0900
@@ -4,27 +4,30 @@
 ---
 <div id="top">

-  <div id="recent_posts">
-    <h2>最近のブログ投稿</h2>
-
-    <ul>
-    {% for post in paginator.posts %}
-      <li>
-        <article>
-          <a rel="full-article" href="{{ post.url }}">{{ post.title }}</a>
-          （<time datetime="{{post.date}}" pubdate>{{post.date_formatted}}</time>）
-        </article>
-      </li>
-    {% endfor %}
-    </ul>
-
-    <p><a href="/blog/archives">&laquo; 過去の記事</a></p>
-
+  {% assign index = true %}
+  {% for post in paginator.posts %}
+  {% assign content = post.content %}
+    <article class="hentry" role="article">
+      {% include article.html %}
+    </article>
+  {% endfor %}
+
+  <div class="pagination">
+    {% if paginator.next_page %}
+      <a class="prev" href="{{paginator.next_page}}">&larr; Older</a>
+    {% endif %}
+    <a href="/blog/archives">Archives</a>
+    {% if paginator.previous_page %}
+    <a class="next" href="{{paginator.previous_page}}">Newer &rarr;</a>
+    {% endif %}
   </div>

-
-  <!-- include asides.html -->
-  {% include asides.html %}
-  <!-- /include asides.html -->
+  <div class="sidebar">
+    {% if site.blog_index_asides.size %}
+      {% include_array blog_index_asides %}
+    {% else %}
+      {% include_array default_asides %}
+    {% endif %}
+  </div>

 </div>

source/_includes/article.html

デフォルトのままだと、permalinkを出すことができないので、”ReadMore” 的なものをそのままpermalinkへ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

--- .themes/classic/source/_includes/article.html   2012-03-24 22:01:56.000000000 +0900
+++ source/_includes/article.html    2012-03-24 22:11:02.000000000 +0900
@@ -1,7 +1,7 @@
 {% unless page.no_header %}
   <header>
     {% if index %}
-      <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
+      <h1 class="entry-title">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</h1>
     {% else %}
       <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
     {% endif %}
@@ -18,11 +18,9 @@
 {% if index %}
   <div class="entry-content">{{ content | excerpt }}</div>
   {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %}
-  {% if excerpted == 'true' %}
-    <footer>
-      <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
-    </footer>
-  {% endif %}
+  <footer style="text-align: right">
+    <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
+  </footer>
 {% else %}
 <div class="entry-content">{{ content }}</div>
 {% endif %}

source/_includes/custom/asides/about.html を変更

gravator から画像を持ってくるようにした。
ここは、本来ならhashを計算してplugin化できるといいのかも。(その内やってみたい)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

--- .themes/classic/source/_includes/custom/asides/about.html   2012-03-24 19:17:32.000000000 +0900
+++ source/_includes/custom/asides/about.html    2012-03-24 23:19:29.000000000 +0900
@@ -1,4 +1,9 @@
 <section>
   <h1>About Me</h1>
-  <p>A little something about me.</p>
+  <div class="avator">
+    <a href="http://about.me/nowelium">
+      <img src="http://www.gravatar.com/avatar/b6b88d1ee75665cf5a7553410e979a11.png?s=140" height="64" width="64" />
+      <p>Yusuke Hata</p>
+    </a>
+  </div>
 </section>
yusuke@yusu

その他

source/_includes/asides/*.html を少し変更したりしたかも。
ログを残しつつやってたつもりが、試行錯誤のまま差分が行方不明になってしまったので、思い出したら書いていこうと思う。 そんな感じ