はじめに

Hexo + GitHub + Netlify でブログを作って公開するまでの手順をまとめる。

手探りで進めたので、設定できてるけどそうじゃない、みたいな項目が結構あるかもしれない。

2019/09/29 16:40 時点で執筆途中、随時追記中

TL;DR

  • 基本的に公式手順通りに進めれば OK
  • 手順整理したから参考にしてね
  • Hexo(SSG) + GitHub + Netlify はいいぞ

目的・やったこと

Hexo + GitHub + Netlify でこのブログを作ったので、その手順をまとめておく。

ブログテーマは Tranquilpeak を使用。ちょっと細かい箇所をいくつかカスタマイズしてある。

ドメインは Google Domains で取得。某お◯前ドットコム みたいに無駄なメールが来ないので良い。

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 目的・やったこと
  4. 環境・条件
  5. 前提知識
    1. Hexo
    2. GitHub
    3. Netlify
  6. 詳細
    1. Hexo インストール
    2. ブログ作成(ローカル)
      1. ひな形作成
      2. ブログ設定
      3. テーマ変更
    3. tranquilpeak カスタマイズ
      1. post_asset_folder
      2. RSS Feed 導入
      3. sitemap 導入
      4. Algolia による検索有効化
      5. 固定ページ 作成
      6. Google Analytics 設定
      7. 404 ページ 作成
      8. 記事ページでもサイドバーを常に表示
      9. ファビコン 設定
      10. シェアボタン
      11. サイドバーの表示項目 変更
      12. サイドバーの背景画像 変更
      13. サイドバーの CSS 変更
      14. サイドバーにブログタイトル、サブタイトル追加
      15. <title> にサブタイトルを追加
      16. カスタムフォントの導入
      17. 記事の投稿日時の表示フォーマット変更
      18. 記事の更新日時を追加
      19. 投稿日時、更新日時、カテゴリの前にアイコンフォント追加
    4. その他 カスタマイズ
      1. 記事フォーマットの 追加/編集
      2. Disqus の追加
    5. ブログ公開(Netlify)
      1. リポジトリ作成
      2. ソースコード登録
      3. Netlify と GitHub を連携する
      4. Algolia の設定
      5. サイト名 変更
      6. Search Console
      7. タイムゾーン
      8. Deploy Notification
  7. その他・メモ
  8. 参考文献

環境・条件

ブログ環境 を参照

前提知識

Hexo

静的サイトジェネレータ(SSG: Static Site Generator)。HTML + CSS + JavaScript(JS) だけで構成されるウェブサイトを簡単に作れるツール。

Hexo は Node.js 製。他にも React を使っている Gatsby や、Golang 製の Hugo などがある。

StaticGen で一覧見れる。

GitHub

言わずとしれた Git ホスティングサービス。今回はブログ本体を格納するのに使う。

Netlify

静的サイトのホスティングサービス、超速い(らしい)。今回はブログを公開するのに使う。

詳細

Hexo インストール

Node.js, Git は導入してある前提で進める。なお、公式手順はこちら。

npm で hexo-cli をインストールしておしまい。

1
npm install -g hexo-cli

ブログ作成(ローカル)

ひな形作成

公式手順

まずはブログひな形を作る、以下の3コマンドでおしまい

1
2
3
hexo init YourBlogName
cd YourBlogName
npm install

npm install が終わったらいったん commit しておくのをオススメする。

1
2
git add -A
git commit -m "init"

hexo s でローカルサーバを立ち上げて、http://localhost:4000 にアクセスするとブログができてるはず。

初期状態

ブログ設定

ブログタイトルなどの設定を変更する。

詳細は Configuration | Hexo を参照。

タイトル・サブタイトル

YourBlogName/_config.yml の title, subtitle を変更。

1
2
title: to-me-mo-rrow
subtitle: 未来の自分に残すメモ
言語・タイムゾーン 設定

YourBlogName/_config.yml の language, timezone を変更。

1
2
language: ja
timezone: Asia/Tokyo
その他

YourBlogName/_config.yml の description, keywords, author などを変更。

テーマ変更

デフォルトテーマは何かアレなので、色々と探して tranquilpeak に変更することにした。

私は tranquilpeak を使うことにしたが、他のテーマを使いたい人は Themes に色々とあるので探すと良い。HexoでBlogを書くためのオススメtheme(テーマ)一覧|おちゃカメラ。 も参考になると思う。

