静的サイトジェネレータ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で終了させます。
(デプロイが完了した旨のログは画面に出ます。)

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

カテゴリーHexo

コメントを残す

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