Octpressでbootstrap-themeにしたとき、sass/custom/_styles.scssが反映されなくなった件について

前回、Octpressのテーマをカスタマイズするという記事で、 Octpressにbootstrap-themeを導入しました。

If you want to add or override styles, edit sass/custom/_styles.scss. This stylesheet is imported last, so you can override styles with the cascade.

上の文はOctpressの公式からの引用で、本来であればsass/custom/_styles.scss に書いたSCSSが最終的にオーバーライドされて適用されるはずです。

しかし、このテーマを導入してから、sass/custom/_styles.scssに書いたSCSS(CSS)が反映されなくなってしまいました。

OctpressのCSS生成の仕組み

Octpressでは、sass以下のディレクトリにある.scssファイルを読み取り、 最終的なCSSを生成しているようです。(たぶん)

SCSSとは、CSSメタ言語のことで、要するにCSSを生成するための言語です。

本題のsass/custom/_styles.scssが反映されない原因は単純で、 sass/bootstrap/bootstrap.scssを見たら、sass/custom/_styles.scsがimportされていませんでした。

というわけで、sass/bootstrap/bootstrap.scssの最終行に次のような感じでimport文を追加することで解決します。

1
2
3
4
5
// Custom
@import "custom/colors";
@import "custom/fonts";
@import "custom/layout";
@import "custom/styles";

後は、sass/custom/_styles.scsに好きな設定を書けばOKです。ひとまず、こんな感じにしました。

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
// This File is imported last, and will override other styles in the cascade
// Add styles here to make changes without digging in too much

div.entry-content {
  h1, h2, h3, h4, h5, h6 {
      line-height: 2;
      margin-top: 30px;
      margin-bottom: 20px;
      padding-left: 10px;
  }
  h1 {
      font-size: 20px;
      background: #eee;
      border-left: 7px solid #777;
      margin-top: 50px;
  }
  h2 {
      font-size: 18px;
      border-left:7px solid #ccc;
      border-bottom:1px solid #ccc;
      margin-top: 40px;
  }
  h3 {
      font-size: 15px;
      border-left:7px solid #ccc;
  }
  h4 {
      line-height: 1.5;
      font-size: 14px;
      border-bottom:1px solid #ddd;
  }
  h5 {
      line-height: 1.5;
      font-size: 12px;
      border-bottom:1px dashed #ddd;
  }
  h6 {
      line-height: 1.5;
      font-size: 11px;
  }
}

まあ、せいぜいsubsubsectionくらいまでしか使いませんよね…

h1

h2

h3

h4

h5
h6

今回もOctpressに関する記事です。

先日、Octpressを使ってGithubPages上にブログを運営しましたが、 気が変わってレンタルしているVPS上で運営したくなりました。

Octpressではrake deployを叩くだけでRsyncを使い自分のサーバ上にコンテンツを同期するようにできます。

今回はその方法を紹介したいと思います。

Rsyncを使って同期するためには次の2つの作業をする必要があります。

(もしかすると、Rakefileの設定だけでよいのかもしれませんが、未検証です。)

  1. 公開鍵認証を使ってsshでログインできるようにする。
  2. サーバ側の~/.ssh/authorized_keysにローカル側の公開鍵を登録する。

1.は最初から行なっている人が多いかもしれませんね。

ここでは、作成済みのuserというユーザからserverというドメインのサーバに公開鍵でログインするようにする手順を紹介します。

環境はServersMan@VPS(OS:Ubuntu, HDD:10GB,RAM:256MB)です。

サーバ側の設定

まず、VPSに普通にパスワード認証でsshをして作業します。

公開鍵の生成

1
2
3
4
5
6
7
ssh root@server
login user
ssh-keygen -t rsa #公開鍵を生成 save the keyは空白でOK、パスフレーズは任意のものを指定する
cd ~/.ssh/
mv id_rsa.pub authorized_keys #公開鍵はauthorized_keysにリネーム
cat id_rsa #この内容は後でローカルに保存するので、テキストエディタなどに貼りつけておく
exit

sshの設定

vimなどで、サーバ側の/etc/ssh/sshd_configを編集します。 間違った設定をすると最悪sshでログインできなるので注意しましょうw

