Tumblrのテキスト記事をVuePressで見れるMarkdownに変換するスクリプトを書いた

普段の日記を付ける場所を去年から 鳥人雑技団なんて地元にはない から ikaruga.org に移したのだけれども、過去の記事も移行したかったのでスクリプトを書いた話。

前提

GitHub - ikaruga777/ikaruga.org 移行先はこれです。

    "@vuepress/plugin-blog": "^1.9.3",
    "vuepress": "^1.7.1",

Tumblrブログのエクスポート

エクスポートはTumblr のブログ設定の一番下にある。 f:id:uvb_76:20210608051824p:plain

ここからダウンロードできるエクスポートファイルは以下のような構造を持っている

conversations.zip # メッセージのやりとり
media # 画像とか
├── 36168689520.jpg
├── 36205627811.gif
├── 37911023684.jpg
├── 190878196430_5.jpg
├── 190878196430_6.jpg
├── 190878196430_7.jpg
├── 190878196430_8.jpg
├── 190878196430_9.jpg
└── 190878196430_10.jpg
posts.zip # テキスト

posts.zip の中身は以下のとおり。

.
├── html
│  ├── 35595084788.html
│  ├── 35595101885.html
....
│  ├── 189976946900.html
│  ├── 190103049430.html
│  ├── 190292172880.html
│  ├── 190618623800.html
│  ├── 190682518265.html
│  ├── 190878196430.html
│  └── 613941876100317184.html
├── posts_index.html
└── style.css

posts_index.html にはhtmlのディレクトリにあるhtmlファイルの一覧がずらっと並んでる。

各記事のhtml構造は以下のようになっている。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../style.css" />
  </head>
  <body>
    <h1>{{title}}</h1>
    {{body}}
    <div id="footer">
      <span id="timestamp"> March 1st, 2019 2:09am </span>
      <span class="tag">uvb76nikki</span>
    </div>
  </body>
</html>
  • h1 にタイトル
  • 記事のhtml
  • footer にタグと日付

それはそうって感じなのだけれども、TumblrのエディタでMarkdownを使用してようが、出力された後のHTMLがデータとしてエクスポートされるようになっている。

VuePressのfrontmatter付きMarkdown

出力先はVuePressのFrontmatterがついたMarkdown。自分の日記から拝借すると以下のような感じ。

---
title: 2月と3月はじめの近況
date: 2021-03-12 12:01:13+09:00
feed:
  enable: true
layout: post
---
以下本文

変換

というわけでスクリプトを書きなぐった。

gist.github.com

  • h1タグをタイトルとしてなければスキップさせる
  • timestampは雑に Time.parse でいい感じにできた
  • タグ使ってないから無視

解凍後の posts と同じディレクトリに置けば動くはず。nokogiriでbodyの中身切り取ってhtmlのままmdに投げているので1行のhtmlがドカンとmdの本文として吐かれる。汚いけど、HTMLをMarkdownに変換したりフォーマット揃えようとするとSNSの埋め込みタグが大崩壊するので妥協した。今は見れれば良い。

実行すると dist/yyyy/mm/yyyy_mm_dd_title.md の形式で吐かれるので後はよしなに。VuePressのblogプラグインは雑においても認識してくれるので old ディレクトリを切ってそこにまとめた tumblrのコンテンツを移行したいのよね by ikaruga777 · Pull Request #58 · ikaruga777/ikaruga.org · GitHub

dist
├── 2013
│  ├── 06
│  │  ├── Macbook_Air_買った..md
│  │  ├── rvmはsudoつけない.md
...
└── 2020
   ├── 01
   │  ├── 2019_12_28_年末岩手旅行一日目.md
   │  └── 2019_12_29_年末岩手旅行二日目.md
   ├── 02
   │  ├── 2020_02_03_1月近況.md
   │  ├── 2020_02_07_年末岩手旅行三日目.md
   │  └── 2020_02_18_2泊3日で佐渡に行った.md
   └── 03
      └── 2020_3_30 _2月と3月近況.md

こう思ったっす

  • erb意外と手軽
  • SNSの埋め込みタグが厄介
    • 埋め込みタグは一回で読み込み済ませたいVSブログ独自記法が生まれて可搬性を落とす
    • 画像とか本当はリポジトリの中にあるべきだとは思う。
  • これからも何度かこういうことやるなら可搬性は大事そう

これからどうすんの

どうでもいい話

Tumblrの前は無料のレンサバ+Serene Bachでブログ作っておいてたのだけれども、レンサバの障害でデータ全部飛んだらしくインターネットから消え失せた。バックアップも取ってなかったので手元には残っていない。Internet Airchiveにはかろうじて残ってたので最古の記事を見に行ったら2005年の夏の記事が出てきた。2013年くらいまで書いてたっぽい。Tumblrの記事も2013年からあるので、合致してる。ここらへんの記録も全部拾い上げて爪痕にもならない程度の記録にしたい。