GCP独自ドメインSSLブログが無料で使える（3）HEXO環境構築

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

カテゴリ：GCP独自ドメインSSLブログが無料で使える【GAE×Hexo】合わせて読みたい

• GCP独自ドメインSSLブログが無料で使える（1）対象読者と前提条件
• GCP独自ドメインSSLブログが無料で使える（2）GCP、GAE環境構築
• GCP独自ドメインSSLブログが無料で使える（3）HEXO環境構築
• GCP独自ドメインSSLブログが無料で使える（4）独自ドメインSSL設定
• GCP独自ドメインSSLブログが無料で使える（5）アナリティクス
• GCP独自ドメインSSLブログが無料で使える（6）サーチコンソール
• GCP独自ドメインSSLブログが無料で使える（7）アドセンス
• GCP独自ドメインSSLブログが無料で使える（8）まとめとあとがき

本記事の作業は、1時間程度で終わると思います。作業が終われば、GAEとHEXOでコンテンツ制作するための環境が出来上がります。ササっと必要な環境を整えましょう。

注意HEXOテーマ「indigo」での手順となっています。違うテーマを選択される際は、適宜、読み替えてください。

1.HEXOインストール [所要時間：5分～]

ワンポイントcloudshellを起動すると黒い画面が出てきます。黒い画面に慣れていない方は少し不安になるかもしれませんが、1個づつ確実に進めて頂ければ大丈夫です。 その黒い画面にコマンドを入力することでインストール作業を行います。以下の手順に従って、各コマンドを「コピー」→「ペースト」→「Enterキー押下」を繰り返してください。

1-1.本体インストール

①mkdir hexo && cd hexo && hexo initコマンドを入力し、Enterキーを押下します。
　16秒ぐらいで終わります。npm WARN ～が2行出ますが動作上問題はありません。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~ $ mkdir hexo && cd hexo && hexo init
INFO  Cloning hexo-starter to ~/hexo
Cloning into '/home/daddy_trevia/hexo'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 71 (delta 0), reused 0 (delta 0), pack-reused 68
Unpacking objects: 100% (71/71), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into '/home/daddy_trevia/hexo/themes/landscape'...
remote: Enumerating objects: 16, done.
remote: Counting objects: 100% (16/16), done.
remote: Compressing objects: 100% (13/13), done.
remote: Total 893 (delta 3), reused 12 (delta 2), pack-reused 877
Receiving objects: 100% (893/893), 2.56 MiB | 1.87 MiB/s, done.
Resolving deltas: 100% (466/466), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.8 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.8: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 421 packages from 504 contributors and audited 4697 packages in 16.79s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
INFO  Start blogging with Hexo!
daddy_trevia ~/hexo $

ワンポイント以降`/home/daddy_trevia/hexo/`を「HEXOディレクトリ」と記載します。 `pwd`コマンドを入力しEnterキーを押下したら現在のディレクトリを確認できます。 「HEXOディレクトリ」で作業してください！との記述が以降、多数出てきますが、毎回`pwd`コマンドで確認するようにしてください。 違うディレクトリとなっている場合は`cd /home/daddy_trevia/hexo/`を入力しEnterキーを押下してください。 ユーザー名`daddy_trevia`は、ご自身の環境に読み替えてください。

1-2.テーマをインストール

本体インストールが完了したら、続いてプラグインとテーマをインストールします。indigoに記載されている手順に従って作業を行います。すべて「HEXOディレクトリ」で実行してください。

①git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigoコマンドを入力し、Enterキーを押下します。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

②npm install hexo-renderer-less --saveコマンドを入力し、Enterキーを押下します。
　10秒ぐらいで終わります。npm WARN ～が2行出ますが動作上問題はありません。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ npm install hexo-renderer-less --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-renderer-less@1.0.0
added 52 packages from 118 contributors and audited 4781 packages in 10.329s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
daddy_trevia ~/hexo $

③npm install hexo-generator-feed --saveコマンドを入力し、Enterキーを押下します。
　6秒ぐらいで終わります。npm WARN ～が2行出ますが動作上問題はありません。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ npm install hexo-generator-feed --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-generator-feed@1.2.2
added 1 package from 1 contributor and audited 6932 packages in 6.274s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
daddy_trevia ~/hexo $

