そもそも HEXO って何？
静的サイトジェネレータと呼ばれるもので、 簡単に言うとマークダウンで書かれた文書から HTML/CSS といった静的ファイルを作成するツールになります。
静的ってことは、動的なものもあるのけ？
あります！
最近のウェブサイトでは色々な機能を持たせるため、Web ブラウザからの reuqest を受け、その request の内容を基に動的に Web ページを作成していきます。
動的に Web ページを作成する必要があるのでそれを動かすサーバリソースが必要なのと、Web ブラウザにレスポンスを返すまでの遅延が少し出てきちゃうんですね。
一方、HEXO では事前に Web ページを作成してしまうので、 Web ページ作成のためのサーバリソースを使わず レスポンスまでの時間も早い と言う特徴があります。
HEXO 以外に同じようなのないのけ？ 自分で一から HTML/CSS で作ってもいい気がする。
SIRIUS だとか Dreamweaver といったツールもありますよね。もちろんこういったツールを使ってもいいですが、それなりに HTML/CSS の知識が必要、最初にツールを購入する、レンタルサーバの契約、さらには出来上がったファイルの upload とブログを始めるまでのハードルが高いような気がします。
その点、HEXO だとマークダウンを使ってコンテンツを作成することができ、簡単にかっこいいサイトが作れます。テンプレートも豊富ですし。
無料で簡単 にアフィリエイト/アドセンスができるブログを始めたいというのが今回のコンセプトなので、まずは HEXO で始めてみてどうしてもデザインを良くしたい！となってから必要に応じて移行していけば良いと思います。
簡単にサイトが作れるっていってるけどなんだかんだ難しいけろ？ いうても少しはデザインとかイジりたいけろー。
大丈夫です！ 正直なところ HTML/CSS の知識ほぼ 0 のところから始めましたが、(貴重な夏休みを使って…)大体1週間ほどである程度のカスタマイズをする事ができました。
実際、設定しなければいけないところはそれ程ないんです。ただ、どこをどう触ったらどう変わるんだろうとか、その辺りの感覚をつけるのに時間がかかりました。
この記事では、私が疑問に思ったところなどをなるべく丁寧に説明をしていきますので是非最後までお付き合い頂ければと思います。
最後まで読んで実践して頂ければこのブログ程度のページを作成、更新していけるくらいになりますので一緒に頑張っていきましょう。
なぜ無料？
Google が提供する Google Cloud Platform(以下 GCP) の中の PaaS と言われるサービスである Google Application Engin(以下 GAE) の無料枠を使って作成することができるからです。
厳密にいうと独自ドメインを使って運営したいという場合は厳密には無料ではありません。
(どうしてもドメインの使用料がかかってしまうため)
ただし、その場合でも月額 100 円以内で始めることが可能です！
月額をなるべく安く済ませたい！！という方は「お名前.COM」 等を利用するとドメインの使用量を安く済ますことが可能です。こういったところを選ぶのもありですね！
独自ドメインを使わなければもちろん 無料 でいけます。(最初の 1 年は $300 分のクレジットが使えるのでむしろプラス！？))
でも GCP/GAE とかわからないし、どういった時に無料じゃなくなるのかとかわからないと怖いけろー
ですよね。私もその辺りが怖かったので色々調べてみました。この辺りもまとめていきますので乞うご期待！
基本的にはいきなり料金が発生するという事はないです。単純にサイトへのアクセスが出来なくなる事はあるかもしれませんが。
ただ、月間何万ビューもいきなり行く事は難しいと思いますし、そこまでのブログになっているようであればしっかりマネタイズする事で十分にペイができるようになると思います。
私のブログももしそうなれば、その辺りのカスタマイズ方法の情報もいれていくのでお楽しみに！
なぜ HEXO?
このブログを読んでくださっている方は、無料ブログ（アメブロとか）でブログを始めようとは思っていない方だと思います。そういった方が最初にたどり着くのは WordPress だと思いますので、なぜ WordPress ではなく静的サイトジェネレータの HEXO を選んだのかというところから説明していきます。
かくいう私も最初は WordPress で始めようと思っていました。
プラグインが豊富！カスタマイズも簡単に色々できそうだし、ネットに情報いっぱい落ちてますし。
ただ、デメリットを調べているとプラグインの更新作業に時間が取られたり(使えてたものが使えなくなったり)、データベースを使っている事による脆弱性だったりが問題となるようでした。
つまり、運用を開始してからの方がメンテナンス等々で多くの時間を取られると。
エンジニアの方は共感してくれると思うのですが、システムってサービスインするまでより、サービスインしてからの方が手間がかかるんですよね。
確かに WordPress が謳っている機能は非常に魅力的でした。ただどうしても私には運用を開始してからの手間の方がどうしても気になってしまいました。
(ブログでいろんな事を発信していきたいと思っているのに、それ以外のところで時間を取られたくなかったんです。)
じゃ、無料ブログとか使えばいいんじゃないのけ？
単純にブログを始めるだけではなく AWS/Microsoft/Google が提供するクラウド技術のキャッチアップをしたかったのと、どうせなら ブログの収益化 もしてみたかったという理由から無料ブログは選択肢にはなりませんでした。
アフィリエイトなどを利用したブログの収益化が目的の方は ASP(アフィリエイト・サービスプロバイダ) への登録をお勧めします。有名どころはいろいろありますが、現時点では 登録時に作成したサイトが必要の無い以下の「もしもアフィリエイト」への登録がお勧めです！
「サイト育成ガイド」といったブログ開設初心者への情報も充実しているので読み物としても面白いですし、どういった広告があるのかわかるので作成していく記事の参考にもなります！
Google Adsense への登録についてはある程度記事を書いて自分のサイトの特色が出てきてから登録してみると良いです。(審査の問題があるので。)
このような背景の中、色々調べていくうちに GAE と HEXO の組み合わせコスト的にもパフォーマンス的にも、さらには冗長性に関してまで最強じゃない？？結論にたどり着いたわけです。
静的サイトジェネレータって他には無いのけ？
実際たくさんありました！ ざっと調べるだけでも Gatsuby とか Hugo とか人気がありそうなのがでて来ます。どれもコンセプトは同じでマークダウンで簡単に作成ができます。
私としては Node.js を使用して見たいというのがあったので Hexo を選びましたが、もし他に興味がある技術が使われているものがあればそっちを選んで見ても良いかもしれませんね！
ちょっと話がそれますが、プログラム言語を学びたいとなったら何か目的を持ってやらないと長続きしませんよね。最初は Hello World から始まって、変数の書き方とか for 文、if 文の使い方とか。
他にはオブジェクト指向ではクラスという概念があってとか、、、 理解はできるんです。でも実際のところどう使うのかすっと理解ができないから結局うまく使いこなせるようにならない。。。これの繰り返しが多い気がします。
わかるけろー。結局その場しのぎで、きったないコードになってしまうけろ。。。人に見せるの恥ずかしいけろ。
もちろん今回はブログをカスタマイズするのに特に Node.js の知識は必要ありません。わからなくても必要最低限だと私が思うカスタマイズはできるようにしっかり解説していきます。
ただ、もし node.js がわかれば、自分でどんどんカスタマイズ、例えば新しいプラグインを開発したり、ブログ開発環境を便利にする事ができます。自分で開発したプラグインがいろんな人に使われ出したりとプログラム習得のモチベーションも上がるかと思います。
なので、ブログ開設と一緒に新しい技術も学び始めるというのは良いかもしれませんね！！
今はスクールに通わなくてもオンラインでリーズナブルに受講できるコースが数多く存在します。質問にも答えてくれたりするものもあるので、こういったコースと合わせて学習して自分のブログ環境に反映していったりすると非常に効率良く学べると思います！
特に今回のようにブログを運営するという明確な目標があれば、質問したい内容などをより明確化することができるので、こういったトレーニングコースをより有効活用できますよね。
私は仕事で Python を使う機会があり、こういったオンライン講座を受講した事がありますが、環境の構築から非常にわかりやすくまとまっていて効率よく学習する事ができました。
GAE と HEXO の組み合わせの利点？
GAE は Google が提供する PaaS と呼ばれるサービスです。このサービスのいいところは静的ファイル、つまり HEXO で作成した HTML ファイルを公開することができるところです。しかも 無料 で!
無料枠と言っているのは Always Free と呼ばれている部分です。
https://cloud.google.com/free/?hl=ja
しかも最初の一年は $300 分のクレジット！色々試せてお得けろー
アクセスがそこまで多くない場合は (それでもかなり多くの PV は対応できると思います。) Always Free の無料枠のみで運用する事が可能です。
つまり ある程度のサイト規模であれば何年でも無料で運用し続ける事が可能なんです! (Google の規約変更がない限りは、、、ですが)
また、Google 以外の platform に移動したいという場合でも生成した HTML/CSS ファイルを別のところにおけば良いだけなので移行も簡単です。この辺りも HEXO の強みですよね！
主に使用する Alwasy Free 枠は以下の link の Application Engine というところをご参照ください。
https://cloud.google.com/free/docs/gcp-free-tier?hl=ja#always-free-usage-limits
今回使用するものを上記 URL から抜粋してコメントをしていてます。
- 1 日あたり 28 時間のフロントエンド インスタンス時間
- HEXO 本体を動かすのに使用。(HTML/CSS を公開する部分は含みません。)
- HTML/CSS のジェネレートする作業
- 作成した記事を確認するための擬似 Web サーバの機能
- HEXO 本体を動かすのに使用。(HTML/CSS を公開する部分は含みません。)
- 5 GB の Cloud Storage
- 5 GB の HTML/CSS ファイルおよび関連する画像等を保存可能。
- HTML/CSS を無料で公開 するホスティングサービス。 *<= これが一番大事！*
- 1 日あたり下り 1 GB
- １ページが 1Mbyte の page を作成したとして 1000 PV までいける計算。
- Google CDN も使用可能なので実質さらなる PV 数を捌ける。
- 共有 Memcache
- GAE 内部でキャッシュしてくれるので高速に運用する事が可能。
上記だけでも素晴らしいですが、これに加え Google Platform の提供する冗長性、つまり、特にこちらで意識する事なく server が落ちたら自動で復旧ということをやってくれるわけです。
今回まとめて行く方法では、記事自体の作成も、確認も全て GAE 上で実施しする事ができます。つまりインターネットに繋がる環境さへあれば、いつでも、どこでも記事の編集が可能です。漫画喫茶からだってできてしまいます。
また、Google でカスタムドメインを取得する事が可能ですし、さらには無料/自動で SSL(HTTPS) 対応したサイトが作れちゃうんです。これからは SSL 対応は当たり前の時代ですし SEO 対策的にも必要な事ですよね。
あとは Google のみに全てをまとめる事で後々のオペレーションが非常に楽になると思います。先に述べた通りで、記事作成以外の労力を最小限にするのは大事なので。
データが全部消えてしまうことは無いのけ？
Google が何かやらかしてしまう可能性は 0 では無いと思います。それの対策としては Github の Private repository を使用する事で対策しちゃおうと思うので、その辺りも記事でまとめていきますね。
定期的に GAE 上の情報を Github にあげておけば最悪最後に同期していたところまでは普及可能です。 さらにはローカルマシンにも保存しておけば万全ですね。
Google と Github 両方同時に障害が発生、そんな時に限ってローカルマシーンまで、、、となってしまった場合はあきらめましょう。。。 (宝くじで億万長者になる可能性より低いと思いますので、逆にすごい確率に当ったと周りに自慢しちゃいましょう！！。)
しかし、こんな事が全て基本無料で出来てしまうなんて、、、凄い時代になりましたね。
- HEXO だとサイト構築が簡単
- ブログ公開後のパフォーマンスもメンテナンスも簡単
- GCP の Always Free 枠で運用し続ける事が可能
- SSL(HTTPS) 対応も可能
- これ全部できて無料！
次からは具体的な手順に入って行きます。お疲れ様でした！
シリーズ記事まとめ
“第 1 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.1 - Introduction 編”
“第 2 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.2 - account 作成編”
“第 3 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.3 - GAE 環境構築編”
“第 4 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.4 - HEXO インストール編”
“第 5 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.5 - Theme カスタマイズ編”
“第 6 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.6 - 最小限カスタマイズ編”
“第 7 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.7 - 記事作成編”
“第 8 話 〜初心者可〜 ブログを無料で始めるなら HEXO No.8 - インターネット公開編”