從medium到hexo

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

近期在 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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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 打開

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


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

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

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

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

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

是否繼續會在 medium 寫作

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

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