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

目次

HEXOを使うに至ったわけ

HEXO とは

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



構築手順

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

前提条件

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があります。 * HEXO Theme 一覧 * Githubページ

僕は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

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

プラグイン一覧はこちら * https://hexo.io/plugins/


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: ここに設定

下記のページが参考になります。 * http://wassan128.github.io/blog/2015/09/11/


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

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

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

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

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し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
```python
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かと思います。

目次に戻る

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus