HugoでIndieWeb Webringを始める方法

目次
IndieWeb Webringに参加することで、あなたのHugoサイトをより広いIndieWebコミュニティとつなげることができる。始め方は以下の通り。
1. IndieWeb Webringのサイトにアクセス
まず、https://xn--sr8hvo.ws/ にアクセスし、Webringについて読んだり、参加している他のサイトをチェックしよう。
2. 認証の設定:IndieAuth または RelMeAuth
Webringサイトはサインイン時にIndieAuthやRelMeAuthを利用している。Hugoサイトは静的なので、多くの場合 RelMeAuth を利用することになる。
RelMeAuthとは?
RelMeAuthは、個人のウェブサイトとGitHubやMastodonなどのSNSプロフィールをrel=“me"リンクで相互リンクし、それを使って本人認証を行うシンプルな仕組みだ。
「あなた」のサイトを使って「あなた自身」として認証できる。
RelMeAuth設定手順
1. rel=“me"リンクを追加
Hugoサイトのレイアウト(通常はlayouts/partials/head.htmlなど)に、次のように認証済みSNSプロフィールへのrel=“me"リンクを追加する。
<a href="https://github.com/yourusername" rel="me">GitHub</a>
<a href="https://mastodon.social/@yourusername" rel="me">Mastodon</a>
SNSのプロフィールにも、あなたのWebサイトへのリンク(相互リンク)が必要。
2. Webringサイトでサインイン
https://xn--sr8hvo.ws/
で「Sign in」ボタンをクリックし、あなたのWebサイトのURLを入力する。サイトはrel=“me"リンクを検出し、RelMeAuthによってGitHubやMastodon経由で認証される。
3. HugoにWebringナビゲーションリンクを追加
認証されてWebringに追加されたら、Webサイトに次のナビゲーションリンクを設置するよう案内される。
layouts/partials/footer.htmlなどHugoのフッター部分に、次のHTMLコードを追加する。
<a href="https://xn--sr8hvo.ws/previous">←</a>
An <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍
<a href="https://xn--sr8hvo.ws/next">→</a>
これで、Webring内の他サイトへ前後移動できるようになる。
4. サイトリンクのダブルチェック(推奨)
-
rel=“me"リンクが正しく記述されていることを確認しよう。indielogin.com/setup や indiewebify.me でチェックできる。
-
SNSプロフィールが必ずあなたのWebサイトにリンクしていることを再確認すること(相互リンクが認証の必須条件であるため)。
-
canonicalなドメイン(wwwあり/なし等)がプロフィールのリンク先と一致していることも大切。
5. 完了!Webring参加
サイトが承認されると、Webringリンクは自動的に前後の正しいサイトへ繋がるように表示される。以後、あなたのサイトを訪れた人はWebringリンクを利用して他のIndieWebサイトも巡ることができる。
オプション:カスタマイズや補足
-
Webringリンクの配置やスタイルをサイトのデザインに合わせてカスタマイズするのもおすすめ。
-
対応しているIndieWeb機能やWebmentionの情報も掲載すると、他のIndieWebユーザーにも親切だ。
これであなたも分散型コミュニティ主導のWebringの一員になり、自分自身のWebアイデンティティと標準技術でつながることができる。
著者について

Genx
1982年生まれ、日本人のビートメイカー・音楽プロデューサー。実験的なヒップホップビートを制作。国際的な環境で育ったため英語が話せる。趣味は筋トレ、アートワーク制作、ウェブサイトカスタマイズ、Web3。韓国が大好き。
ウェブサイト:genxrecords.xyz