Ghost 搬家前準備工具

這次用到的所有工具如下:

  1. Zeabur:一鍵式部署雲主機
    1. 內建多種實用模板,讓你可以一鍵部署 Ghost
    2. 根據用量計費,目前使用下來一個月約 170 台幣,比 Cloudways 便宜且快速
    3. 透過我的連結註冊,你與我都可以拿到免費的 5 美金額度,歡迎使用
  2. FileZilla:FTP 檔案管理工具
    1. 免費使用
    2. 幫你下載 WordPress 主機上的媒體檔案
  3. CloudConvert:將 ZIP 轉為 TAR 檔
  4. Cloudflare:網域管理、多種實用功能
    1. 我們這次使用到的是網域管理與 ZeroTrust 來達成 2FA 功能
Ghost Themes - Dynamic URLs & Routing
Build dedicated URL structures using Ghost’s dynamic routing system, for custom homepages, podcasts, categories and more.

補充:以下內容由影片逐字稿轉換,請搭配影片使用

哈囉大家好,相信看到這部影片的你,都是正在考慮或者已經決定要從 WordPress 搬到 Ghost 的朋友。

身為一個過來人,我懂那種想換個環境的心情!所以今天這篇教學,我就把我個人從 WordPress 搬家到 Ghost 的所有詳細過程和步驟都整理出來,希望能幫助到你們。

如果你還在猶豫要不要搬家,看完這篇教學,或許可以更清楚評估搬家的成本和時間,再決定對你來說是不是划算。話不多說,我們就直接開始今天的教學吧!

第一步:建立 Ghost 專案並部署

  1. 選擇伺服器: 首先,點選建立專案,然後選擇一個離你地區最近的伺服器。像我這邊就選擇了東京日本。
  2. 搜尋 Ghost 模板: 在搜尋框輸入「Ghost」,你會看到一個模板,直接點擊「Deploy」。
  3. 設定 Domain: 這邊的 Domain 就自己設定一下,其實設定什麼都沒關係,因為之後我們還是會連到你自己的網域。設定好就點擊「Deploy」。
  4. 等待部署完成: 接下來就等它跑完部署。通常不會太久,像我這邊就已經部署成功,而且正在運作中了。
  5. 檢查 Ghost 狀態: 不過,這時候我們要先回到 Ghost 檢查一下,可能會看到它還沒有正確處理請求。別擔心,這是正常的!
  6. 輸入啟用指令: 因為 Ghost 需要先輸入一行指令才能正確啟用。這段指令的格式是 ghost config url https://你的測試網域名稱
    • 找到你的網域名稱: 你的測試網域名稱可以在 Zeabur 的網路設定那邊找到。
    • 執行指令: 點選「執行指令」,然後把剛剛拿到的那串代碼貼上去,再把後面的網域替換成你剛剛設定的測試網域名稱。
    • 注意: 因為目前我們用的是測試網域,之後更換到正式網域時,需要再重新操作一次這個流程喔!
  7. 等待設定完成: 執行的時候可能會看到幾次失敗,不過沒關係,我們就把指令複製起來,有時候要等它跑完才能設定。看到它顯示設定成功,並且開始建立 Table,就表示快完成了。
  8. 確認啟用: 就算右側顯示 Failed,它其實也有設定到,會自動開始建立檔案。當你看到相關的記錄後,就代表建立完成了。
  9. 測試網頁: 接下來點擊測試網頁網址,正常來說你應該就會看到你的部落格頁面了!
  10. 進入管理員註冊頁面: 在網址後面加上 /ghost,你就可以進到管理員註冊的頁面。
  11. 設定網站資訊:
    • Site Title: 網站的標題,我會建議跟之前 WordPress 的網站標題設定一樣。
    • Full name: 你的名稱,建議使用你在 WordPress 的作者名稱。
    • 這兩個設定你可以根據自己的喜好調整。如果你忘記 WordPress 的網站標題在哪裡設定,通常在後台的「一般」設定裡面可以找到,直接複製過來就好。

