桌面

談再整理自己的文章(上) — 5分鐘匯出 Medium 和 Wordpress 文章至 Markdown

經過多年,我的網誌又再搬家了,有時候已經忘記了有甚麼平台還要發佈。Wordpress 也是寫下寫就中斷了。

寫這篇文的沿起,是一月的時候,回顧自己 2020 的目標。雖然新年目標都希望自己寫得更頻密,結果出來還是不太好,過去兩年頂多也是一月一篇,寫的大多都是英文關於設計的文章。

一年前在學 React 用 Gatsby 寫個人網頁,2019 年尾終於完成最後一塊拼圖!把原本相片 Portfolio 的網頁也搬過去。寫下自己「整」不同東西的過程,或許才是本身最值得寫的題材。趁現在武漢肺炎肆虐,留在家中的時間多了,決定連網誌也搬家,分享整 Blog 的過程,順便回顧一下自己網誌隔幾年就會搬家的習慣(每次搬家也跟自己說是最後一次)。

觀及三代的網誌,其實也是平行存在的,只不過是按有發佈文章的年期分割。

第一代 — Wordpress (2007- 2017)

Xanga (? - 2013 )時寫的東西,還是不要獻醜,Wordpress 世代律很有興致分了兩個網誌,一個是個人的(2008-2017),另一個是科技(2011-2014)。兩邊或許中間也轉過不少 theme,不過始終也是也使用免費的 Wordpress.com 而非自行架站的開源 Wordpress。

第二代 Medium (2012 - 現在)

Medium 第一天開放的時候,我已經是用戶,當年還是搶著註冊 @samuelwong 的用戶名(後來註冊個人網頁才統一成 @desktopofsamuel) 。

當時還有一封來自創辦人 Ev Williams 的邀請信。Medium 初期的文章以英語為主,華文博客世界大約是 17 年紛紛跳槽到本來英語為主 Medium 上寫文。Medium 本來以收費模式分帳予作者,是個頗理想的方式讓人可以寫文為生。不過,Medium 的付費牆越來越大的時候,先前的熱潮倒成了逃亡潮,幾個有名 Medium Publications(如 The MissionHackernoonFreeCodeCamp)卻宣佈離去。在 2019 年 10 月 Medium 調整作者收入計算方法,由按「拍手」(Clap)數量到閱讀時間為計算收入最重要因素,今年 2020 年初更宣佈對海外作者預先留起 30%收入作徵稅用途,現在寫手收入已經大不如前,Medium 也應該頭痛如何繼續下去。

第三代 Gatsby (2020 - ?)

2020 年,個人化朝著兩大方向發展。近年越來越多人建立自己的 Subscription Mail List,最直接送到讀者的 Inbox,廣告收益也較高,有些記者或作者的 Mail List 甚至是付費才能加入的,這大概是更加親密的 Patreon 吧。

第二,就是自架網站。以往架站有一定固定成本,網址 Domain 的每年續約費用再加上寄存 Hosting 的開支。Netlify 的出現卻讓靜態網頁找到一個免費的家,只要駁上程式碼 repo 如 Github,就可以自動發佈。而 Gatsby 就是一個以 React 為本的新的靜態網頁框架(Static Site Generator),可以接駁不同 CMS 或直接打 Code 製作自己的網誌或作品集。

轉到個人網站有幾個好處,首先是客製化,網頁的自由度大,有更強的辨認度,比起文章放在 Medium 跟全世界其他作者一式一樣好了。

Medium 倒只是一個發佈及社交平台,用作更多 backlink 和獲得更高 SEO 排名的方法。最終 call to action 的地方,還是全盤自己控制的個人網頁。而外國不少 coder 和 designer 也由 Medium 轉到自己網頁,畢竟 Medium pivot 成付費平台後也不再是原本的 CMS 的概念。

所以現在主站 desktopofSamuel.com 就是英語版,有自己設計的作品集和自我介紹。副站 notes.desktopofSamuel.com 就是新的中文網誌。新網誌希望開始寫多一點自己日常生活在科技的嘗試,開展不同的寫作計劃,如 Paul Stamatiou 我的器材頁。大部分文章還是會發佈到 Medium ,但你亦可以用 Feedly 或其他 App 訂閱我的 RSS

匯出 Medium 和 Wordpress 文章至 Markdown

今次將分享一下快速用 Gatsby 建立網誌的過程。我最初也是只懂 HTML 和 CSS 摸著學。如果跟著一個 template 開始的話,往後也是用 CMS 上載文章,其實沒有想像中那麼複雜的。

上半部分先教大家如何匯出文章,現在寫作很熱門的不是用甚麼軟件,而是 Markdown 這個格式。基本上,Markdown 就是易讀易寫的文字格式,可以匯出成不同風格的 HTML 檔。現時熱門的筆記應用如 Notion 和 Bear 都支援 Markdown 。iPad 上著名的寫作 App 如 iA Writer 和 Ulysses 也同樣支援。(偏偏 Evernote 現在還未支援)

