年以上経過しています。最新の情報は各種公式ドキュメント等をご覧下さい。201825日目の記事です。アドカレ期間も最終日を迎えました。皆さん如何お過ごしでしょうか?僕は今年だけで8本ほど請け負っていたのですが、なかなかしんどかったです。来年は自重して10本ぐらいに抑えようと思います。そんなアドカレ参加に必須とも言えるBlog、今年のアドベントカレンダーに合わせて新調しました。そこに至るまでの流れや、実際にしたことなどを本題のJAMstackを絡めながらお伝えしていければと思っています。ご本人によるスライドを見ることができます。中心に利用するということです。JAMstackを利用することで、フロントエンドとバックエンドを明確に分けることができるため、フロントを直すだけなのにバックのコードにまで影響を与えてしまうと言った不要な心配をしなくてよくなります。詳しくは以下のサイトをご覧ください。Markup利用したもの本題のBlog構築についてです。以下に記述しているものは、弊Blogを作成する為に利用したものです。言わずとしれたアナリティクス系ツール下2つは説明不要ですね。Webサイトに限らず、様々な場面で活用しています。Netlifyの機能については1日目のnabettuさんがまとめてらっしゃるのでそちらをご覧ください。CloudFlareはCDNサービスですが、DNSとしてのサービスも提供しています。利用するだけでCloudFlareのCDNが使えたり、SSL通信してくれたりと非常に優秀な子です。Netlifyと色々サービスが被ってしまうため、併用には注意が必要です。Hexoは、Nodejs製の静的サイトジェネレーターです。同じ立ち位置では、JenkyllやGatsby、Hugoなどがあります。それぞれ推している言語が違うのが面白いですね。CMSを導入して、記事の投稿だけならネット上だけでできるようにしたいと考えています。CMSはNetlifyでホスティングしているWebサイトにCMS機能を追加するサービスです。CMS上で編集した内容は、GitHubにPushされます。詳しく調べていないのですが、GitLabやBitBucketにも対応しているようです。弊Blogの記事がインターネットに上がるまで、以下のようなフローを経ています。ローカルで記事を作成(MarkDown記法)記事用のbranchにコミット、GitHubにPushGitHub上でPush内容をリリースブランチ(master)にマージ公開フローの細かいことに関してはこちらをご覧ください。NetlifyにはCI機能があり、GitHubのRepositoryを連携させると勝手にCIを回してくれます。masterの内容をそのままNetlifyに投げていますので簡単にmasterへcommitやpushができません。ブランチは常に切っています。フックを利用して、強制的にcommit/pushを禁止しています。(一回間違えてcommitしかけて助けられたのでオススメ。趣味の範囲とは言え、可能な限り高速なBlogを心掛けて作成しています。デザインは苦手ですが少しずつ自分色を出せるように日々工夫しています。その中で得た知見を紹介します。(特に同じ構成を予定されている方に読んで欲しい。Pushに対応しています。復活の予定もないようです。ThemeをカスタマイズHexoにはたくさんのテーマがあり、その中から良さげなものを選んで利用します。Calendarのmoomooyaさんが非常にわかりやすい記事を書かれていらっしゃるので、そちらをご覧ください。(JAMstackのほうで投稿してほしかった...)元は似たようなことを書こうと思っていたのですが先に書かれてしまったので、軽く触れるだけにします。Hexoのテーマはほとんどejs/stylusで書かれています。(Hexoのデフォがこの構成。僕はPug/Stylusが書きたいのです。このことはテーマを選ぶときに非常に重要になります。ejsのテーマを書き換えてもいいのですが、非常に手間で心が折れるので最初からPugで書かれたテーマを使われることを強くオススメします。してもこれが使いたいんだっていう方はejsとPugの違いがよくまとまっているこちらの記事をご覧ください。使ったほうがいいです。SNSボタンの設置この記事の下部にSNSにシェアするためのボタンが設置してあります。Hexo側から提供されるとかはないので、Themeをいじって自分で作りました。ホバーアニメーションにこだわったので、ぜひマウスをホバーさせてみてください。(ホバーしたついでにクリックして拡散していただけると更に嬉しいです。)SNSボタンはこちらを参考にしました。記事の方ではPHPを利用されていますが、ロジックさえわかればどの言語も一緒ということでJSに書き直しました。利用規約や法律的に不利にならないようにするこれはJAMstackには関係ないことですが、Blogを運営する上で非常に重要なことになります。Analyticsを利用しています。ブログのPV数って単純に書くことに対するモチベーションになるんですよね。こちらに移行する前ははてなブログで書いていたのですが、そのブログは今でも1日30~40PV出してくれます。月間だと1000PVをゆうに超えます。このことはBlogを書くということに対して非常に自信となっています。(現在の環境に移行した理由は、独自ドメインがタダで使いたかった、コンテンツ以外の部分も成果物として紹介できるようにしたかったって感じです。Analyticsを導入しました。Analyticsには当然利用規約があり、そこには必ずプライバシー・ポリシーを記載しなくてくはいけないという項目があります。(詳しくはこちらの記事をご覧ください。)そのため、弊Blogではプライバシー・ポリシーを設置しています。4.0というライセンスで公開しています。インターネット上で継続していく場合は、利用者が安心して情報を利用していけるようにライセンスを決めておくべきかなと思います。その際に自作をするのではなく、既存の有名なライセンスを適用したほうが作成者側も手間が減りますし、利用者側も使い方がわかりやすいです。Licenseが適用されています。ここらへんの文章を書くのはかなり手間なので後回しにしてしまいがちですが、公開するのであればしっかり準備しておきたいものです。気になっていることこれまで紹介した内容で運営をしているのですが、個人的な悩みが一つあります。Hexoで画像を扱うのに色々方法があってややこしかったり、個人的な意見でGitHubにあまり画像を上げたくないなどあり、色々方法を模索中です。現在は試験的にCloudinaryという画像CDNを導入しています。commitは2018年11月1日のようです。新しいですし、12月に入ってからはアドカレで忙しすぎたので実質作成期間は1ヶ月弱です。これからもっともっとオリジナリティを出したBlogスタイルにしていこうと思っています。最近ようやくHexoの使い方がなんとなく分かってきたので、pluginのチューニングや自作なども積極的にやっていこうと思っています。