過去にはてなブログやQiitaで書いた記事リンクを個人サイトの記事一覧に表示した

#tech

背景

このサイト上でブログを書くようになっても、過去にはてなブログや Qiita に投稿した記事は移行などせず放置していました。旧ブログ記事のリンクが消失したりするのが勿体無かったというのが理由です。

とはいえこのまま放置するのもなぁということで、このサイトの記事一覧ページに外部で書いた記事リンクを混ぜ込むようにしました。イメージはこんな感じ。

記事一覧ページに外部サイト上の記事リンクを表示
記事一覧ページに外部サイト上の記事リンクを表示

やり方

以下のようにすることで楽に外部サイトのリンクを含められるようにしました。

  • Qiita やはてなブログから記事データを Markdown 形式でエクスポートする
  • このサイトの記事ソースディレクトリ下に配置する
  • エクスポートした記事データは Front Matter で外部サイト記事か区別できるようにする

このサイトは Next.js でビルドしていて、リポジトリの ./posts 下に置いている Markdown ファイルを remark で HTML 化して記事ページを生成しています。 はてなブログや Qiita からエクスポートしたファイルは以下のように Front Matter に元記事リンクを持たせておき、記事一覧ページの jsx 側で分岐し外部リンクを貼るようにしています。

---
Title: 自宅コーヒー環境充実の為みるっこDXを買った
Category:
- 家電
- 買い物
Date: 2017-01-06T11:00:00+09:00
URL: https://horimislime.hateblo.jp/entry/coffee-mill
EditURL: https://blog.hatena.ne.jp/horimislime/horimislime.hateblo.jp/atom/entry/10328749687201779953
---

Qiita の記事エクスポート

API が用意されているのでこれを叩きます。

Qiita API v2 documentation - Qiita:Developer

以下のような Shell Script を用意して、記事のタイトル・更新日時・Qiita 上の該当記事リンクを Front Matter に含んだ Markdown ファイルを生成できるようにしました。

#!/bin/bash

IFS='
'
RESULT=`curl -H "Authorization: Bearer YOUR_AUTH_TOKEN" "https://qiita.com/api/v2/authenticated_user/items?page=1&per_page=100" | jq -r -c '.[]'`
for LINE in $RESULT;
do
    ID=$(jq -r '.id' <<< "$LINE")
    TITLE=$(jq -r '.title' <<< "$LINE")
    URL=$(jq -r '.url' <<< "$LINE")
    UPDATED_AT=$(jq -r '.updated_at' <<< "$LINE")
    PRIVATE=$(jq -r '.private' <<< "$LINE")

	# 非公開記事はexportしない
    if [ $PRIVATE = "true" ];then
	echo "$TITLE is private."
	continue
    fi
    # タイトル・更新日・URLをFront Matterに含むMarkdownを書き出す
    FRONT_MATTER="---\ntitle: $TITLE\ndate: $UPDATED_AT\nURL: $URL\n---"
    echo $FRONT_MATTER > "qiita_export/$ID.md"

    echo "Wrote $TITLE"
done

はてなブログの記事エクスポート

はてなブログは API が XML を返してくる Atom Pub API でサクッとやるにはやや気が重かったんですが、x-motemen/blogsync を使うことで楽に解決できました。こちらはコマンド実行のみで Markdown の生成まで完結するので特段やることはなし。

まとめ

外部サイトに書いた記事リンクを Markdown ファイルを用意して手っ取り早く生成しました。過去に別サイトで書いていた記事を自前ブログにインポートするのも良いけど記事 URL という資産が失われてしまうし、という悩みが解決できました。

Tweet