公式手順

公式リポジトリ から zip ファイルをダウンロードして展開。

ブラウザで DL した人は適宜ファイル名などを読み替えてほしい。自分の環境ではなぜか unzip が失敗したので GUI から展開した。

1
2
3
curl https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/archive/master.zip --create-dirs -o themes/tranquilpeak.zip
cd themes
unzip tranquilpeak.zip

展開したら zip ファイルは不要なので削除し、展開後のディレクトリをリネーム。

1
2
rm tranquilpeak.zip
mv hexo-theme-tranquilpeak-master tranquilpeak

リネームしたら YourBlogName/themes 配下に tranquilpeak がある構成になっているはず。

themes/tranquilpeak に移動して、インストール＆ビルド。

1
2
cd tranquilpeak
npm install && npm run prod

あとは YourBlogName/_config.yml に theme という項目があるので、それを変更する。

1
2
-theme: landscape
+theme: tranquilpeak

(ローカルサーバが起動している場合には Ctrl + C で停止してから、)hexo s でローカルサーバを起動して http://localhost:4000 にアクセスするとテーマが変わっているはず。起動できない場合はカレントディレクトリが間違ってる可能性がある、YourBlogName で hexo s を実行すること。

確認できたら例によって commit しておこう。(コマンド省略)

tranquilpeak カスタマイズ

テーマは変わったが、まだやることがあるので 公式手順 通りに進める。

その他、見た目に関する部分などを少しいじる。

post_asset_folder

YourBlogName/_config.yml の post_asset_folder を true に。

1
2
-post_asset_folder: false
+post_asset_folder: true

RSS Feed 導入

hexo-generator-feed プラグインをインストール。これも YourBlogName ディレクトリで実行すること、YourBlogName/themes/tranquilpeak の実行でないことに注意。

1
npm install hexo-generator-feed --save

YourBlogName/_config.yml に以下を追加。limit は適宜変更。

1
2
3
4
feed:
    type: atom
    path: atom.xml
    limit: 20

その他、細かい設定は hexojs/hexo-generator-feed: Feed generator for Hexo. を参照。

sitemap 導入

hexo-generator-sitemap プラグインをインストール。これも YourBlogName ディレクトリで実行すること。

1
$ npm install hexo-generator-sitemap --save

YourBlogName/_config.yml に以下を追加。

1
2
sitemap:
    path: sitemap.xml

追加後、hexo g して http://localhost:4000/sitemap.xml にアクセスして確認。

1
$ hexo clean && hexo g

※hexo-generator-seo-friendly-sitemap もあるので、お好みで設定すると良さそう。

Algolia による検索有効化

公式手順

Algolia でアカウントを作成。作成後、Endpoint をどこにするかとか色々と聞かれるので、適当に設定。

Dashboard に移動し、Index 名を適当に設定する。後で使うので覚えておく。

hexo-algoliasearch プラグインをインストール。これも YourBlogName ディレクトリで実行。

1
$ npm install hexo-algoliasearch --save

YourBlogName/_config.yml に algolia の設定を追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
algolia:
  appId: "YourAppId"
  apiKey: "YourApiKey"
  adminApiKey: "YourAdminApiKey"
  chunkSize: 5000
  indexName: "YourIndexName"
  fields:
    - title
    - tags
    - date
    - categories
    - excerpt
    - permalink
    - thumbnailImageUrl

appId, apiKey, adminApiKey は Dashboard 左側の「API Keys」ページにアクセスしたら表示される。

hexo algolia を実行するとインデックスが作成できるが、ローカルで実行すると Git 上にアップロードしていない記事についてもインデックス作成されてしまうので、後ほど Netlify でビルド成功後に実行するようにする。

固定ページ 作成

カテゴリ一覧、タグ一覧、記事一覧 の固定ページを作る。

hexo new page コマンドで固定ページ作成。ちなみに hexo new もしくは hexo new post で記事作成、hexo new draft で下書き作成ができる。

1
hexo new page all-categories

source/all-categories/index.md ができるので、以下に変更して保存。

1
2
3
4
5
---
title: "all-categories"
layout: "all-categories"
comments: false
---

同じように hexo new page all-tags, hexo new page all-archives で作って、書き換えて保存する。