只要學會幾種基本 Markdown 語法,如標題用 「#」標記、鏈結是 [鏈結顯示的文字](網址) ,就可以開始編寫。很多新網誌的 Framework , Markdown 格式也通用,換然之,匯出 Markdown 將是持久保存網誌的方法。

如何從 Wordpress 匯入 Markdown 文章

我們會使用 Will Boyd 開發的 Wordpress Export To Markdown。他的 script 體貼仔細支援不同 folder 的建立格式及相片下載。如果已經有 Node.js 、NPM 和 Git 可以跳過第 2 和第 3 步。

  1. Wordpress 匯出 要從 Wordpress 匯入 Markdown 文章,先在自己的 Wordpress 匯出,選「所有內容」的 XML 檔,然後更名為 export.xml

  2. 安裝 Node.js 和 npm 這段 script 是用 Node.js 寫的,所以先需要下載 Node.js。我建議是 下載 NVM (Node Version Manger)(Windows, Mac / Linux) NVM 的好處是比較容易讓你轉換不同 Node.js 的版本,如這 script 需要 Node.js v12.14(我原本 Node.js 是 v10 然後便發生錯誤)。或想簡單一點就到 Node.js 下載。

    1. 打開 CMD,然後輸入 nvm 測試是否安裝好
    2. 輸入 nvm install v12.14.0 開始下載
    3. 輸入 nvm use v12.14.0 開始使用
    4. 輸入 node -v 檢查版本是否 v12.14
  3. 下載 Script

    1. 在 Github 按緣色按鍵下載 Zip 檔,或直接 git clone https://github.com/lonekorean/wordpress-export-to-markdown
    2. cd ../ 轉到下載的位置 如 cd C:\Users\Samuel\Downloads
    3. 再轉到 cd wordpress-export-to-markdown 的 folder
    4. 複製剛才在 Wordpress Export 的 export.xml 檔到同一 folder 內
  4. 運行 Script

    1. 先安裝這段 script 需要的 dependencies,輸入 npm install
    2. 再運行 script node index.js
    3. Script 將會問幾條問題作設定,如 xml 檔名,output 的 folder 名,是否需要按年月日分開 folder,是否下載所有相片
    4. 若跟隨我用 Gatsby-Starter-Lumen,最好跟回 Netlify CMS 的格式(不分日期,只加日期於檔名前,下載所有圖片)

如何從 Medium 匯入 Markdown 文章

  1. Medium 匯出 到 Medium 的 Settings 下載自己所有 Data,Posts 這個 folder 將有所有文章。可惜的是,你的所有回覆也被視作 posts,要自行手動挑走。

  2. 安裝 Node.js 和 npm 安裝 Node.js 不在此重覆,重溫上面如何從 Wordpress 匯入 Markdown 文章教學

  3. 安裝 Gautam Dhameja 的 medium-2-md script https://github.com/gautamdhameja/medium-2-md ,或直接在 npm 下載

  4. 按指示運行 medium-2-md convertLocal /posts -dfi

手動更新環節

由於 Gatsby 不同 template 的格式各有不同,要視乎用哪種方法去 query 所有 markdown 檔案(這也是 Gatsby 的彈性)。Markdown 的 frontmatter 最後還是要我們自己手動處理,Frontmatter 就是每個 markdown 的屬性,如我將使用的 Gatsby-Starter-Lumen 需要標明 template 是屬於 post 而非 page,以及 draft的狀態是false。再者,以上兩段 script 裡的 tags 和 category 的命名未必符合。所以我將需要手動處理統一所有 Markdown 的 Frontmatter。

template: post
draft: false
category: "notes"
tags:
- "tag1"
slug: "xxxx"

每個檔案也要加回這五個 frontmatter,這可以顯示出來。當然若你有過千篇文章的話,應該再花時間鑽研 script 去處理。不過,我的文章數量不太多,所以不用了。另外由於這個 Starter 的媒體庫名是 media 而非 images ,我們要把所有完成 Markdown 的images/ 替換成 media/,用 VSCode 的 Search & Replace 就好了,最後便把所有 Markdown 複製到 Content / Post,然後所有相片複製到 Static / Media 。不過我留意到有時下載的圖片是 Error 的,有機會引致 Gatsby 出現問題,所以要再三檢查一下,所有相片是否正常下載到。

後記和感想

最後也花一星期的時間去整理百多篇文章,面對自己十年來的寫作也是頗痛苦的過程,有些太年青的想法最終也是收起來自己收藏。

Keep In Touch

在社交媒體消失前,讓我們繼續保持聯絡,以電郵接收最新通訊!