hexoの使い方


ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。
本記事では「hexoの使い方」について記載します。

GAE開発環境へのHEXOインストールについては「GCP独自ドメインSSLブログが無料で使える(3)HEXO環境構築」をご確認ください。

1.記事の作成【 hexo new draft <記事タイトル>

hexo new draft <記事タイトル>」コマンドにて記事を作成します。
以下の例では記事タイトル名「test」として実行しています。

daddy_trevia ~/hexo $ hexo new draft test
INFO  Created: ~/hexo/source/_drafts/test.md
daddy_trevia ~/hexo $
ワンポイントよく紹介されている「`hexo new post <記事タイトル>`」コマンドでは「`HEXOディレクトリ/source/_posts/`」に記事が作成され「`hexo server`」コマンドや「`hexo generate`」コマンドの対象となります。
「`post`」ではなく「`draft`」とすることで「`HEXOディレクトリ/source/_drafts/`」に記事ファイル「`<記事タイトル>.md`」を作成できます。
「`HEXOディレクトリ/source/_drafts/`」に作成された記事は「ドラフト(草稿中、作成中)」として扱われるため公開されずに安心して記事を「途中保存」することが出来ます。

2.記事の編集【 「ヘッダ(Front matter)」と「本文(MarkDown記法)」 】

hexoの記事ファイルは、大きく2個の要素(「ヘッダ」と「本文」)で構成されます。

まず1個目の要素「ヘッダ」は「Front matter」と呼ばれる「記事の基本情報」を記述する部分です。

ワンポイント各記事のヘッダ部分(上下を`---`で挟んだ部分)に以下の情報を記述します。 - 記事タイトル(title) - 作成日時(date) - 更新日時(updated) - カテゴリ(category) - タグ(tags) 詳細はHexoドキュメント「Front-matter | Hexo」を参照ください。

具体例として、本記事の「Front matter」を以下に転記します。

---
title: hexoの使い方
date: 2019/5/13 12:27:03
updated: 
category:
    - [HEXO入門]
tags:
    - [独自ドメイン]
    - [SSL証明書]
    - [ブログ]
    - [無料]
    - [簡単]
    - [GCP]
    - [GAE]
    - [HEXO]
---

次に2個目の要素「本文」は「MarkDown記法」で記述する部分です。
本文はHTML言語で記述するのではなく、MarkDown記法で記事を作成、編集します。
具体例として、本記事の「本文(MarkDown記法)~抜粋~」を以下に転記します。

ダディ伯爵が<strong class="marker_yellow">GCPで独自ドメインSSL対応ブログを無料で簡単に</strong>立ち上げた方法を分かりやすく解説します。
本記事では「hexoの使い方」について記載します。
<!-- more -->

HEXOインストールについては「GCP独自ドメインSSLブログが無料で使える(3)HEXO環境構築」をご確認ください。

## 1.ドラフト記事の作成【 hexo new draft <記事タイトル> 】
`hexo new draft <記事タイトル>`コマンドにて記事を作成します。

(後略)
ワンポイントHTMLタグで記述するよりも`可読性に優れている`ので、HTML初心者でもすぐに理解が出来ると思います。`MarkDown記法`については、たくさんの方が記事を書かれているのでGoogle先生に聞いてみてください。 Google - MarkDown記法

3.記事の確認【 hexo server --drafts

記事が正しく表示されるかを確認するため「hexo server --drafts」コマンドを実行します。
「http://localhost:4000」をクリックすると「開発環境WEBサーバ」上の「コンテンツ(公開済も含む)」が表示されます。

daddy_trevia ~/hexo $ hexo server --drafts
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

「開発環境WEBサーバ」を終了するときは「Ctrl+C」を押下します。

ワンポイントよく紹介されている「`hexo server`」コマンドではなく、コマンドオプション「`--drafts`」を付け「`hexo server --drafts`」コマンドにすることで「公開記事」と合わせて「ドラフト記事(草稿中、作成中)」も表示させることが出来ます。

4.ドラフト記事(草稿中、作成中)を公開する【 hexo publish post <記事タイトル>

