〜初心者可〜ブログを無料で始めるなら HEXO No.7 - 記事作成編 | 翁 - OKINA のブログ

HEXO の最低限のカスタマイズができたので記事の書き方を説明していく。

Permalink (HEXO ブログ記事の URL)とアセット保存ディレクトリ(画像など)の変更

さっそく記事を書いていきたいんですがその前に、、、

まだあるけろ～？？

もうちょっとだけ！

各記事にアクセスするための URL (permalink)の変更

まだ、記事の流れでは独自ドメインの設定をしていませんが、設定するとこのブログのホームは以下のような URL になります。

https://www.okina-freelife.page/

HEXO がデフォルトで用意してくれている Hello world.md で作成される記事の URL は以下のようになります。

`https://www.okina-freelife.page/2019/08/14/hello-world/'

人によるとは思うんですが、記事作成時の Title を URL にしてしまうため、日本語のタイトルをつけると URL に日本語が入ります。

日本語の URL の何が嫌かというと、例えばせっかく記事を bookmark してもらったり SNS に share してもらったとしても、日本語の部分が URL エンコードされてしまい “%” と英数字の組み合わせになってしまうんです。

百歩譲って URL エンコードされてもいいんですが、その場合その URL を使ってアクセスしようとするアプリケーションの仕様によってはうまくたどり着けない可能性があるんです。

あと、ちょっと URL の階層が深すぎて URL 自体が長くなってしまうので、それをシンプルにするのと URL からどんな記事なのか？をある程度予想できるようにするというコンセプトで今回は変更していきました。

それでは行きましょう！

編集するのは HEXO ホームディレクトリの _config.yml です。

parmalink: の部分を変更していくのですが、デフォルトだと以下のような設定になっています。

permalink: :category/:year/:month/:day/:title/

https://hexo.io/docs/permalinks.html

上記 HEXO の公式ドキュメントに permalink で使用できる変数の説明があります。

:{変数名} の形で呼び出すんですね。デフォルトだと各変数のあとに / が入っていて階層が深くなってしまっていたので、/ を消すのと、日本語タイトル対策のために :title という変数を使用しないようにします。

以下のように _config.yml を編集します。

"/home/okina_freelife/hexo/_config.yml を編集後"

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://www.okina-freelife.page
root: /
# pid は各記事の中のフロントマターに入れている。
permalink: :year:month:day/:pid/
permalink_defaults:

ん？ :pid ってなにけ？ HEXO の公式のドキュメントにも載ってないけろー。

いいところに気が付きますね！！

URL に使用する変数は別にもともと HEXO 側で用意されているものを使わなくても大丈夫です。ちなみに pid: は私がつけたものになります。(post ID の略です！)

修正後の _config.yml にもコメントとして書いていますが フロントマター のところで変数を定義しています。

フロントマター？？

これも初めてですね。

それでは /home/okina_freelife/hexo/source/_posts/ 配下にある Hello world.md を開いてください。

"Hello world.md"

---
title: Hello world
date: 2019-08-14 12:07:04
pid: hello-world
---

この “—“ で囲まれた部分を フロントマター と呼びます。

ここに定義した変数は別の場所から参照できるんです。

急にプログラミングの要素が強くなってしまいましたが、今回は単純に各記事ごとに pid: を書いてあげて、その値を記事の URL に使うんだと覚えてください。

もちろん、ブログ内で唯一になるように pid を決めてくださいね。

今回の例だと pid: hello-world で date: 2019-08-14 12:07:04 なので、この記事にアクセスする URL は以下のようになります。

https://www.okina-freelife.page/20190814/hello-world/

(実際には記事は無いので上記アドレスにアクセスしてもなにも出てきません)

ここでちょっと大事な説明をします。しっかり聞いてください！

任せろけろ！

permalink: :year:month:day/:pid/ を URL として使うと設定しましたが :pid/ の最後の / を忘れないようにしてください。

なぜ、忘れてはいけないかを簡単に説明していきますね。

例えば、https://www.okina-freelife.page/ にアクセスしたときって実際には https://www.okina-freelife.page/index.html というファイルにアクセスしてるんです。

これは決まり事で https://www.okina-freelife.page/ のように実際にアクセスするファイル名を省略した時は index.html にアクセスすると決めています。
(index.html だけではないんですが説明の簡略化のため今回は index.html としています。)

これは https://www.okina-freelife.page と、ドメイン名に対してアクセスしたときは / も含めて https://www.okina-freelife.page/index.html へアクセスします。

要するに、もし ファイル名が指定されていない場合はindex.html に対して最終的にアクセスしているんですね。

便利けろ！！

便利ですよね！

では、https://www.okina-freelife.page/YYYYMMDD/hello-world にアクセスしてきた時はどうなるでしょうか？

同じじゃないのけ？ https://www.okina-freelife.page/YYYYMMDD/hello-world/index.html にアクセスするけろ。

それが違うんです。アクセスしたのが ドメイン名 であれば、それがファイルではないと判断できるんですが、そうではない場合 (今回で言えば hello-world) がディレクトリなのかファイル名なのかがわからないんです。

そのため ‘hello-world’ というファイルにアクセスしに来たと Web サーバは思うのですが、そんなファイルは /YYYYMMDD/ には無いので結果としてそんなページは無いですよーという結果に。
今回の GAE の環境ではこれが発生します。 hexo server コマンドで見ているときは普通にアクセスできるので気がつきづらいんです。

(もちろん、Web サーバによってはこういったケースもうまくやってくれるものもあるんですが、環境依存になってしまうのでできないと考えましょう。)

なので、かならず permalink: :year:month:day/:pid/ のように :pid/ の最後の / を忘れないようにしてください。

同じ観点で修正しなければならないところがあるので、ここで合わせて修正していきます。

全部で３つのファイルを変更していきます。　最後に / を追加していってください。

一つ目は HEXO ホームディレクトリの _config.yml です。

"/home/okina_freelife/hexo/_config.yml 修正後"

source_dir: source
public_dir: public
tag_dir: tags/ #<= Here!
archive_dir: archives/ #<= Here
category_dir: categories/ #<= Here!

２つ目は Themes 配下の _config.yml です。

"/home/okina_freelife/hexo/themes/_config.yml 修正後"

menu:
  home:
    text: Home
    url: /
  archives:
    url: /archives/ #<= Here!
  tags:
    url: /tags/ #<= Here!
  th-list:
    text: Categories
    url: /categories/ #<= Here!

最期 3 つ目はその他、動的にリンクを作り出しているところを編集しています。

修正するファイルは /home/okina_freelife/hexo/themes\indigo\_partial\tags-bar.ejs です。
わかりずらいですが、二行目の <a href="<%= url_for('/' + type) %>" を変更してます。

"/home/okina_freelife/hexo/themes\indigo\_partial\tags-bar.ejs"

<nav class="tags-list">
    <a href="<%= url_for('/' + type) %>/" style="-webkit-order:-1;order:-1" class="tags-list-item waves-effect waves-button waves-light
        <% if(path === type + '/index.html'){%> active<%}%>"><%= __('tag.all') %></a>
    <%

変更後は <a href="<%= url_for('/' + type) %>/" と最後に / が加わっています。

Asset フォルダの変更　（記事に挿入する画像等の置き場)

デフォルトの設定だと、どの記事の画像もすべて同じディレクトリ /home/okina_freelife/hexo/source/images/ に保存されますが、記事が増えたときにこれだと管理が面倒なので、記事ごとに画像ファイル等を保存するためのディレクトリを用意するように設定を変更していきます。

特に画像の挿入が多い記事を書いていると、いちいち画像のタイトルとかを指定するのが面倒になりますので記事ごとに一番上の画像から picture1.png, picutre2.png,,,,pictureN.png のように画像を記事に入れ込むといった運用ができるので便利です。
(すべての記事で使う画像のファイル名を一意にしなくてよいので非常に楽です。)

編集するファイルは HEXO ホームディレクトリの _config.yml です。

"/home/okina_freelife/hexo/_config.yml 編集後"

filename_case: 0
render_drafts: false
post_asset_folder: true #<=Here!
relative_link: false
future: true

これで、新しい記事を作成した時にその記事ごとのディレクトリが作成されます。

具体例は実際に記事を書く際にお見せしますね。

余談ですがこの設定をしておくことで asset_path という変数にその記事への path が格納されるようになり、この変数を使ってマークダウンの中に画像を埋め込んでいきます。

Tag, Category の設定

フロントマターの話がでたので、ここで Tag と Category の話もしておきましょう。

Tag や Category を記事に設定したい場合はフロントマターにて以下のように設定してください。

"フロントマター"

---
title: Hello world
date: 2019-08-14 12:07:04
pid: hello-world
tags:
  - tag1
  - tag2
categories:
  - parent_cat
  - child_cat
---

Categoly は上に書いた Category から順に階層構造になります。上記の例では parent_cat に child_cat があります。

このように設定することで、例えば (メニューアイコン)からいける Categories や Tags のページに記事が追加さるようになります。

また、Categoly は記事の上部に、Tags は記事の下の方でそれぞれ確認ができるようになります。

scaffolds (記事ごとの template) の設定

pid: , categories, tags と記事ごとに毎回設定する項目が多くなってきました。

なので、新しい記事を作成したときにこのあたりの項目が自動的に追加された状態で始められるよう設定していきたいと思います。

/home/okina_freelife/hexo/Scaffolds/ 配下の post.md を編集していきます。

"post.md"

---
title: {{ title }}
date: {{ date }}
pid: 
tags:
  - 
  - 
categories:
  - 
  - 
---

上記のように編集してください。

自動で pid や categories, tags などの項目が記事作成時に追加された状態になります。
(タイトルや時間は、記事を作成した時の情報が自動的に入れるための設定。)

私は scaffolds にて画像を埋め込むための HTML タグなども事前に入れておいて、画像をいれたいところに毎回コピペして使うということをしています。

その他、毎回使用するなーと思う内容は scaffolds の post.md に入れておくことで記事を作成する効率を上げることができますのでしっかり覚えておいてください！

記事の作成

やっと今回のメーンイベントである記事の作成です！

やっとけろー！やっと記事がかけるけろー！！

おまたせしました！

記事を作成する手順はすごく簡単ですぐに終わっちゃいます。ただ、記事を書くことに専念するためにいろいろ下準備が必要だったんです！

ここまで来たら記事を量産する下準備がととのっているので、これまでにたまっていた書きたい内容をどんどん書いていってください。

それでは行きましょう。

Cloud Shell (CLI) のコンソールで以下のようにコマンドを入力します。
(hexo server が起動している場合は Ctrl+C で一度止めてから作業を行ってください。)

$ # HEXO ホームディレクトリへ移動
$ cd
$ cd hexo
$ pwd
/home/okina_freelife/hexo
$ 
$ # 記事の作成
$ hexo new post "記事のタイトル"
INFO  Created: ~/hexo/source/_posts/記事のタイトル.md

これだけです。そうすると /home/okina_freelife/source/_posts/ 配下に”記事のタイトル.md” と “記事のタイトル” というディレクトリが作成されます。

後は “記事のタイトル.md” を編集するだけです。コードエディタから “記事のタイトル.md” を開いてみてください。
以下のようになっています。

---
title: 記事のタイトル
tags:
  - null
  - null
categories:
  - null
  - null
date: 2019-08-29 12:17:36
pid:
---

tags や categories に適切なものを入れて頂き (複数いらないという場合はいらない分を行ごと削除、足りない場合は追加) フロントマターの次の行から記事をマークダウン形式で書けばオーケーです。

基本的な記事の書き方

マークダウン形式では “#” で見出しを表現できます。”#”の数で見出しの大きさを変えることができます。

---
title: 記事のタイトル
tags:
 - test_tag
categories:
 - test_cat
pid: test-article
---

## 二つで　見出し２　H2 タグ

### ３つで　見出し３　H3 タグ
### こんな感じで目次としても見える

## 目次ではこんな感じで自動的にナンバリングも

### 次の小見出しに変わる
### シャープの後は半角スペースが必要

これを hexo server で確認するとこんな感じ。

“#” が 1 つのもの(HTML H1 タグ)は記事のタイトルでしようされているので、マークダウンの中ではシャープ２つ以上を使いましょう。

記事中でそこまで階層化することはないと思ますが最高で “#” 6 個まで階層化することができます。
その理由としては HTML のタグが H1 - H6 まで合計６個存在していて、これとマークダウンの “#” の数が対応しているためになります。

画像の埋め込み方

最期に画像の埋め込み方をやりましょう。

いろいろな方法があるのですが HTML のタグを使って入れ込むのが一番楽かなと思います。

1 2	<!-- 画像を貼るときのテンプレート。--> <img src="{% asset_path picture1.png %}" width="100%" alt="picture1" title="picture1.png">

画像を入れたいところに上記の HTML のタグを埋め込みます。最初の “picture1.png” の部分に使用する画像のファイル名を指定します。
使用したい画像ファイルを “picture1.png” として /home/okina_freelife/hexo/source/_posts/ 配下にある記事のタイトルと同じディレクトリ(hexo new post "記事のタイトル"を実行した時に作成されるディレクトリ)に upload します。

アップロードのやり方はいいですね？

コードエディタつかってドラッグ＆ドロップか右クリックして "upload files" けろ！

Great!! そうです。それで指定した場所に画像が埋め込まれるはずです。 hexo server で確認してみて下さい。

ちなみに width=100% で画像の表示サイズを指定しています。

“alt=’picture1’” は画像が表示されなかった時に表示される文字列で title="picture1.png" は画像が表示された際にカーソルを画像の上に持ってきた時に表示される文字列です。

画像が何らかの原因で読み込まれなかった時にどういった画像が表示されるのか、またブラウザの機能で音声読み上げなどをする際にこのあたりの文字列が読み上げられますので、しっかり記載しておきましょう。

この画像を張るためのテンプレートを “scaffolds” の post.md の本文中(フロントマター部の下)に書いておき、コピペして使えば便利だと思います。

画像のテンプレート以外にも、記事の構成がある程度決まっていて毎回同様の構成になる部分があるのであれば scaffolds の部分をうまく使えば記事のが楽になりますね！

まとめ

どうでしたでしょうか。だいぶ長くなりましたがこれで記事を書くところまではできました。

大体この辺いじればこの辺が変わるんだなーとか、そういった記事中では説明していないところまで考えながら読んでいくことが大事になります。

例えば、色とか見た目を変えたり、飾りをつけたいなーと思ったら CSS の進化版である .less をいじればいいなーとか、配置する場所を変えたいんだよなーと思えば html の要素を構築していく .ejs を変更していくんだなーとかそういうところです。

私も “HTML/CSSの基礎” とか “javascript の基礎”などはなんだかんだで結構調べました。

マークダウンで簡単に作成していけるのも HEXO をはじめとする静的サイトジェネレータの強みですが、マークダウンの中に HTML のタグも入れられるので簡単にデザインを強化することもできますね。

せっかくなんでこの辺りも基礎くらいはかじってもいい気がしてきたので、余裕が出てきたらなんか Web のコースでも受講してみようかなと思います。

もちろん、この辺りに時間をかけたくないんだーという方もいると思いますので、そのあたりは HEXO カスタマイズ応用編とかでお話できればと思います。

さて、何本か記事を書いたら次はいよいよ書いた記事を Internet に公開です！

取得した独自ドメインでの Internet への公開方法を次の記事で説明していきます。　お疲れ様でした。

シリーズ記事まとめ

〜初心者可〜 ブログを無料で始めるなら HEXO No.7 - 記事作成編