Hexoで爆速ブログ開設

Writer: ポッチャマ

電算部のブログがかなり管理しづらかったので、”Hexo”というサイトジェネレータを使ってリニューアルしてみました。

Hexoとは?

node.js(サーバーサイドで動作するJavaScript)で作られたパッケージ。これを使うと、静的サイトを簡単に作ることができる。

とにかくブログ作ってみる

  • 環境構築

    部員はWindowsユーザーがほとんどなので、ここではWindowsでの手順のみ記述する。

    1. npmをインストール

      Hexoなどのnodeパッケージの管理に必要なnpm(node package manager)をインストールする。
      下記の公式サイトからNode.js/npmのインストーラがダウンロードできる。
      LTSとLatestがあるが、LTSで良いと思う。
      node.js公式
      ダウンロードしたインストーラーを起動し、インストール。インストール中色々聞かれるけど基本的にデフォルトでOK。
      コマンドプロンプトでNode.js、npmが使えるか確認。

      1
      2
      node --version
      npm --version

      バージョン情報が表示されればインストールに成功している。

    2. Hexo-cliのインストール

      npmを使ってHexo-cliをインストールする。

      1
      npm install hexo-cli -g

  • サイト作成

    1. プロジェクト作成

      コマンドプロンプトでプロジェクトのディレクトリを作成したい場所に移動し、下記のコマンドを実行する。

      1
      hexo init プロジェクト名

      大量の文字列が表示され、プロジェクト名と同名のディレクトリが作成される。

    2. 表示させてみる

      作成したディレクトリに移動し、コマンドを実行するとリンクが表示されるのでアクセスしてみよう。

      1
      2
      cd プロジェクト名
      hexo server

      こんな感じのページが見れるはず。

  • 使い方

    1. 記事の追加

      1
      hexo new "ページタイトル"

      このコマンドでsource/_posts/の中にマークダウン形式のファイルが作成されるので、それを編集する。

    2. github pagesに公開
      _config.ymlを編集

      1
      2
      3
      4
      5
      6
      7
      8
      url: http://githubのユーザー名.github.io/リポジトリ名/

      ...

      deploy:
        type: git
        repo: [email protected]:ユーザー名/リポジトリ名.git #clone時のurl
        branch: gh-pages

      必要なnodeパッケージを追加でインストール

      1
      2
      npm install hexo-deployer-git --save
      npm install hexo-renderer-ejs --save

      hexoコマンドを実行

      1
      hexo deploy -g

      githubのリポジトリにgh-pagesブランチが追加され、そこでデプロイされる。

ARCHIVESが404になったりHOMEのアクセス先がおかしかったりとエラーもあるが、
とりあえずこれで最低限のブログの運用ができるはず…
マークダウン形式で記事が書けるようになった。