サイトのお手入れ 🌱🚿

もう少し世の中によくあるサイトみたいにしようと nawo.to に少しづつ手を入れている。
ブログサイトとかに良くありそうなものだと、だいたいこんな感じだと思う。

シェアボタン
いいねボタン
コメント機能
OGP 画像

Gatsbyだと plugin が豊富にあるので利用していく。あと、先人たちがだいたい何かしらやってくれているので、調べながら実装。

シェアボタン

最近はスマホでサイトを閲覧して、そのまま OS・ブラウザの機能でシェアすることが(自分には)ほとんどなので、シェアボタンの必要性があるかは少し悩んだ。けれど、書いた文章にシェアボタンとかがあるとなんとなくそれっぽいサイトに見えるよな〜という理由で設置してみた 😄
シェア先は、Twitter ぐらいしか見てないので Twitter と昔ながらのはてブぐらいがあれば十分な気がする。

設置は、シュっと react-share を使って実装できた。

https://github.com/nygardk/react-share

いいねボタン

Gatsby で作ったような静的サイトでも「いいねボタン」って設置できるのかな〜っと調べてみたら、いろいろあるみたい。

どちらも一定数の PV までなら無料で使えるので、React まわりのドキュメントが記載されてた Lyket を使ってみた。

コメント機能

静的サイトでもコメント機能をつけられた 🎉
Disqus が有名だけど、utterancesが良さそう！コメントをどうやって保存するんだろうっと思ったら、Github の Issue を使うのか。スゴイ 😲

React のコンポーネントもあったけど、数行程度のコード量なので自前で持つことにした。参考にしたのはここら辺。

ボタンの配置とかとか

↑ な感じでポチポチと必要な要素を配置しながら、いろんなサイトを参考にしてみた。最近だと、シェアとかいいね！とかは記事のタイトル部分に配置してたりするサイトが増えた気がする。(特に記事を投稿する系のサービス) たしかに、タイトルと概要だけ読んでシュっとボタンを押して拡散する方がサービスの観点では良さそうだけど、個人サイトなんで一応、文章を読んで「これは良さそう！！」と思って押してもらった方が嬉しいので、ひとまずページ下部にボタンやコメント類を配置するオールドスタイルな感じにしてみた 😄

Open Graph Image をつけた

シェアボタンをつけたので、OGP 画像も設定。
画像にどんなフォントでテキストを入れるかで一番悩んでしまった。 Graffiti っぽいフォントにしたかったので、Molleを使った。他にも Google Fonts だとここら辺がいい感じ。(そのうちスライドなんかで使おう)

画像は、Pablo あたりとを使うと良さげなのが作れそうだけど、シュっと自前で用意。
サイズを 1024x512 で作成して、解像度を 96x96 にしてみた。

設定の仕方は、ここら辺を参考にさせてもらった。

https://juliangaramendy.dev/blog/custom-open-graph-images-in-gatsby-blog

あとは Twitter と Facebook あたりでちゃんと表示されているかを確認。

まだまだお手入れの道は続く

ひとまず、ふつうのサイトっぽい機能は実装できたけど、まだまだ手を入れたいところは次々と出てくる。ひとまず忘れないようにメモして、あとでちまちまやっていこう。

~~OGP 画像つけたい。Twitter にシェアするときに残念な気持ちになる~~
- つけた
GA4 をいれる
Google Search Console に登録する
Font Awesome でアイコンをつけたい
🍔 ハンバーガーメニューつけたい。大したメニューのコンテンツないけどなんとなく
IndieWebify したい。IndieWebify.Me

#nawoto