satake.blog logo
Published on

HackMDで記事作成

HackMDで記事作成

HackMDをつかって記事を作成するテスト

これにより、iPadでも無料で記事作成/編集等ができる

image

HackMDとは

https://hackmd.io/

Markdownをオンラインで編集できるクラウドサービス。NotionのMarkdown版という例えがちょうどよさそう

共同編集なども簡単にできて、フリープランでも画像のアップロード（パブリック限定）ができるなど、結構触りごこちがよい

前提条件

Contentlayer+GitHubで記事の管理をしている

このブログはVercelでGitHubへのコミットをもとにデプロイしているが、HackMDによるコミットではデプロイを発火できないため、マージコミットを手動作成するための別ブランチを用意しておく
リリースPR作成用のGitHub Actionsを設定するなどしておくと、このあたりが楽になるかもしれない

手順

  1. HackMDでユーザー登録をし、設定から[他のサービス許可]→[GitHubと連携する]
    image

  2. 新規メモを作成
    デフォルトのHackMDの改行に対する扱いが本来のMarkdownと違っているため、編集エリアの下部にある[改行]ボタンをクリックして[Rendar newline as hard line breaks]をオフにする
    行末に半角スペースを2つ入力すると改行のアイコンが出るため扱いやすい
    image
    あるいは、contentlayer側で改行を変換する処理を加えてもよい

  3. 画面右上の[Share]から[閲覧可能]を全員に変更する
    画像をアップロードする場合は、この設定が必要になる

  4. 画面右上のメニューから[バージョンをGitHubと同期]を選択
    image

  5. リポジトリ、ブランチを選択し、保存先ファイル（ない場合はパスを入力して新規作成）を選択してプッシュする
    image
    ここで、コミット時のVercelデプロイを発火させたい場合は事前に作成した別ブランチを選択し、プッシュ後にGitHubアプリ等からデプロイ用ブランチへとマージを行う

制約

  • 無料プランだと月間20pushまでしかできない

  • iPadで外部キーボードを接続して編集する場合、とくにプレビューを有効にしていると入力ができなくなることがある
    このときは一度プレビュー画面をタップorクリックして、再度編集画面をクリックすると再度入力が可能になる

おまけ

GitHub Actionsで自動的にPRを作成するようにしておくと、iPadでの編集時にマージ作業が楽になる

以下はそのサンプル

.github/workflows/create-pr.yml
name: Create Pull Request from `posts` to `main`

on:
  push:
    branches:
      - posts

jobs:
  create_pull_request:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
        uses: actions/checkout@v4

      - name: Check for existing pull requests
        id: check_pr
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
          echo "pr_count=$(gh pr list --base main --head posts --json number --jq '. | length')" >> "$GITHUB_OUTPUT"

      - name: Create pull request if none exists
        if: steps.check_pr.outputs.pr_count == '0'
        env:
          GH_TOKEN: ${{ github.token }}
        run: |
          gh pr create --title "Merge posts into main" --body "Automatically created pull request to merge \`posts\` into \`main\`." --base main --head posts

Tags

Misc