1
2
hexo new page all-tags
hexo new page all-archives

source/all-tags/index.md

1
2
3
4
5
---
title: "all-tag"
layout: "all-tag"
comments: false
---

source/all-archives/index.md

1
2
3
4
5
---
title: "all-archives"
layout: "all-archives"
comments: false
---

Google Analytics 設定

YourBlogName/themes/tranquilpeak/_config.yml に設定箇所があるので、自分の ID を設定

1
google_analytics_id: UA-12345678-9

公式手順 を見て、Google Analytics で localhost を除外するように設定。

404 ページ 作成

YourBlogName/source/404.md を作成。

1
2
3
4
5
6
7
---
title: ページが見つかりません
meta: false
actions: false
comments: false
---
![404 NOT FOUND](assets/images/404.png)

画像は安定のいらすとやで DL して、YourBlogName/source/assets/images/404.png に配置した。

記事ページでもサイドバーを常に表示

デフォルトだと、記事ページではサイドバーが表示されない設定になっているが、常にサイドバーを出すように変更する。

themes/tranquilpeak/_config.yml の clear_reading を false に設定する。

1
2
-clear_reading: true
+clear_reading: false

ファビコン 設定

デフォルトだと地球みたいなファビコンなので変更する。

元画像は Canva で 128x128 で作成、とりあえず大きめで作っておけば良いと思う。

ファビコン

この画像を使って、ファビコン作成 で favicon.ico に変換。

変換したファイルを以下に配置。

  • themes/tranquilpeak/source/_images/favicon.ico
  • themes/tranquilpeak/source/assets/images/favicon.ico

配置したら themes/tranquilpeak/_config.yml の favicon を変更。

シェアボタン

デフォルトで SNS へのシェアボタンがあるが、(一般ユーザー向け)Google+ はサービス終了したので非表示にする。

ついでに、適切なフォントは無いけどはてなブックマークへのシェアボタンを適当に追加する。

themes/tranquilpeak/_config.yml を編集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@@ -275,9 +275,9 @@ sharing_options:
     twitter:
         icon: "fab fa-twitter"
         url: "https://twitter.com/intent/tweet?text={{post.permalink}}"
-    google_plus:
-        icon: "fab fa-google-plus"
-        url: "https://plus.google.com/share?url={{post.permalink}}"
+    # google_plus:
+    #     icon: "fab fa-google-plus"
+    #     url: "https://plus.google.com/share?url={{post.permalink}}"
     # Asian social networks
 #    weibo:
 #        title: "Weibo"
@@ -304,3 +304,6 @@ sharing_options:
 #        title: "Odnoklassniki"
 #        icon: "fab fa-odnoklassniki"
 #        url: "https://connect.ok.ru/offer?url={{post.permalink}}"
+    hatena:
+        icon: "fas fa-bookmark"
+        url: "https://b.hatena.ne.jp/entry/panel/?url={{post.permalink}}&share=hatena&nb=1"

このままだとマウスホバー時のメッセージなどが出てこないので、 themes/tranquilpeak/languages/ja.yml を編集。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@@ -19,6 +19,7 @@ global:
     linkedin: "LinkedIn"
     mail: "メール"
     rss: "RSS"
+    hatena: "はてなブックマーク"
     share_on_facebook: "Facebookで共有"
     share_on_twitter: "Twitterで共有"
     share_on_google_plus: "Google+で共有"
@@ -28,6 +29,7 @@ global:
     share_on_renren: "Renrenで共有"
     share_on_vk: "VKで共有"
     share_on_odnoklassniki: "Odnoklassnikiで共有"
+    share_on_hatena: "はてなブックマークで共有"
     search_category: "カテゴリー検索"
     search_tag: "タグ検索"
     search_date: "日付検索 (YYYY/MM/DD)"

スマホなどでシェアボタンを表示したときのマージンを調整する。

themes/tranquilpeak/source/_css/components/_share-options-bar.scss を編集、.share-option-btn の中に Font Awesome 向けの margin-right があるので fas も対象に追加する。

1
2
3
4
5
6
7
8
@@ -48,6 +48,7 @@
                padding: 10px 0 10px 0;

                .fa,
+               .fas,
                .fab {
                    margin-right: 15px;
                }

変更後は themes/tranquilpeak で npm run prod。

