我寫一篇文章的流程：使用 Craft 與 MWeb

自從享受到 Markdown 的好之後，在寫作、筆記的時候，我對簡單的定義是：「讓手能夠越少離開鍵盤越好！」〔延伸閱讀：Markdown 如何翻轉我的數位體驗〕

另外一個方面，是我從電腦玩物的留言串中獲得的啟示，雖然每次都看到電腦玩物介紹許多新的網路服務或者軟體，但 Esor 站長始終維持著 Evernote 的使用，配合上他使用的其他項目，曾經有一段留言他提到：

以我的概念來說，專案、任務管理工具，對自己個人來說，一個就好。

回顧之前的我，手上大概有很多不同的工具，每一個工具功能上多有重疊，而我的使用也通常都不順手。原因我找了很久，最後發現關鍵在，使用的上面，缺乏了核心思想。〔參考：使用的服務/工具一覽〕

最後，慢慢地體會到，我設定的條件會有三個面向：

1. 速度；
2. 簡單；
3. 持續。

透過這個面向重新檢視，我發現在寫作的軟體上的使用上，離這三個原則有一段落差。原本我使用的方式是 iA Writer 寫作，然後編輯好圖片放到 Imagekit 之中，最後上傳到 Github 透過 Netlify 部署。

後半段部署的內容很系統，但前半段過往我總是處於雜亂無章之中，引起了我需要好好梳理的想法。剛好將核心筆記軟體轉換到 Craft，同時自己過去買的軟體 MWeb 大幅度的升級，整個體驗跟感覺都有大幅度的提升，配合內建的功能，圖床也順勢做了一點變更。

網站文章編輯流程

其實網站文章編輯，我大致上就是使用了 Craft 跟 MWeb Pro 這兩套軟體，之後就只有透過 Github Desktop 上傳，然後透過自動部署的方式發布網站。

草稿編輯：Craft

Craft 在速度感上面目前的體驗非常優，其實他所提供的功能遠大於一個筆記的概念。以往我在挑選這類核心軟體的時候，功能跟筆記寫作的流暢感，總是無法兼具，例如 Notion、Agenda 單純的寫作軟體 iA Writer 都是這樣，直到我發現了 Craft。

我花了一段時間，才下定決心，要把所有文章的內容都搬到 Craft 來，本來我是透過 iA Writer 去統一管理，但它其實不適合用來管理 Hugo 用的文檔。Craft 就不同了，他提供了方便的文章收納、互連，等於可以把文章資料庫都搬上來。

最重要的一點是，在上面寫作你不會感覺你在一個複雜的系統寫作，就很像一個簡單的文書編輯器，在速度以及感受上，都跟寫作軟體例如我上面講的 iA Writer、MWeb 一樣。

同時上面的呈現方式，其實就已經接近了網站的呈現方式，連結、圖片等等都可以完整的收納進來。唯一不好的地方是，貼上圖片沒有辦法直接設定說明（caption），會需要再排版的時候再去看一次。

排版：MWeb Pro

很久以前我就開始使用 MWeb 這套 Markdown 編輯軟體，算是我加入 Markdown 之後的第一套從 Markdown 出發的編輯器，但很快就發現成熟度跟使用體驗上面非常的不好，所以就停止使用了。軟體開發者也在 2019 年中的時候，宣布將低度維護，我就轉投其他軟體懷抱了。

因緣際會之下，今年剛好想要針對自己的軟體大重整，加上感覺到 iA Writer 並不適合配合 Hugo 網站文章的編輯使用，搜尋的過程中，MWeb 忽然跳出來，看到要大動作的更新，馬上先試用了一下 MWeb 4 MacOS 測試版本，完全就是翻新了過往的印象，大幅的體驗好感出現。

不管是在速度、編輯器的完整還有介面的設計上面，加上整合的發布服務、文檔的外部模式，一站幾乎就可以完成了文章發布前所有的工作流程。

幾天的思索跟評估，發現不管是在文章搜尋的能力、介面的使用度上面，都更適合我使用，就從 iA Writer 離開。

目前不管是文章的排版，資料夾的管理上面，MWeb Pro 完全能夠當作上稿前的最後一站，因為連圖片上傳，都可以直接在這裡完成。

圖床：imgbb

上面我有提到，我原本的圖床是使用 Imagekit，提供了透過函數直接做簡單的裁剪、縮放的編輯，原先認為這樣很方便，能夠做一張圖上去之後，任意變成想要的格式。後來發現我用的很少，但有一個問題反而成為我關注的情況。

