静的サイトジェネレータHexoの導入からリリースまで

HexoはNode.jsを利用した静的サイトジェネレータです。

簡単にサイトが作れるわけですが、構成としてはブログ向きになります。

私が触った感じでは特殊なルールは特にありませんでした。

ドキュメントが充実していますので、慣れている方は下記リンクに目を通していただい方が早いかもしれません。

ドキュメント:
https://hexo.io/docs/setup

*Macで検証しています。

セットアップ

ドキュメントはnpmですが、個人的にはyarnに寄せているので、yarnで進めていきたいと思います。

まずはhexoコマンドを使えるようにします。

yarn global add hexo-cli

適当なディレクトリにプロジェクトを作りましょう。

hexo init project_name
cd project_name
yarn

これで準備は完了です。

動作確認

hexo server

これだけで立ち上がります。

デフォルトでは4000番ポートを使用します。

記事を追加

次にページを追加していきます。

デフォルトのレイアウトはpost, page, draftの3種類がありますが、主に利用するのはpostとpageのみでしょう。

draftは下書きなのですが、どちらにしてもデプロイの作業があるので、あまり使いどころがない気がします。

コマンドで雛形作れますので、見ていきましょう。

hexo new post post_name
source/_postsに作成される
hexo new page page_name
sourceに作成される

リリース

デプロイコマンドを使います。

静的サイトの強みは何と言っても、ファイルを配置するだけで動作するシンプルさにあります。

つまり、レンタルサーバーで動きます。

今回はロリポップにデプロイしてみましたので、すでに利用している方はそのまま参考になるかと思います。

まずはデプロイに必要なパッケージをインストールしましょう。

ロリポップなのでFTPでいきます。

yarn add hexo-deployer-ftpsync

次にデプロイの設定を行います。

_config.ymlを編集します。

deploy:
  type: ftpsync
  host: [FTPSサーバー]
  user: [FTP・WebDAVアカウント]
  pass: [FTP・WebDAVパスワード]
  remote: これは配置先によります

remoteは配置先によって変わります。

私の場合は他のサイトも利用することを想定して、

yoursite_name.com/public

のように設定しました。

LolipopのFTP情報はこちから確認できます。

https://user.lolipop.jp/?mode=account

ここまで準備できたらあとはデプロイするのみです。

hexo deploy -g

なぜかコンソールに制御が返ってこないので、Ctrl + Cで終了させます。
(デプロイが完了した旨のログは画面に出ます。)

テーマの設定などはまた別で紹介したいと思います。

Ubuntuでcloudfuseを使ってオジェクトストレージをマウントする

apt-get install build-essential libcurl4-openssl-dev libxml2-dev libssl-dev libfuse-dev libjson-c-dev 
apt-get install python-eventlet python-greenlet python-netifaces python-simplejson python-xattr
aptitude -y install pkg-config
apt-get install make
./configure
make
sudo make install

~/.cloudfuseファイルの認証情報を書き込みます。
認証情報は伏せていますので読み替えてください。

username=gncuxxxxxxx
# api_key=[API key for authentication with Rackspace]
tenant=gnctxxxxxxxxxxxx
password=xxxxxxxxxxxxx
authurl=https://identity.tyo1.conoha.io/v2.0
# region=[Regional endpoint to use]
# use_snet=[True to use Rackspace ServiceNet for connections]
# cache_timeout=[Seconds for directory caching, default 600]
verify_ssl=True
cloudfuse /mnt

GoogleのOAuth client IDが更新されない時

ページでいうと、こちらからクライアントIDを編集する画面

https://console.developers.google.com/apis/credentials

キャッシュの影響か、間違った情報で認証しようとすると、反映されずに失敗します。

設定がうまく反映されない時はクライアントIDを作り直すのが一番早いです。

Vue jsでアプリケーションがブラウザから見れない時

ボイラーテンプレートで、yarn devなどをすると次のようなメッセージが出てきます。

Your application is running here: http://localhost:8080

ただこれでも見れない時があります。

思いつく原因をいくつか並べて見ます。

ポート番号が被っている

このパターンの場合、そもそも開発サーバーが立ち上がらないはずです。

もしくはよしなに違うポートにバインドしてくれることもあります。

例えば、8080で起動しようとしたが、既に使われていたので8081で変わり起動するなど。

ブラウザのキャッシュが残っている

あんまり考えられないですが、シークレットモードやキャッシュクリアで見れる可能性があります。

回避策

本番環境とは違い、開発環境なので、回避できればなんでも良いわけです。

ポートを占有してみる

勝手に8080で立ち上がるなら、まずは簡易的なサーバーを立ち上げてポートを占有してみたらどうなるのか見てみます。

何でもいいですが、phpでやるならこんな感じです。

php -S localhost:8080

そのあと、nodeを立ち上げてみます。

yarn dev

これでエラーが出れば切り分けができますし、出なければ違う方法を試します。

ポート番号を変更する

何かわからないけれども起動しない。

そんなときはポート番号を変えたほうが早いかもしれません。

ボイラーテンプレートによって違うかもしれませんが、envの設定を変更してみましょう。

次のようキーワードが目安になります。

process.env.PORT

これを変更している値を8081などに上書きして

yarn dev

を実行してみます。

大概これで解決します。

Vue jsでpackage.jsonの情報を読み込む

難しく考えず、requireすれば手っ取り早いです。

例としてはこんな感じ。

<template>
  <div>
    <h1>ホーム</h1>
    <p>Version {{ version }}</p>
  </div>
</template>

<script>
  export default {
    name: 'home',
    data () {
      return {
        version: require('../../../package.json').version
      }
    }
  }
</script>