第二步:匯出 WordPress 文章

  1. 進入設定: 在 Ghost 後台點選左邊的「設定」。
  2. 選擇 Import: 這邊你會看到一個「Import」的選項,點進去。
  3. 尋找 WordPress: 你會看到 WordPress 的選項,點選它。
  4. Import from WordPress: 點擊「Import from WordPress」。
  5. 輸入部落格網址: 在這邊輸入你的 WordPress 部落格網址,然後點擊「Continue」。
  6. 下載 WordPress XML 檔案: 這邊它會需要你先去 WordPress 下載一個包含所有文章設定的 XML 檔案。
    • 回到你的 WordPress 後台,找到「工具」>「匯出」。
    • 點選「下載匯出檔案」。
  7. 上傳 XML 檔案: 回到 Ghost 的 Import 頁面,上傳你剛剛下載的 XML 檔案,然後點擊「Continue」。
  8. 匯入內容: 點選「Import Content」,然後等待它跑完進度條。
  9. 查看匯入的文章: Import 完成後,點擊「View Imported Posts」,你就會看到你之前所有的文章都匯入到 Ghost 了!
  10. 處理預設文章: 這邊你會看到一個預設的「Coming Soon」文章,我建議直接把它刪掉就可以了。

第三步:檢查匯入的文章

  1. 查看文章內容: 隨便點選一篇文章來查看一下。你會發現,連 WordPress 的標題圖片都幫你匯入進去了!
    • 標題圖片: 這個圖片它其實是直接抓取到 Ghost 檔案資料夾的資料,所以這張圖片實際上是存在 Ghost 的。
    • 其他圖片: 但是像其他的圖片,你可能會發現它連結導向的是你原本 WordPress 的網址。這部分我們之後還需要設定 Redirect URL,才能把 WordPress 的圖片搬到 Ghost。
  2. 圖片搬遷的重要性: 如果你沒有搬移這些圖片,在轉移網址的時候,這些圖片可能會全部遺失掉,所以之後我會提到如何把 WordPress 的 Media 轉移到 Ghost。
  3. 編輯器的相容性:
    • 基本內容: 你會看到從 WordPress 匯入後,H1、H2 還有段落這些基本的格式都還在。像我 WordPress 那邊是用 Thrive Architect 編輯器,它還是可以讓我直接在 Ghost 這邊做編輯,我覺得導入的算蠻好的。
    • 按鈕等特殊元素: 不過像按鈕這種比較特殊的元素,它可能會變成 Div 的區塊,之後需要再手動把它轉移成按鈕的形式。如果你是用像 Elementor 或是 Thrive Architect 這種第三方編輯器,導入後可能都需要額外做轉移和設置,這部分稍微有點麻煩。但至少不用整個文件都是 Div 的形式,不用全部重新編輯,只有部分需要調整。
  4. 分類與標籤:
    • Ghost 的 Tag 系統: 原本 WordPress 有分類跟標籤兩種,但在 Ghost 的架構下,它只有一個 Tag 的設定。
    • 分類轉為 Tag: 你原本的分類,它其實是歸類在一個 Main Tag 裡面。你可以點擊文章編輯頁面的 Tag 設定,在右側看到很多 Tag,第一個通常就是你的主要分類,後面的就是次要的 Tag。
    • 重新導向分類: 之後在導向的時候,如果你的 WordPress 分類是有被索引的,那你的這個分類也要一起做重新導向的動作。不過 Ghost 其實有預料到這點,並且有提供相關的代碼。
  5. Ghost 的簡潔設計: 可以看到,Ghost 這邊的設計真的是蠻簡潔的。

