こんにちは。灰の中から蘇るように、かつて長続きしなかったブログが再び生まれ変わります。お金も、時間も、そしてたぶん創造力も足りなかったからです……。そう、「Bar do Clovão」は10年前にも存在していました。学校に通っていた頃、何をしたいのかもまだよく分かっていなかった一人の少年が作ったプロジェクトとして。
当時はGoogleにもかなりしっかりインデックスされていました（これは素晴らしいことですし、すべてのブログがきちんとできているわけではありません）。その頃はまだ「ブログ」という発想ではなく、レビューやニュース、さらにはいつかポッドキャストまでやるかもしれない、そんなオタク系コンテンツのサイトを考えていました。当時、何か差別化できるものを考えました。それは、サッカーとオタク系コンテンツを同じ場所で扱うこと。……画期的だった？
なぜ再開するのか？
「Bar」をもう一度始めたいとは、ずっと思っていました。でも、いつも何かしらの障害がありました。勉強や仕事に集中しなければならないし、自由な時間には自分の楽しみも必要です。だって、人間だもの。そうしているうちにブログはどんどん後回しになり、新しい機会もいろいろと出てきて、最終的には別の分野、映像・音響関連の仕事に集中するようになりました（この話はまた別の日に）。
多くの人が、「同じようなものがたくさんあるのに、どうして自分がやる必要があるんだろう？」と考えていることに気づきました。長い間、これが自分にとっての障害のひとつでした。でも大人になっていくにつれて、いわゆる**「知ったこっちゃない」**という気持ちが、だんだん強くなっていきました。
こういう考え方をしていると、新しいことを学んだり、健全な趣味を持ったり、新しい人と出会ったりする機会を失ってしまいます。つまり、せっかくのチャンスを逃してしまうわけです。そう気づいてから、音声や映像の技術についてもっと勉強するようになり、ストリーミングソフトについてもたくさん学びました。そして、その学びの中で、「自分の好きなことについて、何の義務もなく、また文章を書いてみるのも面白そうだ」と思うようになりました。
つまり、このブログではもう、検索エンジンなどのインデックスに載せてもらうためだけに、ほぼ毎日のようにニュースを投稿してコンテンツを水増しすることはしません。新しいレイアウトと同じように、もっと軽く、シンプルで、とても使いやすいものにします。そこで、自分が身につけてきたソフトウェア開発者としてのスキルを実際に使ってみることにしました。2015年当時はまだ勉強中で、趣味としてプログラミングをしていました。
それに、当時はデザインも急いで作っていて、WordPressを使い、作業を早く進めるためにプラグインやフレームワークを大量に詰め込んでいました。その結果、技術的な調整が面倒になってしまいました（無料サーバーに負荷をかけてしまうので最悪でしたし、そのせいで、本来ならブログの記事を書くために使えた時間まで奪われていました）。
これから書く内容は、分析記事でも、将来必要になるかもしれないので残しておきたいメモでも、とにかく自分が書きたいことです。そして何より楽しいのは、それをインターネットで共有すること！
ここからは、ブログのエンジンがどのように作られているのか、その過程を少し記録しておきます。ここからは少し技術的な話になります。将来的には、誰でも使えるようにコードをオープンソースとして公開したいと思っています。
どうやって作ったのか？
まず、個人プロジェクトなので、僕は特にフロントエンドのライブラリを追いかけ回すようなことはしません。自分のやり方で作るのが好きなんです。結局のところ個人プロジェクトなので、仕事になってしまうようなものではなく、もっと「楽しい」ものであるべきです。もちろん、すべてをゼロから作ったわけではなく、Reactのライブラリをいくつか使っています。
では、始めましょう。完全に素のReactをフレームワークなしで使い、すべてを自分でコントロールできるようにしました。ベースには既存のengineを使っています。Markdown（md）ファイルを読み込み、それをこのようなHTMLの記事へ変換するものです（そもそもブラウザはMarkdownをそのまま読むことができません）。
そのため、react-markdown、remark-gfm、gray-matterなどのライブラリをインストールする必要がありました。でも、なぜでしょうか？
僕の投稿テンプレートは、だいたい次のような構成になっています。
---
title: ""
thumbnail: ""
date: "2001-01-01T00:00:03+00:00"
description: ""
categories:
- category
tags:
- tag
draft: true
---
このヘッダーを読み込むためにgray-matterを、Markdownを解釈するためにreact-markdownを、そしてその解釈を補完し、先ほど画像とその下に表示されるコメントで紹介したようなコンポーネントを改善するためにremark-gfmを使っています。
そのために、単純にと書くだけで、単なるimgタグではなく、より構造化されたHTMLへ変換してくれます。
もうひとつ面白い機能は、動画を埋め込めることです。Markdownには動画用のiframeタグを挿入する機能がありませんが、問題ありません。remark-gfmを使ってURLを読み取らせ、動画（例えばYouTubeの動画）かどうかを検出させればいいのです。以下では、https://www.youtube.com/watch?v=dQw4w9WgXcQというURLを使って簡単な例を示します。
どうですか？ モバイルにも適応する、カスタマイズ可能で完全レスポンシブなHTMLが作れます！
そして、これを公開するのも、それほど難しいことではありません。Github Pagesを使うこともできましたが、ホスティングにはNetlifyを使うことにしました。どちらも無料です！
画像のホスティングもAWS S3を使えば問題ありません。ただし、画像をアップロードする前に、Tinyを使っています。これは画像の品質を落とさずに圧縮してくれます（png、jpeg、gif、webpに対応）。有料サービスですが、500枚を超える画像を圧縮する場合にのみ料金が発生します。このブログは小規模なので、1か月に500枚以上の画像を使う理由なんてありません！
コメントシステムを導入する価値があるかどうか、しばらく考えていました。でも、ふとこんな疑問が浮かびました。「コメントを有効にしない理由なんてある？」と。インターネットには困った人がどこにでもいます。もしそんな人がブログのコメント欄に現れたとしても、ブロックして、それで終わりです！ そこでDisqusを使うことにしました。開発者にとっても、最終的なユーザーにとっても使いやすい、優れたコメントシステムです。そして何より嬉しいことに、無料です！
今のところは、こんなところだと思います……。ブログは技術的な調整も、新しい記事の投稿も簡単にできるようになりました。どんなテキストエディタでも使えますし、あとはGithubとNetlifyが残りの仕事をやってくれます。
読んでいただき、ありがとうございました！