hexo publish post <記事タイトル>」コマンドにてドラフト記事(草稿中、作成中)を「公開ディレクトリ」へ移動します。

daddy_trevia ~/hexo $ hexo publish post test
INFO  Published: ~/hexo/source/_posts/test.md
daddy_trevia ~/hexo $
ワンポイント「`hexo publish post <記事タイトル>`」コマンドを実行すると「`HEXOディレクトリ/source/_drafts/`」から「`HEXOディレクトリ/source/_posts/`」へコマンドで指定した記事が移動されます。
逆に「`HEXOディレクトリ/source/`」から「`HEXOディレクトリ/source/_drafts/`」へ移動するHEXOコマンドはありませんが、ファイル操作(ドラッグ&ドロップ)にて行えます。

5.静的サイトを生成する【 hexo generate

hexo generate」コマンドで静的サイトをジェネレート(生成)します。

daddy_trevia ~/hexo $ hexo generate
INFO  Start processing
INFO  Files loaded in 1.12 s
INFO  Generated: atom.xml
INFO  Generated: post-sitemap.xml
INFO  Generated: page-sitemap.xml
INFO  Generated: sitemap.xsl
INFO  Generated: sitemap.xml
INFO  Generated: content.json
INFO  Generated: robots.txt
INFO  Generated: index.html
(中略)
INFO  Generated: css/style.css
INFO  Generated: img/logo1.jpg
INFO  129 files generated in 3.18 s
daddy_trevia ~/hexo $
ワンポイント「`hexo generate`」コマンドを実行すると「`HEXOディレクトリ/source/_posts/`」を元に「`HEXOディレクトリ/public/`」に静的サイトが出力されます。

6.静的サイトをアップロードする【 gcloud app deploy

gcloud app deploy」コマンドで本番環境へ静的サイトをアップロードします。

daddy_trevia ~/hexo $ gcloud app deploy
Services to deploy:
descriptor:      [/home/daddy_trevia/hexo/app.yaml]
source:          [/home/daddy_trevia/hexo]
target project:  [XXXXXXXX]
target service:  [default]
target version:  [20190415t203156]
target url:      [https://XXXXXXXX.appspot.com]

Do you want to continue (Y/n)?  y
Beginning deployment of service [default]...
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 129 files to Google Cloud Storage              ═╣
╚════════════════════════════════════════════════════════════╝
File upload done.
Updating service [default]...done.
Setting traffic split for service [default]...done.
Deployed service [default] to [https://XXXXXXXX.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse --project=XXXXXXXX
daddy_trevia ~/hexo $

数分後にプロンプト($)が返ってくるので「gcloud app browse」で動作確認URLを表示します。

ワンポイント「`gcloud app deploy`」コマンドを実行すると「`HEXOディレクトリ/public/`」がGAE上にアップロードされ、新しいバージョンとして公開されます。

以上で「開発環境で記事を作成し本番環境へ適用する流れ」を理解できたかと思います。
あとはひたすら「記事を書く」→「動作確認」→「本番環境適用」を繰り返すのみです。
頑張ってください。
なお、文字の色や大きさ、背景の色、幅等、見栄えを変えたい場合は「hexoのカスタマイズをしてみた」へ進んでください。
コンテンツがある程度出来上がった方は、「GCP独自ドメインSSLブログが無料で使える(4)独自ドメインSSL設定」へ戻りましょう。


 Previous
hexoのカスタマイズをしてみた hexoのカスタマイズをしてみた
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。本記事では「hexoのカスタマイズ」について記載します。↓コードの部分の表示がindigoだとうまく表示されたのにmateryだおかしくな
2019年05月13日
Next 
GCP独自ドメインSSLブログが無料で使える(8)まとめとあとがき GCP独自ドメインSSLブログが無料で使える(8)まとめとあとがき
ダディ伯爵がGCPで独自ドメインSSL対応ブログを無料で簡単に立ち上げた方法を分かりやすく解説します。 本記事では「(8)まとめとあとがき」について記載します。 カテゴリ:GCP独自ドメインSSLブログが無料で使える【GAE×Hexo】
  TOC