從medium到hexo

Joe Chang
Coding Hot Pot
Published in
Jan 13, 2024
photo by @ej1209_

近期在medium上面想閱讀別人的文章,偶爾會跳出彈窗要求你成為付費會員才能觀看完整文章,這讓我不禁在思考,是否別人想看我寫的文章也會遇到一樣的問題?畢竟當初我寫文章的初衷有一部分是希望可以和別人分享技術和開發經驗,因此medium這政策讓我非常的困擾

看到一半,文章內容就被截掉叫你付費升級

再來就是在medium後台查看某些文章的觸及率真的是慘不忍睹但有些又意外的好(?

這懸殊的觀看比例有嚇到我,還是其實跟寫的題目有關?😆

之前有拜讀過huli大大的一篇文章「在 Medium 上寫技術文章,你確定嗎?」,裡面提到的內容『SEO的痛點、無法分類、搬家困難等等』確實都是medium的缺點

另外讓我動了想要搬遷的念頭原因之一是搬家困難這點,雖然説medium不太可能像無名小站有一天停止營運,但沒有什麼事情是不可能發生的,假設那時的我已經累積了五百多篇文章,要在短時間內migration到其他平台絕對會吐血,因此還是要防患於未然,決定把現有的文章都先搬到自架部落格上面

自架部落格有很多選項,選擇hexo的原因有以下

  1. 資源豐富,針對大部分的使用情境都有提供一套解決方案
  2. 遇到問題的話能夠能有比較多的文章作參考
  3. hexo已經有不少現成的模板可以拿來套用(我就懶

開始搬遷之旅

以下的文章內容並不會講解每個設定細節,在文章的結尾會放上我的hexo repo供大家做參考

迄今為止要將在medium上寫的114篇文章搬遷到自架部落格,是一個非常浩大的工程,因為medium僅能匯出html,但hexo需要的是markdown的格式,手動轉換肯定是不是個好選擇,試了好多轉換工具,最後採用medium-2-md這套工具,轉換的過程只能用坎坷兩個字來形容,本來預期三天搞定結果最後搞了兩個禮拜,一開始嘗試轉換一兩個檔案,都沒什麼問題,但一口氣轉十幾個問題就慢慢浮現了

  • 一次export太多檔案,會有零散的幾個檔案export 失敗
  • 有些檔案轉換完之後格式跑掉,只能手動修復
  • 雖然export 成功了,但是圖片會無法顯示(如下圖),需要單獨的export

由於批量轉換不是很可靠,只好仰賴人力了!每一篇文章我都要人工做檢查,還要跟medium上的文章做格式比對,好不容易才完成這個苦差事

最痛苦的前置作業結束了,再來就是要安裝hexo cli

npm install hexo-cli -g

這樣就能透過下指令建置hexo project,然後將所有的markdown都放到source/_posts底下,圖片的話也是放到source底下,再用絕對路徑的方式連結即可

接下來在github上面建立blog的repo,repo name必須設定為 {userName}.github.io

repo的名稱需要以github的帳號開頭

並且設定好ci,這樣每次push 到main分支,就會自動跑相關的建置,方便部署新的文章,新增/.github/workflows/pages.yml

name: Pages

on:
push:
branches:
- main # default branch

jobs:
pages:
runs-on: ubuntu-latest
permissions:
contents: write
steps:
- uses: actions/checkout@v2
- name: Use Node.js 18.x
uses: actions/setup-node@v2
with:
node-version: "18"
- name: Cache NPM dependencies
uses: actions/cache@v2
with:
path: node_modules
key: ${{ runner.OS }}-npm-cache
restore-keys: |
${{ runner.OS }}-npm-cache
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public

再來就是挑選主題了,預設的我實在不喜歡,一開始試了幾個比較花俏的主題,看久了眼睛好痛 😆,決定換回樸素的主題 — next theme,在調整主題的時候爬了很多文章發現都是舊版的寫法,不適用於新版的next theme,所以花了很多時間在研究新版的next theme到底該怎麼設定

👉 hexo next的設置可以參考官方的指南

這個主題超級撞,但是最耐看

然後為了分類和標籤這個兩個功能,需要手動為每一篇文章加上tags和categories

接下來要在source底下新增categories和tags資料夾,並且放入對應的index.md

最後要到_config.next.yml,next-theme預設是關閉tags和categories,所以我們需要將menu原本註解掉的tags和categories打開

_config.next.yml的是next theme的設定檔

設定完之後,hexo會生成tags和categories,自己寫過哪些主題就一目瞭然了

標籤的頁面
分類的頁面

一開始沒打算購買domain,但自架blog感覺還是要有自己的domain比較到位(?,最後選擇用godaddy購買,操作非常簡單,網頁點一點之後用信用卡付款搞定,買一年期的只花了台幣五百多塊,接下來將買好的網域與github做綁定,詳細設定可參考這篇

然後就是一些瑣碎的步驟,看個人需求,可做可不做

  • 設定sitemap,以利google爬蟲引擎搜索
  • 設定google analytics,追蹤瀏覽人次
  • 新增hexo-next-utterance留言評論功能,只要有github帳號就能夠留言
在google analytics上面的瀏覽數據

個人本來對於hexo的期待是簡單易用,但實際上設定的流程比我想得繁瑣很多,hexo-next theme官網的文件我覺得不是很友善,常常找不到我要的東西,印象中我只是為了讓我的頭像可以正常顯示就搞超久,怪不得之前看到一篇文章寫說用hexo架站需要有強大的「耐心」,然後設定檔沒寫好很容易就build fail了,初始設定真的弄的心很累,如果日後有其他更簡單易用的方案,我應該會考慮跳槽吧

最終產出的成果:https://codinghotpot.com/

是否繼續會在medium寫作

答案還是肯定的,老實說medium在撰寫文章的體驗上還是優於自架部落,目前還是會維持在medium上寫文章,然後定期地把文章搬到自架部落格上,也算是算是定期做備份的概念,等之後比較有空再來研究HexoEditor要怎麼導入或是讓自己盡快習慣用markdown寫作😆

如果有一天medium真的變成會員制才能瀏覽文章,那我就已經有本錢可以說走就走了

--

--

Joe Chang
Coding Hot Pot

前端工程師,唯有非常努力,才能看起來毫不費力