[techaday:0013] Hexoで気軽に静的ブログ作成 (2)設定とページの生成

[techaday:0013] Hexoで気軽に静的ブログ作成 (2)設定とページの生成

1日1技シリーズWeb
Hexo, techaday, ブログ, 静的ウェブサイト

はじめに

前回の記事では，Hexo の特徴と導入方法について説明しました．

今回は，初期設定とページの生成方法について書いていきます．

前提知識

  • シェルが使える
  • Hexo がインストール済みである

効能

  • Hexo で書き始めるための準備が整う

_config.yml

Hexo では，_config.yml というファイルにサイトの設定を記述します．

サイトに関する項目の設定

デフォルトでは以下のような感じになっていると思います．

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

...

主に弄る必要があるのは先頭部分のこの辺の設定だと思います． ウェブサイトのタイトルや説明，言語やタイムゾーン，サイトのURLなどを設定します． ちなみにタイムゾーンですが，

timezone: Asia/Tokyo

のように設定します．言語については，日本語テンプレートはなかったはずなので，とりあえず en にしておくと良いと思います． テーマによっては日本語の言語ファイルが提供されている場合があるので，ここを ja にすることでうまいこといく可能性もあります． ない場合はオープンソースの精神で翻訳してプルリクエストを送ると喜ばれます．

デプロイ先の設定

hexo init をして npm install をした段階で，デフォルトでデプロイ用のプラグインがいくつかインストールされます． 公式ウェブサイトの解説にしたがって，デプロイ先の設定を行います．

例えば rsync を使ってデプロイする場合は，

deploy:
  type: rsync
  host: <IP Address>
  user: <user name>
  root: /var/www/html/hogehoge/
  port: <Port>

のようにします(FTPsync以外はパスワードをファイルにベタ書きできません．公開鍵の設定が必須になっています)． Git や Heroku 用のプラグインもあるので， GitHub Pages や Heroku にデプロイするのも楽々です．

ここまでで，ウェブサイトの情報の基本設定と，デプロイ先の設定が完了しました．

記事の執筆とテンプレート

ここまでいけば，あとは書いて生成してデプロイするだけでウェブサイトが出来上がります．

まずは下書きを作りましょう．

$ hexo new draft 初めてのブログ記事

とすると，source/_drafts ディレクトリ内に 初めてのブログ記事.md が出来上がります． テキストエディタで開いてみいましょう．

title: 初めてのブログ記事
tags:
---

このようにデフォルトでは非常にミニマルなテンプレートが設定されています． この中身は scaffolds ディレクトリ内にある draft.md を編集することで変えることができます． 例えば

date: {{ date }}

を追加すると，ページを作成した時刻を貼り付けてくれます． 記法はほとんど GitHub Flavored Markdown に則っています．Jekyll 風のタグ機能もあり，プラグイン等を使って様々に拡張することができます．

そういうわけで，ネタが決まったらもりもり書いていきましょう． このとき，

$ hexo server --draft

を実行しておくと，localhost:4000 (デフォルト)にブラウザでアクセスしてプレビューを見ることができます．

生成

生成する前に，下書きをパブリッシュする処理を行う必要があります．

$ hexo publish 初めてのブログ記事

こうすることで，先ほどまで source/_drafts にあったファイルが source/_posts に移動されます． ちなみに，下書きせずに書いてすぐに生成・デプロイしたい場合は以下のようにもできます．

$ hexo new post 初めてのブログ記事

さて，これでステージに乗っかったので，続いてはウェブサイトの生成です．

$ hexo generate

実行して少し待つと public ディレクトリが出現し，中に html が生成されます．

デプロイ

デプロイもコマンド一発です．

$ hexo deploy

生成とデプロイをまとめて1コマンドで行うこともできます．

$ hexo generate -d

どうでしょうか？生成とデプロイはできたでしょうか？

まとめ

  • Hexo を使ってブログ記事を書く一連の流れを説明した

補足

  • source/_posts や source/_drafts は打つのが面倒なので，p や d という名前でシンボリックリンクを張っておくと便利です．
  • hexo コマンドにはほかにもいろいろな機能があります．ヘルプを見てみると楽しいかもしれません．
  • プラグインの便利な使い方等はまた後日書きます．
Share Comments