静的CMSのhexoの使い方


現在WordpressをEC2で運用していますが、新しいサイトをEC2に相乗りしたいと思いリソース消費の少ない静的CMSのHexoを使ってみました。
Hexoの特徴や導入方法など残しておきたいと思います。

参考までに、Hexoで作ってみたWebページはこちら

1. 静的CMSのメリット

静的CMSは事前に静的資材(HTML, CSS, js)を生成しWebサーバに配置するだけで公開できるため、APサーバやDBが不要でリソースを殆ど必要としないメリットがあります。
(Wordpressがほぼリソースを使っていたので相乗りがし易く助かる)

また、サーバ処理がないためページのレスポンスが早く、アプリケーションやDBがないためセキュリティのリスクもありません。

反面、記事はマークダウンなどで記述しビルドしてサーバに配置する必要があるため、扱うのにある程度のスキルが必要というデメリットもあります。

2. Hexoについて

Hexoは台湾人の “Tomy Chen” が2012年に作ったnode.js製の静的サイトジェネレータです。
公式サイト

ブログに特化しており、Markdown形式で記事を書きます。簡単に使うことが出来、Wordpress同様にさまざまなテーマが用意されていたり、プラグインを入れて機能拡張も簡単に行うことが出来ます。

3. Hexoの導入方法

Hexoはnpmを使ってhexo-cliをインストールすることで利用することができます。hexo-cliをインストールしたら “hexo init” コマンドでプロジェクトのひな形を生成し、”npm install” で必要なパッケージをインストールします。

$ npm install -g hexo-cli
$ hexo init [project name]
$ cd [project name]
$ npm install

ディレクトリ構成やファイルは以下のようになります。

[プロジェクトフォルダ]
├ scaffolds ... 投稿などのテンプレート 
├ source ... 固定ページの格納場所
│  └ _posts ... 投稿の格納場所
├ themes ... テーマの格納場所
│  └ _config.yml ... テーマの設定
└ _config.yml ... サイトの設定

ひな型を生成したら、最初に_config.ymlを編集してサイトの設定(title, description, URLなど)を行います。また、テーマ(レイアウト)に関する設定「themes」フォルダ以下の_config.ymlを編集します。

4. 投稿や固定ページを追加する

投稿や固定ページはhexoコマンドで追加します。
以下のコマンドで、「source」フォルダに記事や固定ページのひな形が作られるため、そのマークダウンファイルを編集していきます。
postは「source」フォルダの「_posts」フォルダにファイルが追加されます。pageの場合は「source」フォルダ直下にpageで指定した名前のフォルダが生成されます。

# 記事を追加
hexo new post [name]
# 固定ページを追加
hexo new page [name]

マークダウンのサンプルは以下のようになります。

---
title: タイトル
date: 2019-1-1 12:34:56
tags:
---

## 見出し2
文章
[リンクを貼りたい文字列](https://sample.coms/sample "URL先タイトル")

### 見出し3
文章。
この**文字**を強調する。
![画像の代替文字](index/sample.jpg "画像タイトル")

- リスト1
- リスト2

    リスト2文章

- リスト3

1. オーダーリスト1
2. オーダーリスト2
 

5. SEO対策

SEO対策として、最低限のrobots.txtとsitemapを生成するためのプラグインを追加します。

npm install hexo-generator-robotstxt
npm install hexo-generator-seo-friendly-sitemap

_config.ymlに設定を追加します。

# sitemap
sitemap:
  path: sitemap
  tag: false
  category: false

# robotstxt
robotstxt:
  useragent: "*"
  disallow:
    - /archives/
    - /css/
    - /js/
    - /fancybox/
  allow:
  sitemap: /sitemap.xml

6. ビルドしてサーバに公開する

Hexoで作成したサイトはサーバに配置するために静的コンテンツを生成します。”hexo generate” コマンドで静的コンテンツがpublicフォルダに生成されますので、中身をのままWebサーバに配置すれば公開することができます。

hexo generate

また、開発中は変更をリアルタイムに確認するため、”hexo server” コマンドで開発用サーバを立ち上げるてブラウザから確認することもできます。

hexo server
カテゴリーCMS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です