第四步:下載 WordPress 媒體檔案

  1. 使用 FileZilla: 接下來我們要將 WordPress 上面的媒體檔案抓下來。我們會用到一個叫做 FileZilla 的工具。
  2. 下載 FileZilla Client: 到 FileZilla 的官網,找到對應的版本下載就可以了,記得是 Client 這個版本,下載免費版就夠了。
  3. 連接 WordPress 主機: 我們接下來要連到你的 WordPress 主機。
    • 尋找主機資訊: 我這邊使用的是 Cloudways 這個服務來架設 WordPress,所以我就以 Cloudways 做示範。不過通常每一家主機都有提供 SFTP 的存取方式,根據你的主機商提供的資訊找到就可以了。
    • FileZilla 設定: 回到 FileZilla,選擇「站台管理員」。
    • 新增站台: 點選「新增站台」,設定如下:
      • 協定: 選擇 SFTP。
      • 主機: 填上你在主機商那邊找到的 Public IP。
      • 使用者: 填你的信箱名稱,或者是你在主機主動新增的 Username。
      • 密碼: 填上對應的 Password。
      • 連接: 填完之後,點選「連線」就可以連到你的主機了。
  4. 尋找媒體檔案:
    • 進入 Public HTML: 連線成功後,你會看到右邊有很多檔案資料夾。找到「public_html」這個資料夾點進去。
    • 尋找 WP-Content: 接著你會看到「wp-content」這個資料夾,一樣點進去。
    • 尋找 Uploads: 我們要的媒體檔案在「uploads」這個資料夾裡面,點進去後你會看到很多以年份和月份命名的資料夾。
  5. 下載 Uploads 資料夾: 我建議你直接下載整個「uploads」資料夾。
    • 建立本地資料夾: 在你的電腦左側(本地端),先找到一個你想要存放這些檔案的資料夾,如果沒有可以先創建一個。
    • 開始下載: 在右側的「uploads」資料夾上點擊右鍵,選擇「下載」,它就會開始把所有的媒體檔案下載到你剛剛選定的本地資料夾。
  6. 壓縮檔案: 等待下載完成後,你會在本地端看到你在 WordPress 上面的所有媒體檔案資料夾。接下來,將這些資料夾全部壓縮成一個檔案。
  7. 轉換為 TAR 檔: 壓縮完成後,我們需要將它轉換成 TAR 檔。之所以要轉換成這種格式,是因為 Zeabur 比較方便上傳 TAR 檔。
  8. 上傳到 Zeabur:
    • 打開檔案管理器: 回到你的 Zeabur 後台,點擊你的 Ghost 專案,然後選擇「檔案」。
    • 找到 TMP 資料夾: 找到名為「tmp」的資料夾。
    • 拖曳上傳: 用拖曳的方式將你剛剛壓縮好的 TAR 檔案上傳到 TMP 資料夾裡面。
  9. 執行解壓縮指令: 上傳完成後,打開 Zeabur 的「指令」頁面,然後執行這行指令:tar xvf /tmp/2019.tar -C /var/lib/ghost/content/images
    • 注意: 這行指令是將壓縮包解壓縮到 Ghost 存放媒體檔案的特定路徑。每一個壓縮檔都要執行一次,所以如果你是分年份壓縮的(例如 2019、2020),就要分次執行。
  10. 確認上傳成功: 你可以開啟 Zeabur 的「檔案管理器」,然後找到 /var/lib/ghost/content/images/ 這個路徑,檢查裡面是否有你上傳的年份資料夾,如果有看到就表示解壓縮成功了。
  11. 分批上傳: 如果你的媒體檔案很多,可以分批壓縮上傳,然後重複執行解壓縮的步驟,確保所有的檔案都上傳成功。

第五步:設定重新導向 (Redirects)

  • Ghost Redirect URL
    • 參考範本如下,如果會擔心也可以直接到官網查看範例
  1. 了解 Ghost 的重導向設定: 在 Ghost 這邊,重導向分別有 301 和 302 兩種可以設定。
    • 301: 代表永久轉址,通常用於網站結構的變更,SEO 權重也會跟著轉移。
    • 302: 代表臨時轉址,像是你可能在 WordPress 用 Pretty Links 這類外掛建立短連結時會用到。
    • 301 永久轉址:
      • ^\/category\/(.*): /tag/$1: 這一行是將你 WordPress 網站中所有以 /category/ 開頭的網址,都永久轉址到 Ghost 的 /tag/ 底下。$1 代表的是 (.*) 這個括號中匹配到的任何內容。例如,https://你的網域/category/wordpress-教學/ 會被轉址到 https://你的網域/tag/wordpress-教學/
      • ^\/wp-content\/uploads\/(\d{4})\/(\d{2})\/(.*): /content/images/$1/$2/$3: 這一行非常重要!它可以將你原本 WordPress 的圖片連結重新導向到 Ghost 的路徑下。
        • \/wp-content\/uploads\/: 匹配 WordPress 圖片路徑的開頭。
        • (\d{4}): 匹配四位數字的年份,並將其捕獲到 $1
        • \/(\d{2})\/: 匹配斜線和兩位數字的月份,並將其捕獲到 $2
        • (.*): 匹配年份和月份之後的所有內容(通常是檔案名稱),並將其捕獲到 $3
        • /content/images/$1/$2/$3: 將匹配到的內容替換成 Ghost 的圖片路徑格式。例如,https://你的網域/wp-content/uploads/2023/04/my-image.jpg 會被轉址到 https://你的網域/content/images/2023/04/my-image.jpg
    • 302 臨時轉址:
      • /geekaz-discord/: "https://discord.com/T6jH8AFt4D": 這是一個 Pretty Links 的範例。當使用者訪問 https://你的網域/geekaz-discord/ 這個網址時,會被臨時轉址到 https://discord.com/T6jH8AFt4D 這個 Discord 連結。你可以根據你自己的 Pretty Links 設定,新增更多類似的規則。
  2. 上傳 redirects.yaml 檔案: 將你編輯好的 redirects.yaml 檔案儲存好。回到你的 Ghost 後台,到「Setting」 > 「Labs」找到「Redirects」,然後直接把你這個檔案上傳上去。這樣你的轉址就設定完成了!
  3. 重要提醒: 要特別注意的是,在你的網域名稱後面,也就是冒號 : 後面一定要加上空格,不然會顯示失敗!

編輯 redirects.yaml 檔案: 你需要建立一個名為 redirects.yaml 的檔案,然後將你的重新導向規則寫在裡面。以下是一個範例,你可以根據自己的情況修改:YAML

301:
    #分類、圖片重導向
    ^\/category\/(.*): /tag/$1
    ^\/wp-content\/uploads\/(\d{4})\/(\d{2})\/(.*): /content/images/$1/$2/$3

302:
    #Pretty Links
    /geekaz-discord/: "https://discord.com/T6jH8AFt4D" #以此範例會將 https://你的網域/geekaz-discord/ 轉址到 https://discord.com/T6jH8AFt4D

第六步:檢查 Tag 設定

  1. Public Tags: 在 URL 重導向設定完之後,點選 Ghost 後台的「Tag」。你會看到「Public Tags」這邊有你原本在 WordPress 的標籤,加上你前面轉移過來的分類。
  2. Internal Tags: 「Internal Tags」就是不會讓使用者或讀者看到的標籤,它是作為內部標記使用的。從 WordPress 轉過來的文章,它都會顯示像是 WP- 開頭的這些 Tags。
  3. 處理舊有 Tags: 這些 Tags 你可以選擇刪掉或者留著,其實都沒關係,就看個人決定。

第七步:檢查文章的 SEO 設定

  1. Excerpt 欄位: 回到其中一篇文章的編輯頁面,你會看到一個叫做「Excerpt」的欄位。這個欄位是跟 Meta Description 連在一起的。
  2. Meta Description: 假設你匯入後,這邊都有抓到你之前文章的設定,那其實你就不需要再做額外的設定,它就會顯示在這裡。但如果沒有的話,我就會建議你把原本 Meta Description 的內容貼到這段,它就會自動放到後面的 SEO 設定中。
  3. 實際顯示位置: Meta Description 實際顯示的地方通常在文章的最開頭。
  4. 重新設定 SEO 插件: 像我原本使用的 WordPress SEO 插件是 RankMath,那我現在就是要全部把它在 Ghost 這邊重新設定一次,才能讓每一篇文章的 SEO 設定能夠維持原本的 Mate Description 和其他設定。
  5. 檢查編輯器相容性: 另外,像我原本使用的是 Thrive Architect 這個主題的編輯器插件,它裡面的按鈕到 Ghost 這邊就沒辦法正常顯示,所以我需要去重新設置每篇文章的按鈕。如果你原本使用的是 WordPress 內建的編輯器,那裡面的按鈕應該是可以正常抓到的。
  6. 搬移前的準備: 在搬移之前,你可以再去檢查一下每一篇文章的設定,這樣在搬移的時候會更保險一點。

第八步:最終網域轉移

  1. 在 Ghost 設定網域: 在你還沒做網域的設置或轉移之前,你可以在 Ghost 這邊慢慢去設定。設定完檢查確定 SEO 設定都沒問題後,再把原本 WordPress 的網域轉到 Ghost,它才會正式啟用。在這之前不用太擔心調整設定會不會搞壞。
  2. Zeabur 綁定自訂網域: 我們先回到 Zeabur,然後在網路設定那邊選擇「綁定自訂網域」。點選確認綁定之後,它會需要你在你的網域服務商那邊新增一些設定。
  3. 刪除舊的網域設定: 我們需要先刪除一個文件才能重新設定網域。回到 Ghost 設定,選擇「Open Config Editor」,點擊「Add Config File」,然後搜尋 /var/lib/ghost/config/production.json,點擊「Save Config」。你會看到它索引到一個文件,點擊垃圾桶圖示把它刪除掉。
  4. 執行 Ghost CLI 指令: 刪除後回到 Zeabur 的「服務狀態」>「指令」,在這邊直接輸入 ghost config url https://你的網址名稱,之後再點選 Enter 送出就可以了。
  5. 重啟 Ghost 服務: 再回到 Zeabur 的 Ghost 專案,點擊「重啟目前版本」。
  6. Cloudflare DNS 設定: 接下來到你的網域服務商(像我這邊是 Cloudflare),把網域的 DNS 設定改過來。通常會有一些舊的網域設定是指向你之前 WordPress 伺服器的網址,建議先找到並刪除掉,然後再新增一筆 A 紀錄,將你的網域指向 Zeabur 提供的 IP 位址。
  7. Zeabur 確認連線: 回到 Zeabur 這邊,重新整理一下,看到顯示連線成功就表示網域已經成功綁定到你的 Ghost 網站了!
  8. 測試網站: 接著到你的網址去試看看,如果可以正常連線,就表示成功了!
  9. 登入 Ghost 後台: 一樣在網址後面加上 /ghost,登入後就代表你的網站已經成功從 WordPress 搬家到 Ghost 了!

第九步:設定 2FA 雙重驗證 (建議)

  1. 使用 Cloudflare Zero Trust: 如果你的網域是由 Cloudflare 代為託管的,我強烈建議設定 2FA 雙重驗證來提高安全性。
  2. 註冊並進入 Zero Trust: 到 Cloudflare 的帳戶首頁,註冊並點選「Zero Trust」。
  3. 新增應用程式: 在 Zero Trust 的頁面,點擊「Access」>「應用程式」,然後選擇「加入一個新的應用程式」>「自我裝載」。
  4. 設定應用程式名稱: 為你的應用程式設定一個名稱(例如 Ghost Admin),然後點選這個名稱。
  5. 設定子網域 (如果有的話): 如果你是使用子網域,記得在這邊輸入。通常沒有的話就直接選網域,後面斜線它已經幫你打好了,這邊就打上 ghost 就可以了。
  6. 設定 Access 原則: 這邊你需要新增一個 Access 原則。
    • 新增規則: 點擊「新增原則」,為你的原則命名(例如 Admin Access)。
    • 設定登入方式: 在「設定規則」下方,找到「Configure rules」,然後在「Login Methods」這邊選擇你需要透過信箱收取驗證碼才能登入。記得這邊是使用「需求 (Require)」>「And」>「使用 Login Methods」,然後選擇「包含 (Include)」>「電子郵件驗證」。
    • 限制登入郵箱 (可選): 你可以在這邊設定只有特定的 Email 才能登入。如果是一個多人協作的團隊,記得將所有人的 Email 都輸入到這個欄位,確保它變成 Tag 的形式。
    • 儲存原則: 確認沒問題後就點選「儲存」。
  7. 測試 2FA: 接下來當你嘗試登入 Ghost 後台時,它會要求你先取得一個信箱認證的驗證碼。輸入你設定好的信箱,如果這個信箱不在你剛設定的範圍內,你將不會收到驗證碼。輸入驗證碼後,你就可以順利登入 Ghost 後台了。

第十步:設定 Google Search Console

  1. 進入 Google Search Console: 先進入你原本 WordPress 網站的 Google Search Console 面板。
  2. 找到 HTML 標記: 到「設定」>「擁有權驗證」,找到 HTML 標記那邊,將那段代碼複製起來。
  3. 插入 Ghost Header: 到你的 Ghost 後台,選擇「Code Injection」,然後在他的 Header 這邊插入你剛剛複製的代碼,然後儲存。
  4. 驗證: 回到 Google Search Console,點選「驗證」就完成了。這樣 Google 就可以索引到你的 Ghost 網站了。

第十一步:搬家後的檢查

恭喜你,到這邊你的網站就已經成功搬家到 Ghost 囉!

  1. 仔細檢查 GSC 報表: 我會建議在搬家完成後的 7 天內,仔細去看一下 Google Search Console 的報表,看一下數據有沒有異常,或者是有沒有網頁出現錯誤。
  2. 檢查流量與 SEO: 檢查一下網站流量有沒有大幅下降,以及你的 SEO 設定是不是都有成功轉移。
  3. 注意小細節: 有些小細節需要特別注意,例如圖片的替代文字等等。
  4. 移除舊主機: 如果確定都沒問題了,你就可以把之前在其他地方租的舊 WordPress 主機給移除囉。不過其實你可以考慮把緩衝期留長一點,確認完全沒問題之後再移除舊的資料。

結語

以上就是我個人從 WordPress 搬家到 Ghost 的詳細教學,希望對你們有幫助!如果在搬家過程中遇到任何問題,歡迎到我的 Discord 群組留言詢問,我會盡力協助大家。祝大家搬家順利!掰掰!

加入 科技宅阿高 Discord 伺服器!
快到 Discord 上的 科技宅阿高 社群消磨時間,與 46 位成員享受免費的語音與文字聊天。