Node.js
静的サイトジェネレーター
Hexo

残念!さやかちゃんでした!

Secure Services Gatewayのことではなくて、Static Site Generator(静的サイトジェネレーター)の話をしたいと思います。

静的サイトジェネレーターとは

基本的にはMarkdown形式の原稿から静的なHTML/CSS/JSを作成してくれるツールのことを指します。

  • PHPやMySQL等を使用しない
  • 静的なHTMLなので、WordPressでよくあるセキュリティ上の問題は発生しにくい
    • とはいえレンタルサーバ側をちゃんと管理しないと改ざんされたりするリスクは当然あるので、そこは気をつけましょう

当然ながら、DBが必須になるような、会員限定サイトのようなものやECサイトのようなものを作るのには向いていません。また、基本的にはMarkdownファイルをエディタで編集して静的サイトのファイルを生成するため、WordPressのような動的CMSのようにブラウザ上のエディタで操作したりすることは基本的にはできません。ブラウザ上新着記事や人気記事を出すことは一応できるそうですが、リアルタイム性はWordPressのような動的CMSには劣るわけです。

なので私は静的サイトジェネレーターとWordPressを使い分けて、いくつかのサイトを運営しています。複数人で運営するときや、プラグインを使いたいときや、こまめにブラウザ上で更新したいときはWordPressを使いますね。一方で、一人で運営するとき、ブラウザ上で更新する必要性があまりなく更新頻度もそれほど高くないとき(読み物系のブログサイトなどですね)は、リソースを食わずにセキュアに運営できる静的サイトジェネレーターでサイトを運営しています。

静的サイトジェネレーターの種類

いくつか挙げておきます。

私はHexoを使っているのでHexoについて書きます。

Hexoとは

何て読むんですかね……ヘクソ?ヘキソ?アジア圏で人気のある静的サイトジェネレーターだそうです。テーマも中文のものが結構ある気がします。あとこれ、著作権大丈夫なのか。大丈夫じゃないんだろうなぁ……

Hexoを使うようになった理由ですが、周囲にHexoを使っている人が多かったことがありますね。私の周りだとHexoが一番多くて、次はHugoという感じです。

How to Use Hexo

1台のサーバ上に編集環境とWebサーバをたてている例でご説明します。これがベストだとは思っておらず、できればローカル上に編集環境をつくって、レンタルサーバにアップロードするようにしたいなと思っています。Apache使っているのもたまたまで、Nginx使っているところもあります。まちまちです。

Install httpd

$ yum -y install httpd
$ systemctl start httpd
$ systemctl enable httpd
$ firewall-cmd --add-service=http --permanent
$ firewall-cmd --add-service=https --permanent
$ firewall-cmd --reload
$ curl https://dl.eff.org/certbot-auto -o /usr/bin/certbot-auto
$ chmod 700 /usr/bin/certbot-auto
$ certbot-auto certonly --webroot -w /var/www/html -d example.com --email hogehoge@fugagfuga.com
$ vi /etc/httpd/conf.d/ssl.conf
$ systemctl reload httpd

Install Hexo

インストールはほんとこれだけ。

yum install nodejs
npm install -g hexo

Use Hexo

まず最初にサイトのひな形を作ります。コマンドは hexo new です。以下の例ですと /usr/local/src/newsite というディレクトリが作成されます。

cd /usr/local/src/
hexo init newsite

新しいページの作成は hexo new です。 /usr/local/src/newsite/source/_posts/ の配下に.mdファイルが生成されています。

$ cd newsite
$ hexo new newentry
$ vi /usr/local/src/newsite/source/_posts/newentry.md

hexo gen で、HTML/CSS/JS等を生成します。生成されたファイルは /usr/local/src/newsite/public にあります。これをWebサーバのドキュメントルートにコピーすると更新完了です。

$ cp -R public/* /var/www/html/

また、 hexo gen する前に hexo server とすると、ファイル生成前に https://example.jp:4000 でテストサイトを見て確認することができます。