Blogを作り、育み、慈しむ ~ Blog Hacks 2024
TIME rest time current/total
TopicsPlaceHolder

Blogを作り、育み、慈しむ ~ Blog Hacks 2024

YAPC::Hiroshima

Feb 10th, 2024

ヘンリーから来ました

Blog Hacks

Content Everywhere

Profile

songmu

Profile

songmu

アイデンティティを統一したい！

Profile

songmu

好きと継続

好きは無敵

I ♥ Blogging

本日のゴール

アジェンダ

発信し続けること

継続が最優先

他人の反応を気にしすぎない

報酬系を壊さないように気をつける

表現したいことがない場合は？

「オタクの早口」の良さ

発信で気をつけていること

謙虚さとリスペクト

(自分は大した人間ではないことも分かってきたし)、謙虚でありたいと思っているし敬意を払いたいと思っている。

謙虚さを持って、敬意を払っていれば炎上確率は減らせると思っている。

謙虚さとリスペクトの強要はしたくない

Blogを作る

個人サイト (cho45さんの名言)

個人サイトの外観はまさに顔だ。デザインされてなさ、みたいなのも含めて。ダサくても個人サイトを持つべきだと思う。ブランディングというと大袈裟だけど、自分のコンテンツは自分で持つのが確実に良い。
個人サイトは終わってしまったのか https://lowreal.net/2017/12/19/2 cho45

ぱっと見て「あ、〇〇さんのブログだ」って分かる良さ。オンラインアイデンティティ。

個人サイトは家、SNSは社交場

私のBlog遍歴

現状

メインブログ

サブブログ

はてな社との関係性の明示 (一応)

はてなブログ推しの内容もあるので。

ブログをどこで構築するか

IndieWeb

https://indieweb.org/

IndieWebの原則

https://indieweb.org/principles

  1. ✊ Own your data
  2. 🔍 Use & Publish visible data
  3. 💪 Make what you need
  4. 😊 Use what you make
  5. 📓 Document
  6. 💞 Open source
  7. 📐 UX and design is more important
  8. 🌐 Modularity
  9. 🗿 Longevity
  10. ✨ Plurality
  11. 🎉 Above all, Have fun

この一覧だけでは良さが伝わりきらないので、ぜひ中身を読んで欲しい。

原則で気に入っているところ

コントロールしたいもの

Cool URIs don't change

コンテンツをGit管理したい

オススメ構成

(SSG) Static Site Generator

静的ファイルを書き出して配信する。

個人的には業務で使うときはHugo使うことが多いです。

好きなもの、自分でいじれるものを使う。

静的配信(SSG)の良さ

SSGのデメリット

htmlが好き

Rijiの気に入っている点

ホスティングサービス

URLを維持して乗り換え可能なら、ホスティングサービスを使うで良いと思うようになった.

お好きなものを。

SaaS

はてなブログ

はてなブログのCSSカスタマイズ

デフォルトデザインのメリデメ

プライバシーポリシー・クッキーポリシー等

(余談) longevityに思うこと

はてなブログに寄せた例

SEOスペシャリストの辻さんの話。

もちろん、はてなブログも未来永劫続くとは思えません。ただ、はてなの人たちと長く付き合ってきた中で感じている事として、沢山あるブログサービスの中で管理者がいなくなったブログを公開し続けてくれる可能性が一番高い会社だという確信はあります。 SEOに最適なブログとは？私がWordPressからはてなブログに移転してきた理由 https://webweb.hatenablog.com/blog/wordpress-to-hatenablog 辻正浩

100年後に残るコンテンツ

Blogを育む

メインブログ変遷

MovableTypeは静的ファイル書き出しなので移行が容易だった

Docker化

様々な場所でサイトのビルドがやりやすくなった。今はGitHub Actionsでやってます。

% docker run --rm -e TZ=Asia/Tokyo -v $(PWD):/riji -v $(PWD)/.git:/riji/.git ghcr.io/songmu/riji:latest publish

Perlの後方互換性の良さ

フリーランチの例

はてなブログ

Blogを慈しむ

コメント機能

シンタックスハイライト

Google Code Prettifyをずっと使っているが、多分今はより良いものがある。

はてなスター設置

はてなスターをブログに設置するには

<script type="text/javascript" src="https://s.hatena.ne.jp/js/HatenaStar.js"></script>

はてなブックマーク: 外部サイトをはてなIDと紐付ける（ページオーナー設定）

外部サイトをはてなIDと紐付ける（ページオーナー設定）

<link rel="author" href="http://www.hatena.ne.jp/あなたのはてなID/" />

はてブコメント非表示タグ

コメント一覧非表示機能について

<meta name="Hatena::Bookmark" content="nocomment" />

(別にはてブコメント非表示を推奨しているわけではないです)

ActivityPub対応

更新通知のためのPerlスクリプト

git diff --name-status HEAD~ | perl .github/workflows/webmention.pl

更新されたファイルをgit diffからとって通知する。GitHub Actions上で実行。
こういうクイックハックにPerlは最高！

#!/usr/bin/env perl
use strict;
use warnings;
while (defined(my $line = <>)) {
    chomp $line;
    my ($status, $file) = split /\s+/, $line;
    if ($status eq 'A') {
        if (my ($entry) = ($file =~ m!article/entry/(.*)\.md$!)) {
            my $url = "https://songmu.jp/riji/entry/$entry.html";
            system qw{curl -q https://fed.brid.gy/webmention -d}, "source=$url", qw{-d target=https://fed.brid.gy};
        }
    }
}

令和時代のサイト間交流

Trackback, RSSリーダーからWebmention, ActivityPubへ

やりたいと思っていること

oEmbed 対応したい

https://oembed.com/

oEmbed

こんな感じ。

<link rel="alternate" type="application/json+oembed"
  href="http://flickr.com/services/oembed?url=http%3A%2F%2Fflickr.com%2Fphotos%2Fbees%2F2362225867%2F&format=json"
    title="Bacon Lollys oEmbed Profile" />

こういう機能は、SaaSだと当たり前のように提供されているので、そういう意味ではSaaSを使ったほうが良いとも言えるが、自分で作る楽しさもある。

Podcast

まとめ

以上