静的サイトジェネレーター Hexoでブログ記事を書く流れ

ホームページ・ブログ

準備するもの

  • エディタ

Hexoは、ブログの管理画面という概念はなく、お手持ちのエディタで記事を書きます。メモ帳でも書けますが、エディタの方が書きやすいです。おすすめはVSCodeです。

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

新規ブログを立ち上げる

新規にブログを作る時だけの作業です。

インストールについては↓こちらの記事に詳しく書いてありますのでそちらからご覧ください。

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タグ)を基本で使っています。

マークダウン記法を覚えよう

マークダウン記法とは、簡単な入力方法でHTMLタグに変換できる記入の方法です。基本的な数個を覚えるだけでも実用的ですので、ぜひ覚えてみてください!
マークダウン記法一覧表(Qiita)

記事内画像の入れ方

実は私はまだ記事内画像の入れ方を確立していません。

source/images の中に画像ファイルを入れ、

<img src="https://サイトのアドレス/images/画像名.jpg">

として入れています、もっといい方法ありませんかしら。

追記: ![alt](/images/image.png) のように書いても良いようです。

画像アップロードがブログシステムのように簡単にできないのが、Hexoの難点の一つかもしれません。

ページの作成

個別ページを作ることもできます。

hexo new page about

とすると、aboutというページを作ることができます。あとは、source/page/の中の該当ファイルを開いて、投稿記事と同じように編集します。

レンタルサーバーにUPするには

hexo g

で、ブログをジェネレートしてHTMLファイルに変換します。

そして完了したら、『public』フォルダの中のファイルをFTPでアップロードすればOKです。

GitHub Pages等を使って、デプロイすればもっと簡単にページを更新できるのですが、これはまた別の機会に。

Hexoは慣れればカンタン!軽い!

最初はいろいろ設定することがあり、ややこしそうですが、一度セットしてしまえば、あとは記事を書くことだけに集中できます。

記事を書くだけなら、ものすごく簡単で、特に文章を多く書くブログの場合、Hexoのメリットを感じてもらえるはずです。

そして何より、静的HTMLで出来ているので、一度ネットにUPしてしまえばメンテナンスいらずで表示も爆速なのがいいですよね。

ただし、画像を多用するブログの場合は、Wordpress等のほうが良いかもしれませんね。

私もまだ使い始めですが、慣れていきたいと思います。Hexoでは何のブログを書こうかな?

タイトルとURLをコピーしました