私の場合はこのような感じに一部を書き換えました。 この記事を書いている私ですが、サーバの設定は初心者なので、あまり信用しないようにしましょうw あくまで参考程度で。

1
2
3
4
AllowUsers user
RSAAuthentication yes 
PubkeyAuthentication yes 
AuthorizedKeysFile   %h/.ssh/authorized_keys

VPS上の設定が終わったら、sshdを再起動します。

1
/etc/init.d/ssh restart

ローカル側の設定

前にcat id_rsaで表示した内容を、ローカルの~/.ssh/foo.key(fooは任意)で保存します。 sshの-iオプションで秘密鍵を指定してログインらしいです。じつはよくわかってませんw

1
2
3
4
cd ~/.ssh
vim foo.key #サーバのid_rsaをコピペして保存
chmod 600 foo.key #これしないと「WARNING: UNPROTECTED PRIVATE KEY FILE!」と出てログインできない
ssh -i foo.key user@server #これでログインできれば成功

サーバ側の~/.ssh/authorized_keysにローカル側の公開鍵を登録する。

前の手順で、サーバにログインできたと思うので、 ついでにサーバ側の~/.ssh/authorized_keysにローカルの公開鍵を追加します。

Octpressの設定

ここまで来れば、あとはOctpressの設定だけです。Rakefileを編集します。

私の場合、GithubPages用にRakeFileを設定してしまったので、書き直します。

1
2
3
4
5
6
7
8
## -- Rsync Deploy config -- ##
# Be sure your public key is listed in your server's ~/.ssh/authorized_keys file
ssh_user       = "user@server"
ssh_port       = "1234" #普通は22ですが、セキュリティ上の理由で(
document_root  = "/var/www/html/" #htmlの公開用のディレクトリを指定。ServersMan@VPSならこの設定でいいはず。
rsync_delete   = true
#deploy_default = "push"
deploy_default = "rsync" #rsyncで同期します。

たぶんこれで設定は終わりです。

rake deployでファイルが同期できたら成功です。


参考記事 :Deploying With Rsync

Ocpressの標準のデザインは悪くはないのですが、個人的にはいまいち物足りなさを感じたので、テーマを変更しました。

テーマですが、このページなどから、 かっこいいのを見つけてくればいいと思います。

とりあえず私は、bootstrap-themeを入れてみることにしました。 導入はとても簡単です。

コード例を示すまでもないですが、Codeblockを試してみたいので、導入するまでのコードを貼り付けます。

(ちなみに、シェルのコマンドを貼り付けるときはlangをbashにすると良いみたいです。)

1
2
3
4
5
cd ~/git/octpress #octpressのディレクトリ
git clone https://github.com/bkutil/bootstrap-theme.git .themes/bootstrap-theme
rake install["bootstrap-theme"]
rake generate
rake deploy #公開

テーマを変えることで、一気にモダンな感じになりました!

話題のBootstrapだけあって、こんなショボイブログも見てくれだけはいい感じに見えるような気がします。

あとは、_config.ymlをちょっといじるだけで、facebookやGoogle+のボタンをつけたり、 Disqus Commentsでコメントをできるようにできるので、簡単にモダンなブログを作ることが出来ました。

Octpressすごい!

どうもこんにちは!

私は情報系の大学生をしている「がむ」というものです。

高校生までは、こっちのほうでブログを書いていたのですが、 更新が面倒になってしまい、放置して1年以上経ってしまいました…

技術ネタをどこかにアウトプットしたいというの欲求はあるので、旧ブログに書いても良かったのですが せっかくなので、少しギークっぽい方法でブログを作ってみたくなりました。

最近はRuby弄りに夢中なので、Rails製のCMSのOctpressというものがあると知り、試してみることにしました。

ターミナル上からブログの更新が完結するというのは新鮮ですし、Markdown形式で記事を書けるのも嬉しいです。

また、Rubyで書いてあるので実装を追いやすいですし、使っている人が少ないという未開拓な感じがいいですね。

Octpressを気に入ったら、このブログを私の技術的なメモとして活用していきたいなと思っています。