hexoによる静的サイトの構築

Hexoによる静的サイトの構築

Hexoは、node.jsを使った静的サイトジェネレータ。

markdown形式の記事を静的サイトに簡単に公開できる。

Hexoの導入

$ npm install hexo-cli
$ npx hexo init ../memo.yammer.jp 
$ cd ../memo.yammer.jp
$ npm install
$ hexo server
# ローカルでサイトの確認

Hexoの設定について

設定は基本的に_config.ymlに書き込む。

例えば、このサイトの_config.ymlが一例。

テーマの導入

Hexoはサードパーティで公開された様々なテーマを導入できる。

公式サイトのテーマ一覧にあるように、様々なものが選べる。

今回はair-cloudを導入した。

$ git clone https://github.com/aircloud/hexo-theme-aircloud.git theme/air-cloud

テーマ特有の設定は、Demoの_config.ymlが参考になる。

特別なページの設置

自己紹介ページの追加

$ npx hexo new page about

source/about/index.mdを次の内容に編集する。

---
layout: about
title: About Me
date: "2020-03-16 11:22:00"
---

## About Me

yammerjpの雑多なメモ。

- twitter: [@yammerjp](https://twitter.com/yammerjp)
- GitHub: [@yammerjp](https://github.com/yammerjp) 
- [blog](https://blog.yammer.fun)

タグページの追加

次のコマンドで、tagページを作る

$ npx hexo new page "tags"

source/tags/index.mdを次のように書き換える

---
title: All tags
type: "tags"
--- 

検索機能の追加

$ npm i hexo-generator-search --save

_config.ymlに次の内容を記載する

# _config.yml
search:
  path: search.json
  field: post