今日研

記事 | 自分のnoteの記事をエクスポートしてアーカイブした

2022-05-19
Tags: blog myWorks 11ty

自分のnoteの記事をエクスポートしてアーカイブした

noteにはエクスポート機能がない

noteの記事をnoteから消したいが、一応保存しておきたいしひっそり公開しておきたい。

エクスポートしようと思ったらnoteにはエクスポート機能がない。

note-export(自作)

それでnoteの記事をエクスポートする自作のウェブアプリを使ってエクスポートした。

これは数ヶ月前に作った物なのだが、記事のURLをいちいち貼ってボタンをポチポチしないといけないめんどくさい作りで、これ使って全記事をエクスポートするのが面倒でエクスポート作業を今までやっていなかった。

良い感じに全記事まとめて自動的にエクスポート出来る機能を作ればいいのだが、今更作るのも面倒だったので結局手動でやった。

11tyで良い感じにサイト化

エクスポートしたので一応保存は出来た、ひっそり公開しておきたいのでここからサイト化する。

このサイトと同じく11tyを使って良い感じに静的サイトを生成する。

eleventy-plugin-nesting-tocでTOCを付ける

TOC(見出し)を付けたかったので調べる。

eleventy-plugin-nesting-tocが使えた。

markdown-it-anchorをuslugで日本語対応させる

TOC作る際に気付いたんだけど、markdown-it-anchorで各ヘッダーにアンカー付けてたが、ヘッダーが日本語だと正常なアンカーにならないっぽいって事に気付いた。

slugifyにuslugを使えば日本語アンカーが出来る。

.eleventy.jsはこんな感じ

.eleventy.jsのアンカーやTOCらへんはこんな感じになった。

const pluginTOC = require("eleventy-plugin-nesting-toc")
eleventyConfig.addPlugin(pluginTOC)
let markdownLibrary = markdownIt({
html: true,
breaks: true,
linkify: true,
}).use(markdownItAnchor, {
permalink: markdownItAnchor.permalink.ariaHidden({
placement: "after",
class: "direct-link",
symbol: "#",
level: [1, 2, 3, 4],
}),
slugify: require("uslug"), //eleventyConfig.getFilter("slugify")
})
eleventyConfig.setLibrary("md", markdownLibrary)

slugify Filter — Eleventyも日本語ダメみたいだし、日本語ダメなのが基本なのか?

色々手作業で修正

note-exportでエクスポートしたmdファイルは色々不完全なので修正しておきたい部分を手作業で修正した。

画像は手作業でDLしてassetsフォルダに移して記事の画像URLを置換して…という感じで処理。

置換は正規表現で検索文字列を

https://assets.st-note.com/img/(.*)\??.*\)

置換文字列を

../assets/$1)

というような感じにした。

それから、なんかエスケープの処理が変に入ってしまったのか一部のURLにバックスラッシュが挟まってたのでそれらを取り除いた。

画像のキャプションが消えてるが別にいいかと思い修正せずに消えたまま。

完成、note-archive

note-archive

記事をnoteから消すのはnoteが公式エクスポート機能実装するのを待って公式エクスポートしてから消そうかな。

“書かない人”も収益化「noteメンバーシップ」。エクスポートは「遅れている」 - Impress Watch

note、エクスポート機能、作ってるらしいので…

作ってて11tyの理解が少し深まった

このサイトの構成も少し改修した。

このサイトにもuslug使うように変更し、TOCを付けた。