HEXOを使って爆速でブログを立ち上げた話

HEXOを使うに至ったわけ

  • ReactやRails 等を使って一から作成しようかと思ったけどぶっちゃけめんどくさい
  • 今更phpなんてやりたくないのでWordpressは却下
  • Markdownで記事を書きたい
  • 何しろ手っ取り早く立ち上げたい

HEXO とは

Markdown形式で書かれた記事を、静的WEbページとしてGenerateしてくれるフレームワークです。似たようなもので、JekyllやOctopress、Pelicanなどがありますが、HEXOは中国圏の人が作ったようなので、日本語周りでバグが起きづらそうな気がしたのでHEXOを使うことにしました。


目次


構築手順

GithubページにDeplooyしてる記事が多いですが、僕は、すでに他でAWSを使ってるので、S3にDeployし、Cloudfrontから配信することにしました。

前提条件

  • AWSの設定
    • AWSアカウントを持っていること
    • S3にバケットを作成済み
    • Cloudfrontの設定済み
    • ドメインの設定済み
      ※この辺の内容は下記の記事を参考にしてください。
      http://qiita.com/buta/items/06a7e147d865fb862783
  • localにnode環境が整っていること

HEXOのインストール

Globalに入れましょう。

$ npm install hexo-cli -g



プロジェクトフォルダに移動し、

$ hexo init myblog
$ cd myblog
$ npm install



これで必要なパッケージが入るので、localで立ち上げてみます。

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.



ブラウザでアクセス

http://localhost:4000


ブログの設定

_config.ymlファイルで、ブログの設定をする

# Site
title: ブログタイトル
subtitle: サブタイトル(これはどこに反映されるのかよくわからない)
description: ブログの説明
author: 名前
language: 言語(ja)defaultはen
timezone: Asia/Tokyo(ない場合はhexoコマンドを実行したコンピュータのタイムゾーンに従います)

url: ブログのURL
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:    
# permalinkは、記事を作成した時のpath。defaultだとこんな感じになる


タグとカテゴリを設定する

_config.ymlファイル を編集

# Category & Tag
default_category: デフォルトのカテゴリ名
category_map:
  diary: diary
tag_map:
  diary: diary
  web: web
  hexo: hexo

など

テーマを変えてみる

結構いろんなthemeがあります。

僕はapolloにしてみました。

$ git clone https://github.com/joyceim/hexo-theme-apollo.git themes/apollo



_config.yml

theme: apollo


必要なプラグインを入れる

RSS作成と、SEOのためSitemap作成用のプラグインを入れる

$ npm install hexo-generator-feed hexo-generator-sitemap --save

入れるだけで、両方作ってくれるようになります。

プラグイン一覧はこちら


Categoriesページと、Tagsページを作成してnavigationにリンクを追加する

$ hexo new page categories
$ hexo new page tags

※ theme以下にcategoriesページとtagsページのテンプレが存在するので、何かの設定で勝手に両ページをgenerateしてくれるものだと思っていましたが、僕が調べた限り作成されないので(きっと方法があると思う)、上記コマンドで2ページを作成して、markdownでページの内容を書きました。
どなたか知っていたら教えてください。


themes/apollo/_config.yml

menu:
  Home: /
  Categories: /categories
  Tags: /tags
  Archives: /archives
rss: /atom.xml

※ 見た目に関する設定はtheme以下の_config.ymlに設定する


ついでにGoogle analyticsを設定する

themes/apollo/_config.yml

google_analytics: ***********


favicon

favicon: /images/favicon.png

とし、下記にfaviconファイルを置く

themes/apollo/source/images/


記事を作成

$ hexo new 記事名(urlのpath名になる)

すると

/source/_posts/

以下に

記事名.md
記事名/

が作成される。
mdファイルがmarkdown方式の記事ファイルになり、dirのほうに、その記事に必要な素材等を置く


画像の表示

いろんな記事にいろんな記載がありますが、普通に上記dirに画像を置いて、

![alt](/yyyy/mm/dd/記事名/画像ファイル名 "alt")

とすると、きちんと表示されるので、問題ないです。


コメント機能追加

DISQUS」を使います。下記ページからアカウント作成し、自分のスペースを作成します。最終的にshort nameが発行されるので、それを_config.ymlに設定する

disqus_shortname: ここに設定

下記のページが参考になります。


記事やページの作成時のdefaultのテンプレートを編集

/scaffolds/post.md
/scaffolds/page.md

を下記みたいな感じにしておくと、作成されたときに記事が書きやすいかと思います。

title: {{ title }}
date: {{ date }}
category:
- カテゴリ名
tags:
- タグ名
---

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
s###### 見出し6

[Google先生](https://www.google.co.jp/)
![キャプチャです](/yyyy/mm/dd/記事タイトル/ファイル名 "キャプチャです")


- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
            - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3

> お世話になります。xxxです。
>> あの新機能バグってるっすね

    # Tab
    class Hoge
        def hoge
            print 'hoge'
        end
    end

normal *italic* normal
normal _italic_ normal

normal **bold** normal
normal __bold__ normal

normal ***bold*** normal
normal ___bold___ normal

***

___

---

*    *    *

~~取り消し線~~

S3 Cloudfrontへのdeploy設定

必要なパッケージを入れる

$ npm install --save hexo-deployer-s3 hexo-deployer-s3-cloudfront

hexo-deployer-s3 のみだと、cloudfrontを使用してる場合、cacheが更新されないので、即座に反映されませんので、hexo-deployer-s3-cloudfrontを使う

_config.ymlを編集

plugin:
  - hexo-deployer-s3-cloudfront

# deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: s3-cloudfront
  bucket: s3のバケット名
  aws_key: キー
  aws_secret: secretキー
  concurrency: 1
  region: リージョン
  cf_distribution: cloudfrontのid
  headers: {CacheControl: 'max-age=604800, public'}

GenerateしてDeploy

これで最低限の準備が整ったので、Generateして、Deployしてリリースしてみる

$ hexo g

$ hexo d

こんな感じで、プログができました。

あとは、Google webmaster toolに登録して、sitemapを送ったりすれば、OKかと思います。

目次に戻る