24
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Hexoで始めるお手軽な静的ブログ -インストールと配備-

Last updated at Posted at 2015-10-06

#Hexoってなに?
hexoはmarkdownで書かれたファイルを静的なコンテンルだけで構成されるブログを構築するための静的WEbページ作成フレームワークです。類似のツールとしてはJekyllやOctopress、Pelicanなどがありますね。
まあ早い話がmarkdownで書かれたファイルをHTMLに変換してくれて、ブログに必要ないろいろなものを付加してくれるツールです。

#Hexoの何がいいの?
hexoに拘わらずこの手の静的ページ作成ツールにいえることですが、出力されるのが静的なコンテンツということですね。さすれば、Webサーバだけで事足りるので某Wordpressやその他のCMSのようにあれやこれやを構築して運用するというような手間が省けます。1
Hexo固有の利点というものはJykyllやOctopressなどと比較するとあまりない気がします。挙げるとするならばnode.jsで実装されているのでJavaScriptによる拡張が可能なところと中国語圏の方が作者なため日本語関連で面倒なことが置きづらいというところですかね。
この手のツールは必要な機能が少ないためどれもが同じ機能を実装してしまっている故にあまり比較できない気がします。
一説にはページ作成が速いとかあるそうですが本当に必要なのかはどうなんですかね??

#ブログの構築
##必要な環境

  • node.js
  • git
  • hexo 3.x

当方はこの環境をDebian 8 jessie上で構築しています。
gitの導入はsudo apt-get install gitでnodejsはnvmで導入しています。
なおnode.jsのバージョンはv0.12.5です。

##hexoの導入

npm install hexo-cli -g

を実行すれば完了です。簡単ですね。これによってhexoコマンドが使用可能になります。

##ブログの作成
任意の作業ディレクトリで

hexo init myblog

としてブログが格納されたディレクトリが作成されます。(ここでmyblogに相当するディレクトリ名はなんでもかまいません。)
次にそのディレクトリに移動し、

npm install

としてhexoが必要とするもろもろをインストールします。

##ブログの設定
この作業は後でも可能なため記事の作成に飛んでも大丈夫です。
このブログの設定ファイルはディレクトリ直下の_confing.ymlになります。次のように適宜編集するのが良いと思います。
###ブログそのものの情報

title: ブログのタイトル
subtitle: サブタイトル(なくても大丈夫)
description: ブログの説明
author: Hogehoge man
language: ja(ない場合は標準設定がenつまり英語になります)
timezone: Asia/Tokyo(ない場合はhexoコマンドを実行したコンピュータのタイムゾーンに従います)

###ブログのURL情報
ブログのURLがhttp://example.com/blogとなるときは次のように設定します。

url: http://example.com
root: /blog/
permalink: :year/:month/:day/:title/
permalink_defaults:

permalink(ブログ記事識別子)の詳細ははpermalinkリファレンスを参考にしてください。
デフォルトだと記事のファイルを日本語.mdにしたときにURL日本語が含まれます。
それを回避するには:titleを:idにするぐらいしかない様です。その場合URLがとても冗長になります。

##記事の作成
さてやっと記事を作成できるようになりました。記事の作成は次のコマンドを入力するだけです。

hexo new post-name

ここでの記事名は日本語でもかまいません。ただし、日本語にした場合Permalinkが上記の様になります。
このコマンドを実行した結果、記事の実体がsource/_posts/post-name.mdとして生成されます。

さて実際に記事を生成してましょう。次のコマンドです。

hexo generate

これでページができました。実際に運用するときもnewしてgenerateしてを繰り返すことになります。

さて実際に出力されたファイルを見てみましょう。次のコマンドで簡易的なサーバが起動しますのでどんなものができたかを見るには最適です。

hexo server

##ブログの配備
Hecoは様々な配備方法に対応しているのですが、ここでは次の方法にそれぞれ対応してみます。

  • GitHub Pagesへの配備
  • 実際のサーバへの配備

ほかの方法はdeploymentを参照願います。
なお各方法で利用するプラグインは各ブログごとにインストールが必要です。

###GitHub Pagesへの配備
ここではGitHub Pagesに対してすでにレポジトリがある前提とします。
まず次のコマンドを入力してGitHub Pagesへの出力を可能にするプラグインをインストールします。

npm install hexo-deployer-git --save

次に_config.ymlのDeployについて次のように設定します。

deploy:
  type: git
  repo: <repository url>
  message: [message]

ブログを実際に配備するには次のコマンドを実行します。

hexo deploy

###実際サーバへの配備
この場合大きく分けて二つの方法があります。
1つはrsyncを利用する方法。これはdeployコマンド経由で配備することができます。
もう一つは実際にファイルをscpなどでコピーする方法です。
####rsyncを用いた場合
配備先ホストでrsyncを受け入れる設定になっていることを前提とします。
まず次のコマンドを入力しdeployコマンドでrsyncを利用することを可能にするプラグインをインストールします。

npm install hexo-deployer-rsync --save

次に_config.ymlのDeployについて次のように設定します。

deploy:
  type: rsync
  host: example.com
  user: testuser
  root: /opt/hogehoge/
  port: ポート番号(デフォルトでは22)

ブログを実際に配備するには次のコマンドを実行します。

hexo deploy

####ファイルをコピーする方法
hexo generateにて生成されたファイルはそのディレクトリのpublicディレクトリですので、それをscpなりなんなりでコピーすれば配備が可能です。

とりあえずインストールするのは以上のようになります。
なおこのままではRSSやコメント機能などはありません。
次の記事で設定する予定です。

  1. 書いたらほったらかしにできるというのが最も大きいです。アプリケーション固有のセキュリティパッチとかは基本的に考えなくていいし、いざWebサーバを移転するというときもファイルをコピーするだけで事足りるわけです。

24
27
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
24
27

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?