ふくしま

ソフトウェアエンジニア

Asciidocで書いたページをhtmlに変換してGitHub Pagesでサイトにする(Github Actionsで自動デプロイ)

概要

表題の通り、asciidoc で書いた index.adoc を index.html に変換して、Github Pages でサイトにする。

mainブランチに index.adoc をコミットすると Github Actions で変換からデプロイまでやってくれるパイプラインも組む。

背景

Markdown で自分のスキル一覧などを書いていたのだが、テーブル作成で細かいことができない(セルの結合とか)ため、Asciidoc にしたかった。

ステップ

Github Actions パイプラインの作成

まず、Actions で変換からデプロイをやってくれるパイプラインを組む。 正確にはデプロイはGithub Pagesが勝手にやってくれるから、以下のパイプラインはhtmlに変換してgh-pagesブランチにpushするだけ。

name: CI

on:
  push:
    branches: [ main ]
    
jobs:
  asciidoctor_job:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
    - name: Check out code
      uses: actions/checkout@v2
    - name: Build AsciiDoc step
      id: documents
      uses: Analog-inc/asciidoctor-action@master
      with:
        shellcommand: "asciidoctor -D docs index.adoc" 
    - name: Save AsciiDoc step
      uses: actions/upload-artifact@v1
      with:
        name: Output-document
        path: ./docs/index.html
    - name: publish
      uses: peaceiris/actions-gh-pages@v3
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./docs

工夫した点

  • asciidoctor コマンドで /docs 配下に index.html を出力した。これにより、gh-pagesブランチ以下に無駄なファイルを push しなくて済んだ。

Github Pages の設定

  • source: Deploy from a branch
  • branch: gh-pages /(root)

index.adoc の作成

あとは main ブランチのルートディレクトリに適当に Asciidoc ファイルを作る。 main ブランチに push すると、ジョブが走ってデプロイまでされる。

思ったこと

  • asciidoctor コマンドって同名のhtmlにしかしてくれなさそう。本当は README.adoc -> index.html にしたかったけど。
  • Github Actions 初めて使ったがビルドとか実行が結構早い。無料でどこまで使えるのだろうか。
  • Github Token とか勝手にやってくれるので便利。

参考