ブログ環境を整えた v2

以前ブログ環境を整えたと2018年に投稿しています。そして次にCloudinaryを採用しました。それから2019年にGitHub Actionsを採用しました。そんなことをやっていくうちに最初の時より変わったので書き記していきたいと思います。

つまり最近になってブログを再構築したのでその心境や頑張ったところなどを書いていきたいと思います。

なぜまだHugoを使用しているのか

HugoだけでSASS(SCSS)を変換できるようになりました。他にも便利な機能がどんどん追加されるようになりました。

そして何より強いのがシングルバイナリで動作することです。ブログ環境を再現するために使用するのがシングルバイナリで再現できるのは結構強くてNode.jsなどを使用するのはテーマ開発の方で頑張ればいいのかな？と思いました。

GitHub Codespaces

実はこの執筆ではGitHub Codespacesも使用しています。

GitHubでは.comから.devに変更するだけでCodespacesが使用できるためちょっとした編集や執筆の時には使用できます。(例: github.com/ress997/blog -> github.dev/ress997/blog)

以前使用していたForestry.ioでは色々やろうとするとどんどんコミットされていき関係ないない内容まで保存されるところが気に入りませんでした。

そこら辺も含めてWebで簡単にVSCodeを使って編集できるところが良いと思いました。

Cloudinary

OGP生成のためにzenn.devの開発をやっているCatNoseさんのブログを参考にOGP生成を自動化してみました。

やり方としてはブログテーマのOGP情報の部分を上記のサイトを参考にタイトル情報を埋め込むように変更しました。

URLに変換する時に日本語を埋める場合はパーセントエンコーディングが必要かなと思ってましたが結論から言えば必要ありませんでした。

GitHub Actions

Cloudfalre Pagesでもビルドすることができすが柔軟性が乏しく色々やろうと思ったらビルド時間も延び結局GitHub Actionsでやることにしました。

name: Build and Deploy
on:
  push:
    branches:
    - main
  workflow_dispatch:
  schedule:
    - cron: '0 6 * * *'
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          fetch-depth: 0

      - name: Download theme
        uses: actions/checkout@v2
        with:
          repository: cntrump/hugo-notepadium
          path: themes/notepadium

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --gc --minify

      - name: Deploy to GitHub
        uses: peaceiris/actions-gh-pages@v3
        if: ${{ github.ref == 'refs/heads/main' }}
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public
          publish_branch: dist

      - name: Webhook
        run: curl -X POST ${{ secrets.WEBHOOK_URL }}

workflow_dispatch を使うことによってGitHub Actionsのページからビルドできるようにしています。

以前書いた記事ではHugoのセットアップやテーマの設定を手動でしてましたが既存のものをなるべく使用するように変更しました。

そして最後は先ほども書きましたがCloudfalre Pagesで処理すると遅かったり色々手を加えれなかったのでWebHookを叩いてdistブランチのものを使用するように変更しました。

Cloudfalre Pages

静的サイトホスティングに使用できるサービスが最近増えてきました。

そこで下記の比較記事を見たところ完全に静的サイトかつ無料で運用するならCloudfalre Pagesが良さそうなので採用しました。

静的サイトをデプロイするだけなのでビルド時間が最小で運用することができます。

そのためにgit の自動デプロイを停止してWebhookからデプロイするように変更しました。

その他

ブログカードが欲しいと思っていましたが、全然実装していなかったので今回実装しました。

やったこととしてははてなのブログカードをそのまま使わせてもらってます。他の人の記事などを見るとOGP情報を取得するサーバーを用意してなどありましたが、私の場合そのサーバーのメンテナンスをやりたくないと思って既存のサービスを使用しました。

まとめ

ブログ記事の方は全然書いていませんがブログシステムの方をどんどん更新してました。今回はある程度ブログのシステムが固まったので書き出しました。今後はもう少しアウトプットできるように頑張っていきたいと思います。