ぼくのかんがえたさいきょうの配色Webサービスを公開するよりも Hexo でブログ公開する方が大変だった話

# はじめにおことわり

まずは… **タイトルめっちゃ長くてごめんなさい！！** （笑）



では本題。



この記事は静的サイトジェネレーターの `Hexo` を利用した際に、とあるテーマの導入部分で大つまずきしまして、それをメインに取り上げています。



前回書いた Web サービスの記事とは違い、 **流行りの技術** も使っていませんし、 **汎用的に役立つ情報** もありません。

突き刺さる人がいるとすれば `Hexo` で同じテーマを使ってる（使おうとしてる）人くらいでしょうか…



ですので、次の一覧にあてはまらなければそっと記事を閉じてください。

（他のことに時間をお使いください！）

- `Hexo` ってなに？静的ジェネレーターってなに？って人（簡単ですが説明があります）
- `Hexo` 使っている人、これから使いたい人
- 静的サイトジェネレーターでブログリリースまでの（ざっくりとした）流れを知りたい人
- ~~人が苦労したことを読んでメシウマしたい人~~



それでは長い記事ですがよろしくどうぞです ❗



# TL;DR

[ぼくのかんがえたさいきょうの配色Webサービスを公開した話](https://qiita.com/azukisiromochi/items/4d07e1b247baed01f11b) という記事のコメントで公開した Web サービスに対して改善点などをいただきました。

（ほんとうに感謝です ❗）



コメント欄で返答したり、 [Github Issues](https://github.com/azukisiromochi/yum-yum-color/issues) で管理したりしていたのですが、リリースノートのような形で変更点を公開できたらという気持ちからブログを公開することにしました。



`Node.js` ベースの静的サイトジェネレーターの `Hexo` を見つけたので、「すぐ出来るやろ」と思っていたら… :innocent::innocent::innocent:

<br>

と、例によって公開したときの手順や **苦労話** をまとめました。



静的サイトジェネレーターによるブログは、今や定番となった `WordPress` によるブログに対してコスト面でのメリットがあり、これから始める方もいるかも知れませんので、そういった人の参考に（ごくごくほんの少しは）なるかもしれません :yum:



ちなみに、公開したブログはこんな感じですので、興味のある方は見ていただけると嬉しいです ❗

![my-blog-1.png](https://qiita-image-store.s3.amazonaws.com/0/317946/35860f4c-f33b-571e-9af6-de90a48a338d.png)

:link: [色とあずき](https://blog.yumyumcolor.com/)

（色彩検定や配色の記事メインになりそうですが…）



# なぜブログを始めたのか？

前回の記事でたくさんの [コメント](https://qiita.com/azukisiromochi/items/4d07e1b247baed01f11b#comment-c51eb7d4802965345461) をいただきました。

> - 余裕があったら是非cssで使えるhsl値も表示していただけるとより便利

> - 色相環に `-webkit-tap-highlight-color: rgba(0,0,0,0);` を追加してはいかがでしょうか？
> iOSだと色を一つタップしたときに色相環全体がグレーにハイライトされてしまい違和感があります。

> - フォークが無駄に1回転するので最短で回転できるようにすると良さそうです。
> (黄色=>黄緑は30度で移動するが黄色=>橙色は-30度で移動しない)

> - これの大和色のバージョン(和風)とか世界の文化と関連したバリエーションがあると面白そうです。


といった感じで改善目的のものも多くいただき、少しずつですが Web サービスに反映中です。



これらを管理するのに [Github Issues](https://github.com/azukisiromochi/yum-yum-color/issues) を利用していたのですが、せっかく使ってくれる人がいるならもう少しオープンな形が…ということでブログを立ち上げようと思ったわけです。



# ブログを始める際の選択肢

静的サイトジェネレーター `Hexo` をチョイスするまでの（頭の中での）流れです。



## ブログサービス会社のサービスを利用するか否か

この業界だと `はてぶ` とかが多いですが、ブログサービスを提供している会社のサービスを利用することで気軽にブログを始めることが出来ます。



基本的には無料のサービスがほとんどで、ただブログを始めるだけなら必要十分です。



**でもやめました。**



長く続けていくことを考えると、提供している会社依存になってしまうことが嫌という理由です。



（過去に何度かこの方法でブログやってましたが、お知らせメールとか来るのがすでに嫌だった :innocent: ​）



## WordPress を利用するか否か

無料のブログサービスを利用しない場合はどんな方法があるでしょう？



一番有名なのは `WordPress` を利用したサイト運営です。



有名なブロガーさんはたいていこれですよね。



`WordPress` はブログだけにとどまらず企業などのサイト作成にも利用されていたり、かなり定着しているソフトウェアです。



**でもやめました。**



Web サービス側を `Netlify` で無料でやったのに、ブログで **レンタルサーバーなどに費用をかけるのが嫌** という理由です。



## どの静的サイトジェネレーターを利用するか

ということで静的サイトジェネレーターを利用したブログを始めようと決めたわけです。



（幸い Web サービス公開したときに独自ドメインは取得していましたので、そのサブドメインかサブディレクトリ使えますし。）



ひとえに静的サイトジェネレーターといってもたくさんあります。



- [Jekyll](https://jekyllrb.com/) - `Ruby` ベース

- [Hugo](https://gohugo.io/) - `Go言語` ベース

- [Hexo](https://hexo.io/) - `Node.js` ベース

- [Gatsby](https://www.gatsbyjs.org/) - `React.js` ベース



正直どれでも良かったのですが、 Web サービスも `JavaScript` だし `Hexo` でいいや、といった感じです。



## 静的サイトジェネレーターを採用したもう一つの要因

Qiita の記事もそうですが `Markdown` で気軽にかけるところですね。

いまさら `WYSIWYG` とかで装飾していくのが面倒だと思ってしまいました。



# Hexo is 何？

`Node.js` ベース静的サイトジェネレーターです。

静的サイトジェネレーターは上述したようにたくさんの種類がありますが、 `Hexo` はブログの作成にウエイトを置いたもののようです。



細かい内容は次の章「 **Hexo でブログを導入してみた** 」で説明していますので、そちらをご覧ください。



## 静的サイトジェネレーター is 何？

これはエンジニアの方なら説明不要だと思いますが、簡単に説明を。



Web サイトには DB などの情報から動的にコンテンツを変化させる「動的サイト」と、変動のないコンテンツで構成された「静的サイト」があります。



その **静的サイトを簡単に作成するためのフレームワーク** です。



`Markdown` で書かれたファイル（記事など）を静的コンテンツとして生成してくれるイメージです。



## 読み方がががが…

`Hexo` ってなんて読むんでしょうね？



ヘクソ？ヘキソ？？



ググると「ヘクソ」の方が多い気がしますが、個人的には「ヘキソ」であってほしいと思っています（笑）

（ ~~だって音が…~~ ）



# Hexo でブログを導入してみた



同じように `Hexo` でブログ導入を紹介している人がたくさんいますが、 **5 分で出来る** とかうたってて「ホントかよっ？」って思って公式サイト開いたら、

```shell
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server
```

 **5 分もかかんないじゃん！** となったわけです :yum:



## 実際にやってみた

上のコマンドをそのまま打って [localhost:4000](http://localhost:4000) をひらくと…

![hexo-blog-1.png](https://qiita-image-store.s3.amazonaws.com/0/317946/7b7e9501-b8d5-1644-b6b9-c2b5fea9d0bf.png)

やっぱり早い！！



あとは Github Pages や Netlify で簡単に公開することが出来てしまいます。



あまりデザインに凝らずにブログを始めたいというだけであれば、本当に簡単に始められますね :yum:



## ブログテーマの変更

`Hexo` ではサイトに適用できる様々なテーマが用意されています。



:link: [Themes | Hexo](https://hexo.io/themes/index.html)



公式ページも用意されていて、各テーマのリンク先に導入方法など説明がありますので、それを参考に自分のサイトに導入しましょう。



### 一般的なテーマの導入方法

Hexo をインストールした際のディレクトリ構成は次のようになっています。

![project.png](https://qiita-image-store.s3.amazonaws.com/0/317946/52463e07-fd2a-ffd1-b8aa-4a91d056f3d7.png)

プロジェクトのルートディレクトリ直下に `themes` というディレクトリがあり、そこに導入するテーマのソースを配置、 `_config.yml` を設定することでテーマが適用されます。

```yaml:_config.yml
theme: landscape
```

デフォルトでは `landscape` というテーマが適用されていますね。



導入するソースの配置は多くの場合は `git clone` するだけなのでかなり簡単に出来ます。



# ブログを作っててハマったこと :innocent:

タイトルにある通り、Web サービスを一つ公開するよりも気分的には辛かったです（笑）

前の章で記載したように `Hexo` でのブログ運営は難しくありませんしスピード感のある開発も出来ると思っています。

じゃあ何にハマったのか．．．



## テーマ選ぶのに時間がかかった

あ、これは僕が優柔不断だからです（笑）

あれ入れたり、これ入れたり、数時間くらい悩んでいました。

こういうのはハマったとはいいませんね。



## 選んだテーマが画面に反映されなかった

`Tranquilpeak` というテーマを選びました。

![Tranquilpeak](https://camo.githubusercontent.com/a544da62cb84c088abd4ca56b72654fcf346244a/687474703a2f2f6431753962697761786a6e6777672e636c6f756466726f6e742e6e65742f73686f7763617365732f73686f77636173652d76322e6a7067)

理由はかっこよかったからです（笑）

（そういうの大事ですよね ❗）

ところが、このテーマを自分のブログに反映させようとしたのですが、うまく反映されません :tired_face:



#### 1. テーマの適用方法が git clone ではなかった

このテーマを適用する前に色々なテーマをお試し導入していたのですが、どれも `git clone` して適用するテーマばかりでした。

```shell
$ git clone https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak.git themes/tranquilpeak
```

 こなれた感じで `Tranquilpeak` をクローンして、

```yaml:_config.yml
theme: tranquilpeak
```

`_config.yml` を設定すると…

![hexo-blog-2.png](https://qiita-image-store.s3.amazonaws.com/0/317946/b2e5fe1c-eb6c-d2ca-316a-2c9a67581ceb.png)

あっ…はい​ :disappointed_relieved:

##### そうか npm install 忘れてたか

![hexo-blog-2.png](https://qiita-image-store.s3.amazonaws.com/0/317946/b2e5fe1c-eb6c-d2ca-316a-2c9a67581ceb.png)

:cry:

##### 静的コンテンツ化出来てないんだな Hexo g

![hexo-blog-2.png](https://qiita-image-store.s3.amazonaws.com/0/317946/b2e5fe1c-eb6c-d2ca-316a-2c9a67581ceb.png)

:tired_face:

##### もう…許してください…

ということで再度 Github 上の README を確認するとこう書いてありました。

> ## Installation
>
> 1. Download the latest version built and ready for production here : [releases](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/releases)
> 2. Rename the folder in `tranquilpeak` and place it in the `themes` folder of your Hexo blog
> 3. Modify the theme in Hexo configuration file (`_config.yml`) by setting `theme` variable to `tranquilpeak`

:thinking_face:

> 1. Download the latest version built and ready for production here : [releases](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/releases)

:thinking_face: :thinking_face:

> 1. Download 

あ、 zip をダウンロードするんか…

##### テーマディレクトリに zip を解凍したファイル群を配置すると…

![hexo-blog-3.png](https://qiita-image-store.s3.amazonaws.com/0/317946/26d8e694-ff60-c5d1-6b0d-b259dd99796a.png)

「 **本当に本当に なんて遠い廻り道…** 」

##### まとめ

`Hexo` のテーマはそれぞれで適用方法が異なるので、思い込みで作業せずにしっかりと Usage ページなどを確認して行う！



#### 2. 独自スタイルが反映されない！？

`Tranquilpeak` テーマは無事に適用できましたが、出来ることならオリジナリティあるれるブログにしたいものです。

具体的には次のように変えました。

（左が `Tranquilpeak` のデフォルトスタイルの状態、右が独自スタイル適用後です） 

![before-after.png](https://qiita-image-store.s3.amazonaws.com/0/317946/9b3d6c2b-584a-51e5-23a4-4836205e4430.png)

これがなかなか出来ずに苦労しました…​ :cry:

##### そもそも独自スタイルってどうやってあてるの？

:link: [Tranquilpeak | LouisBarranqueiro/hexo-theme-tranquilpeak](https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak/blob/master/DOCUMENTATION.md#modifying-the-theme)

公式の README に書いてあります。

例えばサイト全体に適用するようなグローバルなスタイルは `source/_css/utils/_variables.scss` を編集します。

拡張子を見れば分かる通り `Sass` を利用しているのでビルドが必要です。

公式によると

> 1. Run `npm install` to install dependencies
> 2. Run `hexo s` then `npm run start` and start coding :)
>
> ### Save changes
>
> 1. Run `npm run prod` to build the theme

とのことです。

##### 実際にやってみた

これが何度やってもエラーになってしまいうまくなりません… :innocent:

`Grunt` のスクリプトでエラーが出てるっぽいログはいていますが、細かいことが出ていません。

Issues にも類似の問い合わせがあがっていましたが解決せず、ブログ始めたいだけなのにジェネレーター側のコード触っていたらキリがないと思い、いったん棚に上げました。

##### 調べてみた

色々と調べているとこの方も同じように `Tranquilpeak` のスタイル変更に苦労されたようです。

:link: https://yoshinorin.net/2016/05/15/blog/

僕のサイトでもビルド済みの `source/assets/css/style-c4ozcsklz4kht2pebhp44xorvyverh23toayhn7i6ubrpyedak24hv1v0hyd.min.css` を直接編集することでスタイル適用しています。


# 公開
ここは全く苦労せず、 `NetLify` にブログサイトのリポジトリを読ませて完了です ❗
（ほんとうに `NetLify` は便利！！ :yum:）

# まとめ

### ブログサイトを開発するということ

いまさらブログ…っていう人もいるみたいですが、Qiita も然り **技術や考えをアウトプットするツールとして考えると悪くない** と考えています。

ブログサイト自体を静的サイトとして自分で作ってしまうことの難易度が下がってきていますし、挑戦してみるのも良いかもしれません。

（挑戦というほど難しくはないですが）



### 本来の目的を忘れずに開発すること

今回は独自スタイルを適用したいがために時間がかかってしまいましたが、 **本来の目的を忘れず、落とし所を決めて作る** のがいいかもしれませんね！

（ ~~ブログに時間を取られて本来の目的（リリースノートを公開する）が遅れたのは内緒です~~ ）



### Thanks ❗

こんな長い記事を最後まで読んでいただき、ありがとうございました ❗❗