DEVELOPMENT
目次
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でページの内容を書きました。 どなたか知っていたら教えてください。
Navigationにリンク追加する
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に画像を置いて、
とすると、きちんと表示されるので、問題ないです。
コメント機能追加
「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
###### 見出し6
[Google先生](https://www.google.co.jp/)
- リスト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-cloudfronthexo-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かと思います。
株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス２軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから