從wordpress到hexo部落格遷移記錄

艾逗筆發表於2017-09-20
Hexo

我從2013年起，使用wordpress搭建了自己的個人部落格，四年的時間寫了將近50篇文章，記錄了自己在日常開發中遇到的一些問題和解決辦法，同時做了幾個系列的技術分享。雖然博文數量不算很多，但每一篇文章都花了很多的心思在寫，最近也一直在思考把寫部落格堅持下去並保持部落格頻繁更新的問題。

wordpress是phper最喜歡的部落格系統，也是全世界範圍內非常流行的CMS管理系統，它的優點是更新迭代頻繁，功能強大，有相當多的主題和外掛可用。但是不好的地方就是前端渲染比較慢，再加上後臺引用了一些被牆的cdn和avatar庫，如果不好好配置一番，在後臺寫文章體驗會相當不好。近些年，hexo漸漸崛起，基於其markdown的寫作方式和靜態釋出的特性，成了大部分愛寫部落格程式設計師的最愛。基於這幾點考慮，我便有了把部落格從wordpress遷移到hexo的想法。下面的內容記錄了本次的遷移過程。有同樣需求的朋友可以作為參考，從wordpress棄坑，投入hexo的懷抱吧~

上傳圖片到七牛

以前在wordpress寫的文章，裡面包含的圖片都是使用wordpress的多媒體新增的，所以圖片的訪問連結基本上都是類似http://idoubi.cc/wp-content/uploads/2017/08/01/abc.jpg這樣的，所以為了在部落格遷移之後能讓圖片正常顯示，需要編寫指令碼把wordpress媒體空間裡面的圖片上傳到七牛，再批量替換掉文章裡面包含的圖片連結。

  1. 引入七牛sdk

    composer require qiniu/php-sdk複製程式碼

  2. 編寫上傳本地圖片到七牛的指令碼

<?php  

require_once './vendor/autoload.php';

use Qiniu\Auth;
use Qiniu\Storage\UploadManager;

$accessKey = 'RKassuWW4TB4_xxxxxyyyyyQj2iLEIBq9GSGs8E';
$secretKey = '6iVWfPayYPhosxxxxxyyyyyO909Wp6GsV0oOt';
$bucket = 'idoublog';

$auth = new Auth($accessKey, $secretKey);

$token = $auth->uploadToken($bucket);

$uploadManager = new UploadManager();

// 批量上傳圖片
$basePath = 'D:/phpStudy/WWW/project/idoubiblog/wp-content/uploads/';
$fileDir = 'D:/phpStudy/WWW/project/idoubiblog/wp-content/uploads';
$files = getUploadFiles($fileDir);

$successCount = 0;
$failCount = 0;
foreach ($files as $k => $v) {
    $key = str_replace($basePath, '', $k);
    $file = mb_convert_encoding($v, 'gbk', 'utf8');            // 對檔案路徑進行轉碼，防止檔名為中文時出現的亂碼問題

    list($res, $err) = $uploadManager->putFile($token, $key, $file);
    if (empty($err)) {        // 上傳成功
        $successCount++;
    } else {                // 上傳失敗
        $failCount++;
        var_export('上傳失敗：' . $v);
        echo "\r\n";
    }
}
echo "上傳成功：{$successCount}個，上傳失敗：{$failCount}個";

// 獲取所有需要上傳的檔案
function getUploadFiles($dirPath) {
    $files = array();
    $scanFiles = myScanDir($dirPath);
    foreach ($scanFiles as $ak => $av) {
        if (is_array($av)) {
            foreach ($av as $bk => $bv) {
                if (is_array($bv)) {
                    foreach ($bv as $ck => $cv) {
                        $files[$cv] = $cv;
                    }
                } else {
                    $files[$bv] = $bv;
                }
            }
        } else {
            $files[$av] = $av;
        }
    }
    return $files;
}

// 遍歷資料夾下面的檔案
function myScanDir($dirPath) {
    $files = array();
    if (is_dir($dirPath)) {
        if ($fp = opendir($dirPath)) {
            while (($file = readdir($fp)) !== false) {
                if ($file != '.' && $file != '..') {
                    $filePath = $dirPath . '/' . $file;
                    if (is_dir($filePath)) {
                        $files[] = myScanDir($filePath);
                    } else {
                        $files[] = iconv('gbk', 'utf-8', $filePath);        // 對檔案路徑進行轉碼，防止檔名為中文時出現的亂碼問題
                    }
                }
            }
        }
    }
    return $files;
}複製程式碼

匯出wordpress資料

  1. 批量替換資料庫文章中包含的圖片地址

    update wp_posts set post_content = replace(post_content, 'http://idoubi.cc/wp-content/uploads/', 'http://qiniu.idoubi.cc/');複製程式碼

  2. 在wordpress後臺匯出xml檔案

安裝hexo

npm i -g hexo-cli
hexo init idoublog複製程式碼

遷移資料到hexo

  1. 安裝遷移外掛

    cd idoublog
npm install hexo-migrator-wordpress --save複製程式碼

  2. 修改外掛（防止匯入資料後出現的文章標題亂碼問題）

    # 在node_modules/hexo-migrator-wordpress/index.js的63行位置加上
if (slug) slug = decodeURI(slug);複製程式碼

  3. 匯入資料

    hexo migrate wordpress /path/to/wordpress.xml複製程式碼

安裝主題

  1. fork主題

    https://github.com/yscoder/hexo-theme-indigo複製程式碼

  2. 安裝主題

    cd idoublog/
git submodule add git@github.com:mikemintang/hexo-theme-indigo.git themes/indigo複製程式碼

  3. 修改主題配置並提交到fork的主題倉庫

生成內容

hexo generate複製程式碼

本地預覽

  1. 安裝瀏覽器同步外掛，可以在寫文章的時候同步預覽

    npm i hexo-browsersync --save複製程式碼

  2. 帶埠預覽

    hexo s -p8031複製程式碼

釋出內容

  1. 配置釋出環境

    deploy:
type: git 
repo: https://github.com/mikemintang/idoubi.cc
branch: master複製程式碼

  2. 釋出內容

    # 執行此命令後，部落格靜態內容會發布到https://github.com/mikemintang/idoubi.cc
hexo deploy複製程式碼

雲伺服器同步部落格內容

  1. 初始化用於同步部落格內容的專案資料夾

    mkdir /idoublog
cd /idoublog
git init
git remote add origin https://github.com/mikemintang/idoubi.cc.git複製程式碼

  2. 編寫自動同步shell指令碼
    vi /shell/deploy_idoublog.sh

#!/bin/sh

cd /idoublog
git pull origin master複製程式碼
  1. 定時執行shell指令碼
    crontab -e
*/1 * * * * /bin/sh /shell/deploy_idoublog.sh複製程式碼

經過上面一系列步驟，我的部落格成功從wordpress遷移到了hexo。現在我就可以在本地用sublime寫好部落格，然後執行hexo deploy --generate命令，部落格內容就會自動同步到 idoubi.cc/

相關文章