Blog.

Hackmd api + next.js 在 github 上架 blog

前言

之前一直很想做個部落格，中間有試著用 Django 框架寫一個 blog 系統，但想自己架卻總是覺得要租個機器，不太想花那個錢，這件事便一拖再拖，後來發現在臉書上看到了 [1.] 的文章 github 上也可以自己架部落格，便開始研究怎麼弄，也順便學了一點 next.js

why next.js

首先，要在 github 上架網站都有一個限制，就是僅限靜態網站，因此便需要用到了 next.js 的 SSG 功能，透過這個功能便可以生出部落格靜態的頁面部署到 github 上。

next.js 有提供簡單的部落格範例可以使用，這個專案的內下都是從那個範例做修改的，雖然是從範例改，但由於算是第一次深入接觸 js ，真的是各種撞牆，做了許多嘗試才算完成。

接上 hackmd api

使用的 api 主要有兩個

  1. https://hackmd.io/api/@{Group_id}/overview 取得貼文列表
  2. https://hackmd.io/{note_id}/download 取得文章內容

細節在 [1.] 裡面都有，這邊就不再贅述

markdown 轉 html

markdown 轉到 html，這個專案用的是 mardown-it 和 highlight.js。

轉完之後要記得設定 highlight 的 CSS，不然 code 區塊的樣式只會有 html 標籤

// pages/_app.js
import '../styles/index.css'
import 'highlight.js/styles/github.css'
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

deploy to github

基本上只要設定好 key 跟 github workflow ，就可以透過 github action 自動部署你的網頁。

下面是我的 workflow yml，這個檔案是透過 github action 那邊的選項生出 node.js 的 deploy 模板後，再去剪貼參考其他人的 yml 改的。

name: Deploy to Github Pages
on:
  push:
    branches:
      - main
  workflow_dispatch:
jobs:
  deployment:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [14.x]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Update NPM
        run: npm i -g npm@latest
      - name: Cache dependencies
        uses: actions/cache@v2
        with:
          path: ~/.npm
          key: ${{ runner.OS }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.OS }}-node-
            ${{ runner.OS }}-
      - name: Build
        env:
          HACKMD_PROFILE: ${{ secrets.HACKMD_PROFILE }}
        run: |
          npm i --legacy-peer-deps
          npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./out

過程中會需要生一組 deploy 的 ssh key

$ ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

去 github settings > deploy key 新增一個，並把剛剛生出來的 gh-pages.pub 內容放進去，然後去 secrets 的地方新增一個 secrets ，取個名字後就可以在 deploy 作環境變數使用。

心得

大概花了快一週的時間做這個，從一開始完全不懂，一直撞牆，到開始慢慢摸熟 next.js，開始會改之後，還滿有成就感的，實際上還滿多細節想要調整，不過這之後再說ㄌ .3.

reference

  1. 把 HackMD 當做部落格後臺 feat. Next.js
  2. next.js start up
  3. Next.js 入門：使用 next export 輸出 static file
  4. actions-gh-pages