Docusaurusで「婚活攻略ガイド」を作ってみた【Markdown 静的サイトジェネレーター】

Meta（Facebook）が開発している **「Docusaurus」** という静的サイトジェネレーターのOSSを使って婚活を手助けする **「婚活攻略ガイド」** を作成して、公開しました。

## Docusaurusとは

Docusaurusの公式サイトは以下です。

- [Docusaurus](https://docusaurus.io/)

公式サイトに、Docusaurusの特徴や利点が書かれていますので、あえてここで特徴を書く必要がありませんが、一応大雑把に書きます。

用途としては、MarkdownでドキュメントをWebページ化したいときに利用します。

- 開発元：Meta（Facebook）
- 静的サイトジェネレーター
- OSS
- JavaScriptライブラリの「React」をベースに構築されている
- Markdownをベースにドキュメントを記載できる
- MDXを利用可能
  - MDXとは、JSXをMarkdownの中に書けるもの
  - つまり、Markdown内にJSXコンポーネント（Reactコンポーネント）を組み込むことができる
- バージョン管理ができる
- i18n対応で多言語対応可能
- Markdownを使わずにReactベースでシングルページも作成可能
  - 例えば、トップページでデザインを工夫したいとなったときに、Reactで書ける
- ブログを書くことも考慮されて作られているため、ブログとしても使える

他にも細かい特徴は色々あります。

公式サイトの以下の部分に、Gatsbyなどの他の静的サイトジェネレーターとの比較も書かれています。

- [Comparison with other tools](https://docusaurus.io/docs/2.0.0-beta.22#comparison-with-other-tools)

私がDocusaurusを使った感想は、デザインがシンプルかつ洗練されており、使いやすくて良いです。

また、Markdownだけでなく、 **「MDX」** を利用できるのが強みです。
Markdownでドキュメントを書きながら、例えば、グラフやカッコいいボタンなどのパーツを埋め込んで表示することができるため、ドキュメントページのデザイン、表現の幅を広げることができます。

## 婚活攻略ガイドとは

Docusaurusで開発した「婚活攻略ガイド」は以下です。

- [婚活攻略ガイド](https://hikonkatsu.com/)

### 制作した背景・経緯

婚活攻略ガイドを制作した背景・経緯は、[「はじめに」](https://hikonkatsu.com/intro)のページに詳しく書いています。

私が調べた限りでは、2022年現在、情報を網羅して体系立てて、かつ、読みやすく恋愛・婚活情報を書いているWebサイトがあまり見当たりません。
結婚相談所の関係者がブログでパラパラとマナーなどを書いていたり、怪しい恋愛のプロとやらがTwitterでツイートしたり、有料情報商材（有料note）を出しているケースが多いです。

特に、結婚相談所を通した婚活の情報は少ないです。
あるにはあったりするのですが、デザインが非常に見づらく、また欲しい情報がなかったりします。

情報が少ない割には、結婚相談所のお見合いや仮交際デートなどには、暗黙の了解やルールなどがあり、それらを知らないと**たとえ性格が良い人でも相手に残念な人と思われます**。

非常にもったいない状況であり、非効率です。

このようなもったいない婚活をしてしまっている層の方々を結婚に導くだけでも、日本国内の婚姻数や出生数がある程度は増加すると私は推測しています（または、減少数を抑えられると推測）。
このようなもったいない状況を改善したいと思い、婚活攻略ガイドの制作に至りました。

実際に、結婚相談所に登録して婚活をして得た知識や経験を基に書いています。
婚活のために、上下で**約20万円**する **「EMPORIO ARMANI （エンポリオ アルマーニ）」** のスーツも買ったくらい婚活に力を入れました。

また、日本政府が少子化対策に本気で動かない、または、ズレたことばかりやっているので、私が日本政府に代わって動き、婚姻数、出生数を増加させ、日本を豊かにしたいと考えています。

### ITエンジニアの婚活

最近は女性のITエンジニアが増えてきている実感はありますが、それでも営業職などと比べて女性のITエンジニアは少ないです。
そのためか、ITエンジニア界隈では、恋愛や結婚話についてはネット上で話題になりやすかったりもします（自虐ネタが多い気もしますが）。

周りに女性が少ないということは、女性と接することも少なくなりやすいため、女性とのコミュニケーションの経験値が少なくなってしまいます。
一方、普段から様々な女性と接している男性は経験値が豊富です。
女性慣れしている男性も最初から女性慣れしていたわけではなく、失敗も含めて色々経験した結果、女性慣れした男性が多いでしょう（中には天性のイケ男もいるでしょうが）。

もしもITエンジニアの男性で女性から残念に思われやすいと思っている方がいるのでしたら、それは単純に経験不足なだけの可能性があります。
そのような男性がその経験不足を補うためには、様々な女性と接しまくって経験値をアップするか、実際に経験しなくても情報を得て知識として身に着けるかです。
20代前半ならまだ様々な女性とコミュニケーションを取る機会はがんばればできるかもしれませんが、30歳以上になってくるとそんな時間も足りなくなってきます。
30歳くらいになってやっと「婚活やるぞー」と本気を出しても経験不足により、異性から相手にされない人もいるでしょう。

そのため、女性とのコミュニケーションの経験不足のITエンジニアが、婚活攻略ガイドを見ることで、知識として経験を補完し、婚活をスムーズにできたらと思っています。

## GitHub Actionsを利用して自動デプロイ

デプロイに関しては、自動化するために、GitHubのCI/CD機能の **「GitHub Actions」** を利用しました。

例えば、GitHub上のgitのブランチにpushがあるとビルドして、ビルドファイルをサーバにデプロイするワークフロー（手順のようなもの）を書いておけば、それを自動で実行してくれる機能です。

- [GitHub Actionsのドキュメント](https://docs.github.com/ja/actions)
 
今までVPSを利用したことはあっても、有料のレンタルサーバを借りたことはなかったのですが、コスパの観点と **rsync**（遠隔地間のファイルやディレクトリを同期してくれるソフト）を利用してGitHub Actionsでサーバにデプロイできるということで、レンタルサーバーの「ConoHa WING」を契約して使ってみました。

GitHub ActionsとConoHa WINGを利用したデプロイの流れの図は以下です。

![github-actions-flow.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109024/a5e5b7f1-29d0-7bc7-1a24-aec119b7d656.png)

上記のデプロイで利用したGitHub Actionsのワークフローや手順は、他の方が書いてくださっているので、ネット検索すれば出てきますので、差異やバージョンの違いによる混乱を防ぐために、ここでは書きません。
上記でリンクしたGitHub Actionsのドキュメントと一緒に読めば理解できると思います。

設定で少し引っかかったのは、秘密鍵などのキー関係です。
ネット情報を参考にキーを生成したら、アルゴリズムが古くて対象外アルゴリズムとエラーになったり、貼り付ける範囲を間違えてエラーになったりしました（コメント部分だと思った所もキーとして認識する部分だった。基本的に全部貼り付ければ問題ないかと。）。

Markdownでドキュメントを書いて、commitして、GitHubにpushすれば、自動でWebサイトに反映されるため、非常に便利です。

また、アイコンとなるような画像はSVGで作成したかったため、ベクター画像編集ソフトの **「Inkscape」** を初めて使ってロゴなどをSVGとして作りました。
最初は使い方に手間取りましたが、慣れてくると画像作成が楽しくなってきます。

## 今後の婚活攻略ガイドの開発について

婚活攻略ガイドに書きたいことは、まだまだたくさんあります。

もっと充実させないと見てくれる人も増えないでしょう。
ただ、書くのに気力が必要なため、情報を追加していくのには時間が掛かるかもしれません。
ちょくちょく更新していけたらと思っています。

Webサイトの更新情報は、[Twitter@hikonkatsu](https://twitter.com/hikonkatsu)にツイートする予定です。

婚活者に幸あれ！