上傳一張圖片到放在文編輯的程序很長，要開瀏覽器上傳、改變檔名去除後綴亂碼、複製圖片網址，再改成 markdown 的文字串編輯。看起來不多，但是要跳視窗，加上要移植點來點去，頻率一高，也就拖慢了速度。

我就開始上網搜尋圖庫的部分，剛好找到了 imgbb 跟 postimages 這兩個，兩者我自己體驗的狀態是速度相當，介面同樣簡單。不過因為 imgbb 有提供 API，等於我可以直接透過. MWeb 發布圖片上去，不用每次要圖片的時候進來找，最後就決定是它了。

設定 imgbb 透過 MWeb 也能上傳

這邊做個小紀錄，如果大家有興趣的話也可以試試看，我自己覺得很方便。

MWeb 很大的一個開發特色，就是整合發布的功能，你可以發不到許多寫作平台以及直接將圖片上傳到圖床。

上傳到圖床的條件就是有支援 API 並且透過 POST 使用的模式。這一點，也成就了 imgbb 成為了我圖床選擇的原因，相較於 postimages，它有提供方便獲得的 API 跟相關的技術文件。

裡面的文件其實還蠻完整的，接下來只要在 MWeb 設定裡面，進入發布服務，自己設定一下相關的數據，大家可以參考我的設定，Key 的部分需要接上你上面拿到 API Key 字串。

相關的詳細內容，開發者之前有寫說明《MWeb 1.9 發佈！新圖標、編輯器大改進、導出 PDF 改進、增加圖床功能、中文版等！》，大家可以去看一下，雖然版本有點舊，但是基本上設定都是類似的，看過能有比較完整的了解。

其中有一段是要參考 JSON 的內容，API 文件也有說明的蠻清楚的，基本上就是抓取 data/url，下面是擷取的原始程式碼。

{
  "data": {
    "id": "2ndCYJK",
    "title": "c1f64245afb2",
    "url_viewer": "https://ibb.co/2ndCYJK",
    "url": "https://i.ibb.co/w04Prt6/c1f64245afb2.gif",
    "display_url": "https://i.ibb.co/98W13PY/c1f64245afb2.gif",
    "size": "42",
    "time": "1552042565",
    "expiration":"0",
    "image": {
      "filename": "c1f64245afb2.gif",
      "name": "c1f64245afb2",
      "mime": "image/gif",
      "extension": "gif",
      "url": "https://i.ibb.co/w04Prt6/c1f64245afb2.gif",
    },

在發布下面的選單可以選擇把本地圖片上傳至設定好的圖床，之前其實是可以自動上傳，在 MWeb 最新的版本，改為需要自主上傳。

每次的上傳，都可以一次把所有的 Markdown 語法複製好，等於一個貼上的動作你的圖片就會在編輯器裡面了，我自己覺得這樣還蠻方便的，達到一次上傳一次編輯。

如果你有發現，其實我訴求的，很大一部分就是希望盡量在每個程序之間，都做完自己的任務，例如：

• Craft：專注寫作，創建草稿跟文章的收納。
  • 提供專心的環境，介面其實很類似寫作軟體 iA Writer；
  • 速度的呈現以及快速編輯的方便；
  • 支援 Markdown 讓我能夠在鍵盤上完成大部分的事情。
• MWeb：改善成為 Hugo 排版的樣式，完整所有排版所需的項目。
  • 提供足夠的外掛程式，讓我盡量排版的時候不要跳來跳去；
  • 完整支援 Markdown，免去刪刪改改的困擾；
  • 能夠管理 Hugo 內容的文件夾。

這大概是最近蠻重要的一個轉換，以前寫一篇文章雖然出發點是 iA Writer 不論是草稿跟完稿都在一起，後來改到 Agenda 寫草稿，用起來都非常的不順手。一方面是 Agenda 對 Markdown 的支援有點侷限，另外一方面 iA Writer 真的是太專注在寫作軟體了。

變成我排版的時候還需要到各地，例如先去 Imagekit 上傳圖片，設定好圖片的連結名稱，然後回到 iA Writer 輸入 Markdown 語法，以前的兩個地方現在只需要在一個軟體處理，還能夠直接複製語法，都大幅的提升了速度跟體驗。

對於這樣的流程改變，我覺得非常滿意！