静的サイトジェネレータのhexoをつかってブログの構築をしはじめたのでメモ。
最終的にはGithabPageで管理しようかと。
大まかな流れは以下
- インストールからサーバ立ち上げとブログ記事作成まで
- ejsをちょっとだけ理解する
- テーマを作成
まだ手をつけていない
この記事ではhexoをはじめるところまで。
hexoについて
https://hexo.io 静的サイトジェネレータ。node.jsで動く
インストールからサーバ立ち上げとブログ記事作成まで
インストール
公式サイトにも書いてあるので適当にメモ。 インストール
npm install hexo-cli -g
ブログを作るためのディレクトリを作成
hexo init blog
そうすると以下のようにディレクトリが生成される。
. ├── blog │ ├── _config.yml │ ├── db.json │ ├── node_modules │ ├── package.json │ ├── public │ ├── scaffolds │ ├── source │ └── themes └── readme.md
そのディレクトリに移動してモジュールをいれ
npm install
ローカルサーバを立ち上げる（初期のポートは4000）
hexo server
これでデフォルトテーマでブログが作成された状態になる。
階層の概要
. ├── blog │ ├── _config.yml・・・設定ファイル │ ├── db.json │ ├── node_modules │ ├── package.json │ ├── public・・・生成されたファイル │ ├── scaffolds・・mdファイルの雛型 │ ├── source・・mdファイルが置いてある │ └── themes・・ブログテーマ └── readme.md
記事作成
sourceディレクトリの中にmdファイルのブログ記事を追加していく。
追加できるレイアウトの雛型は三種類ある。
- post source/_postに格納される（記事）
- page sourceに格納（個別のページ）
- draft source/_draftsに格納される(下書き)
テンプレートの変更をしたいときは
scaffoldsの中を変更する。
今回作ったブログの雛型はかならず画像をいれるつもりなのでこうしている。
---
title: {{ title }}
date: {{ date }}
tags:
---
mdファイルの頭
---
title: {{ title }}
date: {{ date }}
tags:
---
ここで記事の投稿日時、タグ、タイトルを管理している。
{{title}}{{date}}を使うとページを作成したときを自動保存してくれる。
ブログ全体の設定ファイル
_config.yml
内でタイムゾーンの設定をできるので、合わせて変更しておく。
timezone: Asia/Tokyo
記事を書く
記事をかくときは
hexo new post 記事のタイトル
下書きの記事を書くときは
hexo new draft 記事のタイトル
記事のタイトル.mdというフォルダがそれぞれの格納先にできる。
hexo server --draft
でローカルサーバで下書きの状態を見ることができる。
下書きをpost配下に移動させるには
hexo publish 記事のタイトル
そしてページ生成しつつ公開
hexo generate -d
