Web制作やCMSの移行作業をしていると、「もうこのサイト編集できないけど、内容は残したい」「WordPressをやめたいけど、静的に残したい」といった場面がありますよね。
そんなときに役立つ、Node.js + axios + cheerioで構築した静的Webサイト保存ツールを作りました。
対象のURLを指定するだけで、HTML/CSS/JS/画像/動画などのアセットを構造を保ったままローカルに保存できます。
✅ このツールでできること
- URL構造に沿ってHTMLをローカルディレクトリに保存
- CSS・JS・画像・音声・動画ファイルを再帰的にダウンロード
- CSS内部の background-image: url(...) なども正規表現で抽出・取得
-
<a href="...">の内部リンクをたどって再帰的に保存 - BASE_URL を変えるだけで他サイトにもそのまま使い回せる
🛠 環境と前提
- Node.js 環境（v18.xなどで確認済）
- ファイル保存先はローカルディスクを想定
- 必要なnpmパッケージは axios と cheerio
🔧 インストール
まずは必要なライブラリをインストールします。
npm install axios cheerio
環境依存の注意点：
- ESM構文（import形式）で組んでいると url, fs, path の扱いが異なる場合があります
-
require('url')が失敗する場合は、以下で補完インストールしてください：
npm install url
⚙️ 設定
スクリプト内の以下2点を自分の環境に合わせて書き換えてください。
const BASE_URL = 'https://example.com/';
const BACKUP_FOLDER = 'D:/your/backup/folder';
▶️ 実行方法
node scraper.js
実行すると BACKUP_FOLDER にHTMLファイルと各種アセットが保存され、
元サイトの階層構造をそのまま再現した形でバックアップされます。
🌍 このツールの用途例
- Web制作時の他社実績サイトの構造研究（ローカルで静的確認）
- WordPressなどの古いCMSからの脱出用バックアップ
- 定期的なアーカイブ用途（更新停止サイトなど）
📁 リポジトリ（GitHub）
📝 今後の予定・構想
- GUI対応バージョンの作成（Electron or Web UI）
- ページ間リンクの相対変換（オフライン化強化）
- クローラー側の除外ルール（robots.txt風）
✒️ 最後に
このツールは「業務でちょっと困った」をきっかけに、最小構成で実用性を優先して作っています。
同じような状況で困っている方の参考になれば幸いです。
バグ・改善案・プルリクなど歓迎です！