masato's web site
0%

HexoのアップデートとテーマをTumblrのApolloに変更する

Posted on
久しぶりにHexoのThemesページをみたら種類が増えていました。GhostやTumblrから移植したテーマもミニマルでいい感じです。CSSのfont-familyを見ると最初から日本語フォントが定義されているテーマもいくつかあり、日本でも使っている人が増えたようです。気分転換にテーマをTumblrのApolloに変更することにしました。

久しぶりにHexoのThemesページをみたら種類が増えていました。GhostやTumblrから移植したテーマもミニマルでいい感じです。CSSのfont-familyを見ると最初から日本語フォントが定義されているテーマもいくつかあり、日本でも使っている人が増えたようです。

気分転換にテーマをTumblrのApolloに変更することにしました。

Hexoのアップデート

npmでHexoをアップデートします。2.7.1から2.8.3にあがりました。

$ npm update hexo -g
$ cd workspace/blog
$ npm update

package.jsonも更新されています。

~/workspace/blog/package.json
{
  "name": "hexo-site",
  "version": "2.8.3",
  "private": true,
  "dependencies": {
    "hexo-renderer-ejs": "*",
    "hexo-renderer-stylus": "*",
    "hexo-renderer-marked": "*",
    "hexo-generator-sitemap": "^0.1.4",
    "hexo-generator-feed": "^0.1.2"
  }
}

2.8のYAMLパーサー変更点

YAML parser changedにあるように、値に半角スペースが入る場合はクォートが必要になりました。bitureテーマではlanguages/default.ymlを修正します。

~/workspace/blog/themes/biture/languages/default.yml
#archive_b: Archives: %s
archive_b: "Archives: %s"

ポストにもdescriptionの値に:があるとOGPタグの生成に失敗するようになったので修正が必要です。

テーマをApolloに変更

git cloneでテーマをインストールします。

$ cd ~/workspace/blog/
$ git clone https://github.com/joyceim/hexo-theme-apollo.git themes/apollo

themeをapolloに変更します。

~/workspace/blog/_config.yml
#theme: biture
theme: apollo

Nitrous.IOのローカルサーバーを起動して確認します。

$ hexo server
[info] Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

テーマの設定

テーマの_config.ymlを編集します。

~/workspace/blog/themes/apollo/_config.yml
# Header
menu:
  Home: /
  Archives: /archives
rss: /rss2.xml
# Content
excerpt_link: Read More
fancybox: true
# Miscellaneous
google_analytics: UA-xxx
favicon: /favicon.ico

フォントを源ノ角ゴシックに変更

sans-serifを源ノ角ゴシックに変更します。

CSSのプリプロセッサはStylを初めて使います。デフォルトでも日本語フォントが設定されていました。最近気に入っている源ノ角ゴシック(Noto Sans)に変更します。

~/workspace/blog/themes/apollo/source/css/_bass/variables.styl
@import url("//fonts.googleapis.com/css?family=Source+Code+Pro");
//@import url("//fonts.googleapis.com/css?family=Open+Sans:400,700");

// Fonts
//font-sans = 'Open Sans','Helvetica Neue','Helvetica','Arial','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif
font-sans = "Noto Sans", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino ```

`@font-face`を追加します。

``` styl ~/workspace/blog/themes/apollo/source/css/style.styl
@font-face
  font-family: "Noto Sans"
  src: url(fonts/NotoSansJP-DemiLight.otf) format("opentype")

bitureからフォントをコピーします。

$ cp biture/source/fonts/NotoSansJP-DemiLight.otf  apollo/source/css/fonts/

デプロイ

プレビューで確認したあとgithub.ioへデプロイします。

$ hexo clean && hexo deploy --generate