Zenn
📄

Zennの記事をGitHub Pagesで無理やり表示する

2021/03/06に公開
Docker
GitHub
Zenn
tech

はじめに

ZennではZenn上のWebエディターを利用して記事を執筆する方法の他に方法の他に、GitHubリポジトリーと連携させることでMarkdownファイルをGitHubにプッシュすることで記事を執筆することもできる。これとZenn CLIを駆使することで、GitHubにプッシュした記事が自動的にGitHub Pagesに投稿されるようなものができたので、この記事ではこれを紹介する。たとえばこれを使えば書きかけの記事を誰かと共有したりすることができる。
作成したものは下記のGitHubリポジトリーにおいてある。

そして、ここにプッシュすると次のようなページが生成される。

やったこと

1. Zenn CLIの入ったDockerイメージの作成

これはZennにもいくつか記事があったが、Docker Hubにあがっているものが軽く調べた限りでなかったので作成した。といってもドキュメントどおりインストールしただけである。

Dockerfile

FROM node:14

LABEL maintainer="YOSHIMURA Hikaru<yyu@mental.poker>"

WORKDIR /workdir

RUN npm init --yes \
    && npm install -g zenn-cli@latest \
    && npx zenn init

EXPOSE 8000

あとでZenn CLIのプレビューを利用するので8000ポートをEXPOSEしておく。

2. docker-composeでDockerイメージを起動

このときにこのリポジトリーをボリュームにしてDockerからアクセスできるようにしておきつつ、npx zenn previewでサーバーを起動する。

docker-compose.yml
version: '3.2'
services:
  zenn-preview:
    image: yyupw/zenn:latest
    build:
      context: .
      dockerfile: ./docker/Dockerfile
      cache_from:
        - yyupw/zenn:latest
    volumes:
      - .:/workdir
    entrypoint: npx zenn preview
    ports:
      - 8000:8000

GitHub Actionsを利用して次のようにした。

3. wgetでCSSやJSも含めてダウンロード

すごく適当なBashスクリプトで（2）で立ち上げたプレビューサーバーからHTMLファイルやCSSファイルなどを全てダウンロードする。

wget.sh
#!/bin/bash

set -x

sleep 2

if [ ! -d "./targets" ]; then
  mkdir targets
fi

wget --mirror \
  --quiet --show-progress \
  --no-parent \
  --convert-links \
  --no-host-directories \
  --adjust-extension \
  --execute robots=off \
  --directory-prefix=./targets \
  http://localhost:8000/

for article in ./articles/*.md; do
  if [[ $article =~ articles/(.*)\.md ]]; then
    wget --mirror \
      --page-requisites \
      --quiet --show-progress \
      --no-parent \
      --convert-links \
      --no-host-directories \
      --adjust-extension \
      --execute robots=off \
      --directory-prefix=./targets \
      "http://localhost:8000/articles/${BASH_REMATCH[1]}"
  fi
done

exit 0

4. GitHub Pagesにアップロード

これはTravis CIだと公開鍵をGitHubのDeploy Keysに登録するなど面倒なことが多かったが、GitHub ActionsならJamesIves/github-pages-deploy-actionを使うだけでOKである。

注意する点

あまり本質的ではないが注意する点をあげておく。

  • .nojekyllファイルをgh-pagesブランチなどに設定しておく
    • これがないと_nextなどのフォルダーがない扱い（404 Not Found）となってしまう
  • \LaTeX形式の数式がプレビューされない
    • どうして……😇

まとめ

wgetコマンドで全てダウンロードするという方法は超適当ではあるが、とりあえずこれで何かそれっぽいものを共有することはできそうである。本当はZenn CLIにHTMLを吐き出すモードか、あるいは限定公開機能が実装されるとよいとは思う🙏。

Discussion