静的サイトジェネレーター Hexo でブログを作ってみた

#はじめに
当記事は、ブログを構築してから数週間後に執筆しています。
ところどころ抜けがあったり、後々追記することがあったりするかもしれません。
ご了承ください。

#Hexoってなに？
Hexoとは、node.jsで動く静的サイトジェネレーターです。
記事データとテーマファイル（CSSとかのかたまり）とかを用意して実行させると、静的サイトを出力してくれます。

出力されるのは静的サイトなので、GitHubPagesなどで簡単に公開することができます。

実際に構築してみる

当記事の前提条件

• Ubuntu 20.04 LTS (Windows Subsystem for Linux)
• Gitやnodeなどセットアップ済み

上記環境で解説していきます。

今回は、GitHubPagesでの公開ではなく、Netlifyでデプロイ＆公開する方法で説明します。

導入

ブログを置くディレクトリに移動して以下を入力。

$ npm install -g hexo-cli 
$ hexo init ブログ名 

１行目でHexoをインストール。
２行目のコマンドでHexoの「雛形」を生成します。

これで導入は終わりです。

雛形を自分用に書き換え

雛形の生成が終わったら_config.ymlというファイルを開きます。

_config.yml

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: ねころぐ
subtitle: '猫月あゆむの過去ログ倉庫'
description: '猫月あゆむのブログです。'
keywords:
author: 猫月あゆむ
language: ja
timezone: 'Japan'

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://blog.nekozuki.me
root: /
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

こんな感じで書き換えます。
説明分読みながらいろいろ書き換えていってください。

とりあえず１つ記事を書いてみる

書き換えが終わったら、１つ記事を書いてみましょう。

記事の「雛形」の作成は以下でできます。

$ hexo new post "記事タイトル"
...省略...
INFO  Created: ../ブログ名/source/_posts/記事タイトル.md

ちなみにpostを抜くと固定ページが出来上がります。

上記で作成されたファイルをテキトーに編集して保存しておきましょう。
ちなみにMarkdownわからない！って人はhtmlタグでもできます。

記事を書いたら、以下のコマンドを入力します。

$ hexo server
...省略...
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

ブラウザで localhost:4000 にアクセスするとhexoのデフォルトデザインと先ほど書いたブログが表示されると思います。

GitHubに上げる

GitHubにリポジトリ作って上げてください。

今回、Netlifyを使って公開するので、GitHubPagesの設定などはする必要はありません。

テーマを変える

https://hexo.io/themes/ から好きなテーマを選択してforkします。

Forkできたら、サブモジュールとして入れます。
入れたらテーマファイル内を色々いじります。

テーマファイルについては、テーマ次第でいろいろとファイルの拡張子が違ったり、configファイルの記述が違ったりとかなりバラバラなので色々調べてみてください。

Netlifyでデプロイ＆公開する

色々と調整終わったら、とりあえずGitHubに上げましょう。

できたらNetlifyで公開します。

NetlifyにGitHubでログインし、設定します。
設定を終えて、正常にデプロイできればOKです。

ちなみに、ドメインの設定はサイトの Domein settings 内から可能です。

メリット・デメリット

WordPressなど他のブログサービスと比べて、メリットとデメリットを簡単ですが紹介します。

メリット

• 自分の好きなデザインに変えられる
• WordPressより細かい変更ができる
• サーバー維持が必要ない

デメリット

• 導入に多少知識がいる（Wordpressよりは）
• テーマ次第で情報量に格差がある

おわりに

習うより慣れろ！実際に構築してみるのが一番です。
HexoもNetlifyも無料で使えるサービスなのでぜひ構築してみてください。

ちなみにこちらがHexoで作ったブログです。参考に是非。
https://blog.nekozuki.me