④npm install hexo-generator-json-content --saveコマンドを入力し、Enterキーを押下します。
　8秒ぐらいで終わります。npm WARN ～が2行出ますが動作上問題はありません。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ npm install hexo-generator-json-content --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-generator-json-content@4.1.3
added 6 packages from 24 contributors and audited 6954 packages in 8.335s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
daddy_trevia ~/hexo $

⑤npm install hexo-helper-qrcode --saveコマンドを入力し、Enterキーを押下します。
　7秒ぐらいで終わります。npm WARN ～が2行出ますが動作上問題はありません。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ npm install hexo-helper-qrcode --save
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ hexo-helper-qrcode@1.0.2
added 2 packages from 2 contributors and audited 6956 packages in 7.242s
found 3 vulnerabilities (2 low, 1 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
daddy_trevia ~/hexo $

⑥hexo new page tagsコマンドを入力し、Enterキーを押下します。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ hexo new page tags

⑦HEXOディレクトリ/source/tags/index.mdを以下の内容に変更し保存します。

---
title: tags
date: 2019-04-01 21:52:34
layout: tags
comments: false
---

⑧hexo new page categoriesコマンドを入力し、Enterキーを押下します。
　「プロンプト（$）」が表示されたら次に進んでください。

daddy_trevia ~/hexo $ hexo new page categories

⑨HEXOディレクトリ/source/categories/index.mdを以下の内容に変更し保存します。

---
title: categories
date: 2019-04-01 21:52:51
layout: categories
comments: false
---

2.Hexo環境設定 [所要時間：5分～]

2-1.初期設定、テーマ変更

HEXOディレクトリ/_config.ymlを適宜、編集します。

注意_config.ymlの各設定値の「:（コロン）」の後は必ず「 （半角スペース）」が必要！！ダディ伯爵も最初は何度かハマりました。

①基本情報を設定します。

title: DADDYTREVIA
subtitle: ダディ伯爵のトレビアンなトリビア（知識の泉）
description: 難解な技術用語を分かりやすく噛み砕き発信します。
keywords: 無料,ブログ,簡単,おすすめ
author: ダディ伯爵
language: ja
timezone: Asia/Tokyo

②URLを設定します。

url: https://daddytrevia.com

③テーマを設定します。
　ダディ伯爵は、themeのデフォルトはlandscapeですがindigoとしています。

theme: indigo

2-2.テーマ初期設定

HEXOディレクトリ/themes/indigo/_config.ymlを適宜、編集します。

注意_config.ymlの各設定値の「:（コロン）」の後は必ず「 （半角スペース）」が必要！！ダディ伯爵も最初は何度かハマりました。

①ロゴ画像を設定します。
見て頂ければ、何を設定すればよいかは推測できると思います。
画像ファイルはHEXOディレクトリ/themes/indigo/source/img/にドラッグアンドドロップします。

# ロゴ
avatar: /img/logo.jpg
# avatar link
avatar_link: /
# ロゴ背景
brand: /img/brand.jpg
# favicon
favicon: /img/logo.jpg

2-3.ロゴファイルの変更

上記の内容と重なりますが、HEXOディレクトリ/themes/indigo/source/img/に上記で設定した画像ファイルをドラッグアンドドロップします。

3.開発環境のBash設定 [所要時間：5分～]

①開発環境のBash設定を行います。
　「.bash_profile」を新規作成し以下の内容の通りとします。

注意ユーザー名`daddy_trevia`は、ご自身の環境に読み替えてください。

export PATH=$PATH:/home/daddy_trevia/hexo/node_modules/hexo/node_modules/hexo-cli/bin
export PS1='\u \w \$ '

cd $HOME
touch .bash_profile
echo export PATH=\$PATH:$HOME/hexo/node_modules/hexo/node_modules/hexo-cli/bin >.bash_profile
echo export PS1='\u \w \$ ' >>.bash_profile
cat .bash_profile

4.GAE環境設定 [所要時間：5分～]

①Google App Engineの設定を行います。
　「app.yaml」を新規作成し以下の内容の通りとします。

注意ユーザー名`daddy_trevia`は、ご自身の環境に読み替えてください。

runtime: nodejs10
service: default

#インスタンスパラメータ（任意）
instance_class: F1
automatic_scaling:
  min_instances: 0
  max_instances: 2

default_expiration: "5m"

handlers:
- url: /
  secure: always
  redirect_http_response_code: 301
  static_files: public/index.html
  upload: public/index.html

- url: /(.*)/$
  secure: always
  redirect_http_response_code: 301
  static_files: public/\1/index.html
  upload: public/(.*)/index.html

- url: /(.*)
  secure: always
  redirect_http_response_code: 301
  static_files: public/\1
  upload: public/(.*)

②Google App Engineへアップロードしないフォルダ、ファイルの設定を行います。
　以下のコマンドを順にコピーアンドペーストし「.gcloudignore」を作成します。

daddy_trevia ~/hexo $ touch .gcloudignore
daddy_trevia ~/hexo $ echo node_modules/ >>.gcloudignore
daddy_trevia ~/hexo $ echo scaffolds/ >>.gcloudignore
daddy_trevia ~/hexo $ echo source/ >>.gcloudignore
daddy_trevia ~/hexo $ echo themes/ >>.gcloudignore
daddy_trevia ~/hexo $ echo _config.yml >>.gcloudignore
daddy_trevia ~/hexo $ echo app.yaml >>.gcloudignore
daddy_trevia ~/hexo $ echo db.json >>.gcloudignore
daddy_trevia ~/hexo $ echo package.json >>.gcloudignore
daddy_trevia ~/hexo $ echo package-lock.json >>.gcloudignore
daddy_trevia ~/hexo $ echo .gcloudignore >>.gcloudignore
daddy_trevia ~/hexo $ echo .gitignore >>.gcloudignore
daddy_trevia ~/hexo $ cat .gcloudignore
node_modules/
scaffolds/
source/
themes/
_config.yml
app.yaml
db.json
package.json
package-lock.json
.gcloudignore
.gitignore
daddy_trevia ~/hexo $

以上で、GCP上のGAE開発環境（Hexo）の構築完了です。お疲れさまでした。

引き続き、開発環境で記事を作成し、本番環境へ適用する流れについては「hexoの使い方」へ進んでください。
なお、レイアウトを変えたい場合は「hexoのカスタマイズをしてみた」へ進んでください。
違うテーマを選びたい方は「hexoのテーマの選び方」へ進んでください。

カテゴリ：GCP独自ドメインSSLブログが無料で使える【GAE×Hexo】合わせて読みたい

• GCP独自ドメインSSLブログが無料で使える（1）対象読者と前提条件
• GCP独自ドメインSSLブログが無料で使える（2）GCP、GAE環境構築
• GCP独自ドメインSSLブログが無料で使える（3）HEXO環境構築
• GCP独自ドメインSSLブログが無料で使える（4）独自ドメインSSL設定
• GCP独自ドメインSSLブログが無料で使える（5）アナリティクス
• GCP独自ドメインSSLブログが無料で使える（6）サーチコンソール
• GCP独自ドメインSSLブログが無料で使える（7）アドセンス
• GCP独自ドメインSSLブログが無料で使える（8）まとめとあとがき

人気記事

• GCP認定資格「Associate Cloud Engineer」を受験するための勉強方法
• 社内PCからRDP接続するために中継サーバ（Guacamole）をdockerコンテナで立ててみた
• GCPのAlways FreeのGAE無料枠を使ってみた
• クレカ不要でGCPを始めよう「Qwiklabs」が無料で使える♪
• Google Domains 日本で独自ドメインを取得するメリット

カテゴリ：HEXO入門合わせて読みたい

• hexoのテーマの選び方
• hexoの使い方
• hexoのカスタマイズをしてみた
• hexoでsitemap.xmlを自動生成する方法
• hexoでrobots.txtlを自動生成する方法
• hexoでatom.xmlを自動生成する方法