---
tags: 'web'
title: 'Hackmd api + next.js 在 github 上架 blog'
---
## 前言

之前一直很想做個部落格，中間有試著用 Django 框架寫一個 blog 系統，但想自己架卻總是覺得要租個機器，不太想花那個錢，這件事便一拖再拖，後來發現在臉書上看到了 [[1.]](#reference) 的文章 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.]](#reference) 裡面都有，這邊就不再贅述

## 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
](https://hackmd.io/@DailyOops/hackmd-as-cms-blog-feat-next-js?type=view)
2. [next.js start up](https://nextjs.org/learn/basics/create-nextjs-app)
3. [Next.js 入門：使用 next export 輸出 static file](https://simonallen.coderbridge.io/2021/07/15/nextjs-export-static/)
4. [actions-gh-pages](https://github.com/peaceiris/actions-gh-pages#%EF%B8%8F-create-ssh-deploy-key)