1
cd themes/tranquilpeak && npm run prod && cd -  # 面倒くさいのでワンライナーで

サイドバーの表示項目 変更

デフォルトだと Stack Overflow など全部盛りで表示されているが、不要なリンクは非表示にしたい。

themes/tranquilpeak/_config.yml を変更する。

  • 表示したい項目へのリンク(ユーザー名など)を追加
  • 非表示にしたい項目のコメントアウト
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
     author_links:
         github:
             title: global.github
-            url: https://github.com/
+            url: https://github.com/17number
             icon: fab fa-github
-        stack_overflow:
-            title: global.stack_overflow
-            url: http://stackoverflow.com/users
-            icon: fab fa-stack-overflow
-        twitter:
-            title: global.twitter
-            url: https://twitter.com/
-            icon: fab fa-twitter
-        facebook:
-            title: global.facebook
-            url: https://facebook.com/
-            icon: fab fa-facebook
-        google_plus:
-            title: global.google_plus
-            url: https://plus.google.com/
-            icon: fab fa-google-plus
-        linked_in:
-            title: global.linkedin
-            url: https://www.linkedin.com/profile/
-            icon: fab fa-linkedin
-        mail:
-            title: global.mail
-            url: mailto
-            icon: fa fa-envelope
+        # stack_overflow:
+        #     title: global.stack_overflow
+        #     url: http://stackoverflow.com/users
+        #     icon: fab fa-stack-overflow
+        # twitter:
+        #     title: global.twitter
+        #     url: https://twitter.com/
+        #     icon: fab fa-twitter
+        # facebook:
+        #     title: global.facebook
+        #     url: https://facebook.com/
+        #     icon: fab fa-facebook
+        # google_plus:
+        #     title: global.google_plus
+        #     url: https://plus.google.com/
+        #     icon: fab fa-google-plus
+        # linked_in:
+        #     title: global.linkedin
+        #     url: https://www.linkedin.com/profile/
+        #     icon: fab fa-linkedin
+        # mail:
+        #     title: global.mail
+        #     url: mailto
+        #     icon: fa fa-envelope

サイドバーの背景画像 変更

以下の手順で変更できる

  • YourBlogName/source/assets/images/ に好きなファイルを設置
  • YourBlogName/themes/tranquilpeak/_config.yml の cover_image を書き換え

サイドバーの CSS 変更

サイドバーの文字が読みづらいので、text-shadow で文字を縁取りしつつ、文字の太さを変更。設定箇所が2箇所あるので注意。

  • 編集ファイル:
    • themes/tranquilpeak/source/_css/utils/mixins/_sidebar.scss
  • 編集箇所:
    • .sidebar-button-desc
1
2
3
4
5
6
7
8
9
10
11
12
                 // Description (name) of a link
                 .sidebar-button-desc {
                     display:        inline-block;
                     width:          auto;
                     height:         35px;
                     line-height:    35px;
                     font-size:      1.5rem;
                     letter-spacing: 0.3px;
                     vertical-align: middle;
+                    text-shadow: rgba(0, 0, 0, 0.8) 0 0 1px, rgba(0, 0, 0, 0.8) 0 0 3px;
+                    font-weight: 600;
                 }

変更後は themes/tranquilpeak で npm run prod。

1
cd themes/tranquilpeak && npm run prod && cd -  # 面倒くさいのでワンライナーで

サイドバーにブログタイトル、サブタイトル追加

サイドバーにブログタイトルと、サブタイトルを表示するように変更。

ブログタイトル

まずは themes/tranquilpeak/layout/_partial/sidebar.ejs を編集。

1
2
3
4
5
6
7
8
9
10
11
12
 <nav id="sidebar" data-behavior="<%= sidebarBehavior %>">
+    <div class="sidebar-header">
+        <a href=<%= config.url %>>
+            <h1 class="sidebar-title">
+                <%= config.title %>
+            </h1>
+            <h2 class="sidebar-subtitle">
+                - <%= config.subtitle %> -
+            </h2>
+        </a>
+    </div>
     <div class="sidebar-container">

