Hexoをインストールする





Hexoとは

  • 静的サイトジェネレーターで簡単にシンプルなブログが作れる
  • プラグインも豊富でGitHubPagesなどのサービスを使えば無料でサイトを作成できる
  • Markdownの記事書いて、記事の作成もコマンドから行える
  • node.js製なのでJavaScriptによる拡張が可能である
  • データベース不要で、ページの表示が速い
  • 脱CMSで、WordPrssのような環境依存がない
    このように色々あるが、簡単に言うとMarkdownで書かれたファイルなどからHTML/CSS/JSを生成してくれるというもので、似たようなツールとしてJekyllやHugoなどがある。

Hexoをインストール

とりあえずgitで公開するので、gitとNode.jsが必要
gitでリポジトリ作成済なので

1
$ npm install hexo-cli -g

公式どおりにインストールする

作業ディレクトリ作成

initでウェブサイト初期化、サイト用のフォルダを生成。

1
$ hexo init ディレクトリ名

cd ディレクトリ名で移動して

1
$ npm install

これで、Hexoに必要なパッケージなどがインストールされる

localで立ち上げて確認する

hexo serverでコマンド起動(hexo sでもよい)

1
hexo s

プラウザのアドレスバーにhttp://localhost:4000/と入力
これでサイトが確認できる
終了するときはCtrl+C

gitにdeployする(公開できるように設定)

_congig.ymlというファイルを編集する
拡張子ymlはyamlで構造化データの表現方法
各種設定ファイルなどで使う
公式サイトにgitを使う場合はhexo-deployer-gitをインストールしてと書いてあるので

1
$ npm install hexo-deployer-git --save

これでgitに公開する機能がインストールされる

deployの項目の編集

1
2
3
4
deploy:
  type: git   
  repo: repo: (githubのURLをそのまま貼り付ける)
  branch: master

リポジトリ名に.github.ioをつけたほうがいいかもしれない

次にURLの項目の編集

1
2
3
# URL
url: https://(ユーザーネーム).github.io/(リポジトリ名)/
root: (リポジトリ名)

サブドメインでやる場合はrootをしっかりと設定しないと正しく表示されない
独自ドメインを使用する場合はGitHubHelpなどを見て設定する

その他設定

1
2
3
4
5
6
7
8
# Site
title: (ブログ名)
subtitle: (サブタイトル)
description:
keywords:
author: (名前)
language: ja
timezone: Asia/Tokyo

静的ファイルを生成して展開する

静的ファイル生成するコマンドはhexo generate
生成して展開する場合は

1
2
$ hexo generate --deploy 
$ hexo deploy --generate

次のいずれかのコマンドを実行する
両者に違いはない
上記のコマンドのショートカット

1
$ hexo deploy -g

これでさっき入力したアドレスにアクセスするとページが表示されるはず
(反映に時間がかかる場合がある)
deploy時にパスワードを聞かれるので、GitHubで設定したパスワードを入力する
更新する時もdeployする