準備するもの
- エディタ
Hexoは、ブログの管理画面という概念はなく、お手持ちのエディタで記事を書きます。メモ帳でも書けますが、エディタの方が書きやすいです。おすすめはVSCodeです。
新規ブログを立ち上げる
新規にブログを作る時だけの作業です。
インストールについては↓こちらの記事に詳しく書いてありますのでそちらからご覧ください。
Hexoのインストール
コマンドプロンプトで、インストールしたいフォルダに移動します。
newblogの部分は、ブログ名ですので、好きに変更してください。
hexo init newblogエンターしてインストールが終わったら
cd newblogディレクトリをnewblogに移動させます。
hexo sローカルサーバが起動しますので、ブラウザでhttp://localhost:4000を開いて表示を確認。
ちゃんとブログが表示されたらインストール完了です。
目次プラグインのインストール
コマンドプロンプトで
npm install hexo-toc --saveエンターして終わったらインストール完了です。
Hexo最初の設定（私の場合）
トップ _config.yml の設定変更
フォルダトップの中にある、_config.ymlをエディタで開きます。（私が使っているエディタはVSCodeです。）
# Site
title: ブログのタイトル
subtitle: ''
description: ''
keywords:
author: なにがし
language: ja
timezone: ''＃site の部分を変更
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :title/
permalink_defaults:URLと、permalink の部分を変更
そして一番下に
toc:
maxdepth: 3
class: toc
slugify: transliteration
anchor:
position: after
symbol: '#'
style: header-anchor目次のための設定を追加します。
アイキャッチ用imagesフォルダの作成
source フォルダの中に、imagesフォルダを作って、その中にアイキャッチ用の画像を入れるようにします。アイキャッチはあとで記事内で指定します。
テーマの設定（デフォルトテーマ landscapeの場合）
テーマの設定ファイルの変更
フォルダ themes/landscape の中にある、_config.yml を開きます。
# Header
menu:
Home: /
Archives: /archives
About: /about
rss: /atom.xml↑上記の例は、aboutというページをヘッダーメニューに付け加えました。
あとは適宜お好みで変更します。
テーマのヘッダー画像の変更
thmes/landschape/source/css/images の中にある、banner.jpg を差し替えます。
Hexoで記事を作る
ここからは、毎回の記事を書く作り方です。
記事ファイルの作成
コマンドプロンプトで
hexo new page pagenameと入れてエンターします。pagenameの部分は、適宜変えてください。半角英数です。
終わると、source/_posts の中に、pagename.md というファイルができるので、それをエディタで開いて編集します。
記事の設定の変更・アイキャッチの設定
---
title: Hexoはじめました
date: 2011-08-28 15:58:47
tags: 日記
photos: images/hajimeni.jpg
---編集するファイルを開いたら、一番上の部分を適宜変更します。タイトルやタグなどですね。
photosという部分はないので、追加します。これがアイキャッチの画像になります。
sources/images の中に、アイキャッチにしたい画像を入れ、そのファイル名を記入します。
続きを読む
<!-- more -->↑上記のタグを、続きを読む（read more）を入れたい部分に入れます。
目次
<!-- toc -->↑上記のタグを、目次を入れたい部分に入れます。
目次の入れ方
見出しを入れることによって自動的に目次ができます。
# 大見出し
## 中見出し
### 小見出し
#### 小小見出し↑上記のように、文章の頭に ＃ （半角シャープ）を入れると、自動で見出しになります。
私は ＃＃ の中見出し（H2タグ）を基本で使っています。
記事内画像の入れ方
実は私はまだ記事内画像の入れ方を確立していません。
source/images の中に画像ファイルを入れ、
<img src="https://サイトのアドレス/images/画像名.jpg">として入れています、もっといい方法ありませんかしら。
追記：  のように書いても良いようです。
画像アップロードがブログシステムのように簡単にできないのが、Hexoの難点の一つかもしれません。
ページの作成
個別ページを作ることもできます。
hexo new page aboutとすると、aboutというページを作ることができます。あとは、source/page/の中の該当ファイルを開いて、投稿記事と同じように編集します。
レンタルサーバーにUPするには
hexo gで、ブログをジェネレートしてHTMLファイルに変換します。
そして完了したら、『public』フォルダの中のファイルをFTPでアップロードすればOKです。
GitHub Pages等を使って、デプロイすればもっと簡単にページを更新できるのですが、これはまた別の機会に。
Hexoは慣れればカンタン！軽い！
最初はいろいろ設定することがあり、ややこしそうですが、一度セットしてしまえば、あとは記事を書くことだけに集中できます。
記事を書くだけなら、ものすごく簡単で、特に文章を多く書くブログの場合、Hexoのメリットを感じてもらえるはずです。
そして何より、静的HTMLで出来ているので、一度ネットにUPしてしまえばメンテナンスいらずで表示も爆速なのがいいですよね。
ただし、画像を多用するブログの場合は、Wordpress等のほうが良いかもしれませんね。
私もまだ使い始めですが、慣れていきたいと思います。Hexoでは何のブログを書こうかな？