こんにちは、フリーランスのweb制作者として活動しているしょーごです。
最近は2000年代に無料ブログサービスとして隆盛を誇っていたサービスが相次いでサービス終了を打ち出しています。
そして、今回移行を担当したサービスも然り。
案件経緯
先輩「しょーご！高校時代のホムペがサービス終了するみたいなんだ、残せたりしないかな？」
わい「押忍！やってみます！」
わい「あれ、データエクスポートサポートないし、xhtml,Shift-JIS,PHP...」
〜 5時間後 〜
わい「httrackもだめやったぞ、どないしよ、手詰まりやけどあきらめたくないなぁ。ん、？wgetコマンド...?なんやこれ」
今回の記事を見ることで学べること
- MacOSにおいて、閉鎖されるor移転したいブログサイトをまるまるダウンロードし、無料サーバーにアップロードする方法
- FTP情報がないサイト修正で、フロントのデータを引っ張ってこれる
注意：ブログサイトをそのまま移転するだけ
今回はサイトのリニューアルではなく、あくまで「既存サイトから別の無料サーバーに静的サイトとして退避する方法」に特化していますので、
新しくサイトを作り直したい場合には別途対策が必要です。
環境
- MacOS Catalina10.15.6
- 移転元：モバスペホムページ
- iTerm2（ターミナル）
- Homebrew 2.4.16
ホームページ移転の手順
1.home brewを準備する
2.wgetをインストールする
3.wgetコマンドでインストール
4.アップロードする
wgetコマンドとは？
HTTPアクセスをしてコンテンツをファイルに保存するコマンド。 curlでも同じようなことができるが、 curlと違ってリンクをたどりながら再帰的にたくさんのファイルをダウンロードすることができる。
文字通り、自由にフロントのファイルをダウンロードできるのですが、気に入ったサイトのファイルをダウンロードもできちゃいます。
著作権的にいいのか...
①home brewを準備する
home brewはMacOS用の「ソフトウェアのパッケージ管理ツール」で、簡単にソフトウェアやアプリをインストールしたり、アップデートできるものです。
公式サイトにスクリプトがあるので、それをターミナルで実行します。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
②wgetをインストールする
home brewをインストールしたら、wgetをMacに入れていきます。
brew install wget
wgetコマンドでインストール
動的サイトからダウンロードする場合は、以下のようなコマンドになります。
wget --mirror --page-requisites --html-extension --convert-links http://example.com/
- mirror
サイトのミラーに適したオプションです．再帰的な取得などを行います
ページに必要な画像やスタイルシートなどのコンテンツも取得します
- –html-extension
取得したhtmlコンテンツの拡張子を.htmlに変換します
- –convert-links
取得したコンテンツをダンロードしたコンテンツを参照するように書き換えます．例えばfoor/doc.htmlから/bar/img.gifを参照している場合 doc.html のリンクを../bar/img.gifと書き換えます
取得したいsiteのurlです
やっていることは動的サイトをクロールして、本来PHPなどが動的に出力する静的HTML分HTMLファイルを書き出すので、10000ファイルとか超えたりします。
大規模サイトや記事数の多いブログの場合は覚悟してください。代わりにシンプルなコーポレートサイトなら一瞬です。
ダウンロードされたHTMLファイル群を見てみると、リンク先も完全に再現されていることがわかります。
④無料サーバーにアップロード
私の一押しはNetlifyです。Github Pagesよりもはるかに簡単です。
会員登録まだの方は登録をしておいてください。
その後、ダウンロードしたファイル群をフォルダごとドラッグアンドドロップします。
ファイル数が大量にあるとアップロードできません。その場合はGithubやbitbucketなどに先に上げてから、そこからプロジェクトの読み込みをすると、成功しやすいです。
公開できると、URLが発行されます。
ただ、既存のURLがだいぶ適当なので、変更したい方は
Domain Settings→options
からhttps://サイト名.netlify.appに変更することができます。
補足：Shift-JISの呪い
今回のheadには恐ろしいものが書かれていました。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
文字化けしており、どうしても解決できなかったため、閲覧者にchrome extensionでCharsetを入れてもらうしか方法はないかなと思いました。
UTF-8にしても文字化けは解決できなかったので、SHIFT-JISは厄介です（でも2000年代の古代サイトの多くはShift-JISという残酷な現実。）
UTF-8ネイティブにはきついですね😢
いい勉強になりました！