表示箇所を追加したら themes/tranquilpeak/source/_css/utils/mixins/_sidebar.scss でスタイルを調整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
@@ -2,6 +2,16 @@
 @mixin sidebar-md {
     width: map-get($sidebar, md-screen-width);

+    // Blog title and subtitle
+    .sidebar-header {
+        .sidebar-title {
+            display: none;
+        }
+        .sidebar-subtitle {
+            display: none;
+        }
+    }
+
     // Author information
     .sidebar-profile {
         .sidebar-profile-picture {
@@ -52,6 +60,38 @@
 @mixin sidebar-lg {
     width: map-get($sidebar, lg-screen-width);

+    // Blog title and subtitle
+    .sidebar-header {
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.8) 0 0 1px, rgba(0, 0, 0, 0.8) 0 0 3px;
+        a {
+            text-decoration: none;
+        }
+
+        .sidebar-title {
+            color: map-get($sidebar, color);
+            margin: 0;
+            padding-top: 10px;
+            padding-bottom: 10px;
+            &:hover,
+            &:active {
+                text-decoration: none;
+                color:           lighten(map-get($sidebar, color), 35);
+            }
+        }
+        .sidebar-subtitle {
+            color: map-get($sidebar, color);
+            margin: 0;
+            padding-bottom: 10px;
+            font-size: 1.6rem;
+            &:hover,
+            &:active {
+                text-decoration: none;
+                color:           lighten(map-get($sidebar, color), 35);
+            }
+        }
+    }
+
     // Author information
     .sidebar-profile {
         height:         130px;
@@ -127,6 +167,38 @@
         position: relative;
         padding:  0 80px;
     }
+
+    // Blog title and subtitle
+    .sidebar-header {
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.8) 0 0 1px, rgba(0, 0, 0, 0.8) 0 0 3px;
+        a {
+            text-decoration: none;
+        }
+
+        .sidebar-title {
+            color: map-get($sidebar, color);
+            margin: 0;
+            padding-bottom: 10px;
+            &:hover,
+            &:active {
+                text-decoration: none;
+                color:           lighten(map-get($sidebar, color), 35);
+            }
+        }
+        .sidebar-subtitle {
+            color: map-get($sidebar, color);
+            margin: 0;
+            padding-bottom: 20px;
+            font-size: 1.6rem;
+            &:hover,
+            &:active {
+                text-decoration: none;
+                color:           lighten(map-get($sidebar, color), 35);
+            }
+        }
+    }
+
     // Author information
     .sidebar-profile {
         padding-top:    0;

変更後は themes/tranquilpeak で npm run prod。

1
cd themes/tranquilpeak && npm run prod && cd -  # 面倒くさいのでワンライナーで

<title> にサブタイトルを追加

タイトルバー等に表示される <title> に、サブタイトルを追加。

themes/tranquilpeak/layout/_partial/head.ejs を編集。

1
2
3
4
5
6
7
8
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="generator" content="<%= config.title %>">
-    <title><%= title %></title>
+    <title><%= title %> - <%= config.subtitle %> - </title>
     <meta name="author" content="<%= config.author %>">
     <% if (keywords) { %>
         <meta name="keywords" content="<%= keywords %>">

変更後は themes/tranquilpeak で npm run prod。

1
cd themes/tranquilpeak && npm run prod && cd -  # 面倒くさいのでワンライナーで

カスタムフォントの導入

Tranquilpeak Hexo theme demo や 日本語テスト - Tranquilpeak Hexo theme demo と比較するとわかるが、デフォルトのものからフォントを変更した。

使用したフォントは下記。

今回はフォントのビルドなどはせず、CDN で配信されているものをそのまま読み込む。

themes/tranquilpeak/layout/_partial/head.ejs を編集し、適当な位置に以下を追加。

1
2
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.207/distr/fira_code.css">

themes/tranquilpeak/source/_css/utils/_variables.scss を編集し、フォント利用箇所を設定。細かいことを考えるのが面倒だったので、全て統一することにした。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
--- a/themes/tranquilpeak/source/_css/utils/_variables.scss
+++ b/themes/tranquilpeak/source/_css/utils/_variables.scss
@@ -6,23 +6,25 @@ $open-sans:            'Open Sans';
 $open-sans-sans-serif: 'Open Sans', sans-serif;
 $merriweather-serif:   'Merriweather', serif;
 $monospace:             Menlo, Consolas, monospace;
+$firacode:             'Fira Code', monospace;
+$mplus-rounded-1c:     "M PLUS Rounded 1c";

-$font-family-base: $open-sans-sans-serif;
+$font-family-base: $mplus-rounded-1c;

 $font-families: (
    // base
-   'headings':          $open-sans-sans-serif,
+   'headings':          $mplus-rounded-1c,
    // components
-   'code':              $monospace,
-   'caption':           $merriweather-serif,
-   'image-gallery':     $open-sans,
-   'post-header-cover': $merriweather-serif,
-   'post-meta':         $open-sans-sans-serif,
-   'post-content':      $merriweather-serif,
-   'post-excerpt-link': $open-sans-sans-serif,
-   'highlight':         $monospace,
+   'code':              $firacode,
+   'caption':           $mplus-rounded-1c,
+   'image-gallery':     $mplus-rounded-1c,
+   'post-header-cover': $mplus-rounded-1c,
+   'post-meta':         $mplus-rounded-1c,
+   'post-content':      $mplus-rounded-1c,
+   'post-excerpt-link': $mplus-rounded-1c,
+   'highlight':         $firacode,
    // layout
-   'sidebar':           $open-sans-sans-serif
+   'sidebar':           $mplus-rounded-1c
 );

Fira code の合字(リガチャー)を有効化するために、以下の設定を code 部に追加する。編集したファイルは下記。

  • themes/tranquilpeak/source/_css/base/_base.scss
  • themes/tranquilpeak/source/_css/components/_code.scss
1
2
font-feature-settings: "calt" 1;  /* Enable ligatures for IE 10+, Edge */
text-rendering: optimizeLegibility; /* Force ligatures for Webkit, Blink, Gecko */

変更後は themes/tranquilpeak で npm run prod。

1
cd themes/tranquilpeak && npm run prod && cd -  # 面倒くさいのでワンライナーで

記事の投稿日時の表示フォーマット変更

投稿日時が 2019/07/30 のように YYYY/MM/DD までだったので、2019/07/30 12:30 のように YYYY/MM/DD HH:mm までに変更。

themes/tranquilpeak/languages/ja.yml の data_format を変更すれば OK。

1
2
-date_format: "YYYY/MM/DD"
+date_format: "YYYY/MM/DD HH:mm"

記事の更新日時を追加

雑に投稿して、雑に更新していくつもりなので、更新日時も合わせて表示した。

themes/tranquilpeak/layout/_partial/post/meta.ejs を変更。記事の Front-matter に updated がある場合のみ更新日時を表示。ついでに改行コードも追加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
   <time datetime="<%= post.date.format() %>">
   <% if (post.lang) { %>
     <%= post.date.locale(post.lang).format(__('date_format')) %>
   <% } else { %>
     <%= post.date.locale(page.lang).format(__('date_format')) %>
   <% } %>
   </time>
+  <br>
+  <% if (post.updated) { %>
+    <time datetime="<%= post.updated.format() %>">
+    <% if (post.lang) { %>
+      <%= post.updated.locale(post.lang).format(__('date_format')) %>
+    <% } else { %>
+      <%= post.updated.locale(page.lang).format(__('date_format')) %>
+    <% } %>
+    </time>
+    <br>
+  <% } %>

投稿日時、更新日時、カテゴリの前にアイコンフォント追加

投稿日時と更新日時が並んで何の時間か分からないので、アイコンフォント(Font Awesome)を追加した。統一感をもたせるために、カテゴリ部分にも追加。

それぞれ使ったアイコンは下記。

変更するファイルは themes/tranquilpeak/layout/_partial/post/meta.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
+  <i class="fas fa-file-alt"></i>
   <time datetime="<%= post.date.format() %>">
   <% if (post.lang) { %>
     <%= post.date.locale(post.lang).format(__('date_format')) %>
   <% } else { %>
     <%= post.date.locale(page.lang).format(__('date_format')) %>
   <% } %>
   </time>
   <br>
   <% if (post.updated) { %>
+    <i class="fas fa-redo-alt"></i>
     <time datetime="<%= post.updated.format() %>">
     <% if (post.lang) { %>
       <%= post.updated.locale(post.lang).format(__('date_format')) %>
     <% } else { %>
       <%= post.updated.locale(page.lang).format(__('date_format')) %>
     <% } %>
     </time>
     <br>
   <% } %>
   <% if ((post.categories) && (post.categories.length > 0)) { %>
+    <i class="far fa-folder-open"></i>
     <span><%= __('post.categorized_in')  %> </span>
     <%- partial('category', {categories: post.categories})%>
   <% } %>

アイコンフォントの横幅が異なるので CSS(SCSS) で調整、変更ファイルは下記の3つ。

  • themes/tranquilpeak/source/_css/components/_post-header-cover.scss
    • .port-meta 内
  • themes/tranquilpeak/source/_css/components/_post.scss
    • .port-meta 内
  • themes/tranquilpeak/source/_css/components/_postShorten.scss
    • .portShorten-meta 内
1
2
3
4
+         i.fas {
+             width: 14px;
+             text-align: center;
+         }

その他 カスタマイズ

記事フォーマットの 追加/編集

「はじめに」やら「環境」やら、同じようなことを記事作成ごとに書くのはダルいのでフォーマットそのものを変更。post, page, draft の3種類が使えるが、どうせなので技術記事向けには別のフォーマット tech を作ることにした。

まずは単純にコピー。

1
$ cp scaffolds/{post,tech}.md

以下の内容に変更、なお実際は改行がもっと入っている。Front-matter(先頭の title とかの部分) については公式ドキュメントを参照。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
---
title: {{ title }}
date: {{ date }}
updated: {{ date }}
categories:
tags:
---

## はじめに
## TL;DR
- a
- b
- c
## 目的・やったこと
<!-- more -->
<!-- toc -->
## 環境・条件
```bash

```
## 詳細
```

```
## まとめ
## その他・メモ
## 参考文献
- a

これで今後は hexo new tech xxxx とやると、このフォーマットの記事ファイルが作成される。

Disqus の追加

TODO: そのうちやる、Hexo に コメント欄 の Disqus を 設置 | 験なきものを思はずは

ブログ公開(Netlify)

ブログのカスタマイズなどがひととおりできたら、GitHub と Netlify を使って公開する。

リポジトリ作成

今回は GitHub のプライベートリポジトリを使った。Netlify は Bitbucket や GitLab でも連携できるので、好きなサービスを使うとよい。

連携可能サービス

Create a New Repository で、適当に名前をつけてリポジトリを作成する。私は Private にしたけど「別に公開しても困らない」なら Public でも良いと思う。

ソースコード登録

リポジトリを作成したらソースコードをプッシュする。

1
2
$ git remote add origin git@github.com:<yourName>/<yourRepo>.git
$ git push -u origin master

なお、もしも YourBlogName/themes/tranquilpeak/.gitignore が存在している場合には、削除してからプッシュすること。このファイルがあると、公開したブログにテーマが適用されないことがある。

1
2
3
$ rm themes/tranquilpeak/.gitignore
$ git add -A && git commit -m "remove theme's .gitignore"
$ git push

Netlify と GitHub を連携する

Netlify のアカウントを作成したら、New site from Git を押してサイトを作成していく。

サイト作成ボタン

はじめにどの Git サービスを使うか聞かれるので、自分のリポジトリがあるサービスを選ぶ。

Select Git

選んだら「Netlify と連携してもいいか」みたいなことを聞かれたと思うので、適当に同意して進めていく。

Netlify auth

リポジトリ選択画面まできたら、連携したいリポジトリを選択する。が、Private だと出てこないので、一度 Git サービス側のページに移動して設定を行う必要がある。基本的に手順通りに進めれば問題ないはず。

Install Netlify

リポジトリを選んだら、デプロイ(ブログ公開)するブランチなどを選択して Deploy Site を押せば完了。事前にソースコードをプッシュしていれば、Build command などは自動で入っているはず。

これでしばらく待てばブログが公開される、めちゃくちゃ簡単である。

Netlify deployed

Algolia の設定

サイトデプロイ時に hexo algolia を実行してインデックスを生成するようにする。

hexo generate を hexo generate && hexo algolia に変更。

Deploys から最新のリポジトリから手動デプロイが可能なので、必要に応じて試してみると良い。

インデックスの生成に成功すると、Indices で確認できるようになる。

TODO: あとで書く

サイト名 変更

Search Console

タイムゾーン

Deploy Notification

その他・メモ

参考文献

SSG として Hexo 以外の利用も視野に入れていた(何を使うかを決めかねていた)ので、その際に調べたものもまとめて記載。順不同。

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list