2018-06-25

Hexo + Netlify でBlogを作る

静的ページジェネレーター、Hexoと、無料ホスティングサイトのNetlifyでサイトを構築します。

目次#

はじめに
Hexoのインストールと初期化
git リポジトリのセットアップ
- 初期化
- リモートリポジトリの設定
Hexoの基本設定
- 設定ファイルの編集
記事の作成
デプロイ
Netlify側の設定
まとめ

はじめに#

NetlifyとHexoの組み合わせですが、GitHubやbitbucketと連携させることができ、
デプロイ手順を簡略化できるというメリットがあります。

このブログではbitbucket経由でgitリポジトリへのpushすることで記事のデプロイを実現しています。

基本的な手順はNetlifyの公式ページをベースにしています。

A Step-by-Step Guide: Hexo on Netlify | Netlify

Netlifyにデプロイするのは生成されたHTMLではなく、Markdown形式のデータになります。

作業の流れは以下のとおりです。

Node.jsのインストール
Hexoのインストール
Hexoの設定
gitリポジトリの設定
記事の作成
Netlifyとリモートリポジトリの連携
各種設定

Hexoのインストールと初期化#

HexoをインストールするにはNode.jsおよびnpmコマンドが必要です。

macOS上ではHomebrewを使う方法が簡単です。

Windows環境の場合はNode.jsの公式ページからダウンロードできます。

Node.jsのインストール#

Homebrew でnode.jsをインストールします。

$ brew install node

npmコマンドが一緒にインストールされる。

バージョン確認。

$ node --version
v10.3.0
[atuyosi@mba-mid2012-4 ~] $ npm --version
6.1.0

Hexoのインストール#

Hexoのインストール。-gを指定することで/usr/local/binにhexoコマンドがインストールされます。

$ sudo npm install hexo-cli -g

コンテンツを置くディレクトリの初期化#

<dir-naame>は任意のディレクトリ名。

$ hexo init <dir-name>

引数に指定したディレクトリに移動。

$ cd <dir-name>

以下のコマンドでモジュールのインストール。

$ npm install

以下、バージョン情報。

$ hexo --version
hexo: 3.7.1
hexo-cli: 1.1.0
os: Darwin 17.5.0 darwin x64
http_parser: 2.8.0
node: 10.3.0
v8: 6.6.346.32-node.9
uv: 1.20.3
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.29.0
napi: 3
openssl: 1.1.0h
icu: 61.1
unicode: 10.0
cldr: 33.0
tz: 2018c

動作チェック#

Hexoのサーバーを起動してみます。

$ hexo server --draft

http://localhost:4000/にアクセスして、テスト用のページが表示されればOKです。

git リポジトリのセットアップ#

初期化#

Bitbucket経由でデプロイするのでgitリポジトリを初期化しておく。

$ git init

gitの管理対象から外すファイルを.gitignoreに書き込みます。

$ echo "/public" >> .gitignore
$ echo "/node_modules" >> .gitignore

publicディレクトリは生成されたHTMLファイルの格納先ですが、Netlify側でhexo gコマンド（後述）を実行してHTMLファイルを生成するためgitの管理対象から除外します。

node_modulesディレクトリについてもNetlify側で必要なモジュールがセットアップされるためgitの管理対象から除外です。

$ git add -a

この時点でコミットしておきます。

$ git commit -m 'First commit'

リモートリポジトリの設定#

bitbucketまたはgithubでリポジトリを作成しておきます。

$ git remote add origin Git_Repository_URL

Git_Repository_URLを自分のgit リポジトリのURLに変更。

bitbucketの例を示しておきます。

$ git remote add origin git@bitbucket.org:ユーザー名/リポジトリ名

設定の確認は

$ git remote -v

あとは記事を作成後、リモートリポジトリにgit push -U、Netlify側で関連付けるリポジトリを選択してせってすれば完了。

Hexoの基本設定#

各種プラグインのインストールと設定。

設定ファイルの編集#

設定ファイルを修正する。

$ vim _config.yml

設定ファイル_config.ymlを編集し、基本的な項目を設定します。

_config.yml

# Site
title: ブログのタイトル
subtitle: サブタイトル
description: metaタグ用の詳細説明
keywords: キーワード（カンマ区切りで列挙）
author: 任意
language: ja
timezone: Asia/Tokyo

項目名のとおりですが、一応説明。

title: ブログのタイトル
subtitle: ブログのサブタイトル
description: 説明
keywords: カンマ区切りでキーワードを列挙。SEO対策。
author: 著者名
language: アルファベット2文字で言語を設定（ISO 639-1形式）（デフォルトは”en”）
timezone: タイムゾーンを指定

description および keywords はSEO甩です。

記事の作成#

本来の基本的な流れは

hexo new draft “記事タイトル”
hexo publish
hexo server –draft
hexo generate
hexo deploy

となります。この記事のようにサーバー側でページを生成する場合は手順2のpublish、手順4のgenerateは不要です。

hexo publishではなく、git mvまたは単にmvコマンドでファイルをsource/_postにファイルを配置してgit commit、git push。

サーバー側でリポジトリの更新をチェックしてhexo generateコマンドが実行され、
HTMLページが生成される形になります。

なお、各コマンドには省略形が用意されています。例えば、hexo serverに対してhexo sなど。それぞれのサブコマンドの最初の一文字です。

デプロイ#

前述のとおり、hexo deployは使用しません。

$ git push origin master

または

$ git push -U

2回目からはgit push。

Netlify側の設定#

まずNetlifyにログインし、新規サイトの作成画面へ。

連携するサービスを選ぶ画面で使用しているサービスを選択するとリポジトリ選択画面に切り替わるのでブログ記事をpushしたリポジトリを指定します。

基本的に画面の指示に従えば問題ないはず。

Netlify側の作業は公式サイトを参照。