kkana's blog

新米コーダーの忘れそうなことメモ

hexoでブログ構築(1)

静的サイトジェネレータの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:
---
![title](/img/**.jpg)

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