静的サイトジェネレータMoulを使って写真ポートフォリオをサクッと立ち上げる

概要

• 写真や絵を並べるだけのサイト作りたいけどHugoのテーマにちょうどいいのが無くて色々探してたら見つけたツールの話
• GitHub Actionsでデプロイ自動化した

Moulについて

• 写真ポートフォリオ向けの静的サイトジェネレータ
• Hugoの機能を削って写真に全振りした感じのツール

moul.app

デモページ：

demo.moul.app

GitHub Actionsでデプロイするためのワークフロー

• Moulのバイナリを落としてきてビルドした後，gh-pagesに結果を突っ込む
• 要secrets.GITHUB_TOKEN

name: CI

on:
    push:
        branches:
            - master

jobs:
    deploy:
        runs-on: ubuntu-18.04
        steps:
        - name: Checkout
          uses: actions/checkout@v2

        - name: Setup moul
        - run: |
        -     mkdir ~/moul
        -     curl -L "https://github.com/moulapp/moul/releases/download/3.2.3/moul_linux_amd64.tar.gz" --output moul.tar.gz
        -     tar -xvzf moul.tar.gz
        -     sudo mv moul_linux_amd64 /usr/local/bin/moul

        - name: Build web page
          run: moul export

        - name: Push to gh-pages
          uses: peaceiris/actions-gh-pages@v3
          with:
              github_token: ${{ secrets.GITHUB_TOKEN }}
              publish_branch: gh-pages
              publish_dir: dist/

制約

• 独自のCSSをあてることができない（Moulのソースコード中のテンプレートにべた書きされてる）
• 写真のファイル名に空白が入ってるとWebページ上で読み込めないバグがある
  • 他の条件もありそうだけど調べてない

作ったもの

これ

photos.eqseqs.work

自分用にツールを色々改造して，CSSいじったりSNSのアイコン変えたり画像に自動でマーク入れてくれるようにしてる． とりあえず欲しい機能を雑に書いただけなので，そのうちちゃんとコード整理してPR出したいね．

おわり