ブログシステムを作る(2) - スタイリングとDeploy

Sat Jan 07 2023

ブログの大枠ができたので、今日はレイアウトを作ったり、GitHub Actions でデプロイできるようにしました。

スタイリング

CSS のスタックを検討する

色々みてみたけど、CSS in JS は脱出したりするのがめんどくさそうということで、素朴にtailwindcssを使ってみることにした。最初はどうなのだろうと懐疑的だったけれども、Next.js がサポートしている CSS Modulesと組み合わせたら結構いい感じになった。

例えばこの markdown を表示するコンポーネントのスタイルはarticle.module.scssで定義してある。このファイルは tailwind の@apply directiveを使って CSS を定義して、モジュールをコンポーネントで読み込まれスタイルを割り当てる、ということをしている。

/* article.module.scss */
.article {
  h1 {
    @apply text-2xl py-4 mt-8 underline underline-offset-4;
  }
  h2 {
    @apply text-xl py-3 mt-8;
  }
  /* ... */
}

// Article.tsx
import { FC } from "react";
import style from "./article.module.scss";

const Article: FC<{ html: string }> = ({ html }) => {
  return (
    <div
      className={style.article}
      dangerouslySetInnerHTML={{ __html: html }}
    ></div>
  );
};
export default Article;

tailwind は後から色のテーマとかをいい感じにカスタマイズできるみたいなので、なるべく tailwindcss の指定方法を活用していくと良さげ。

Layout ファイルを作る

基本的には各ページ揃った見た目にしたかったので、components/commonを作って Layout ファイルを作った。おいおいこのプロジェクトは Web プロジェクトの実験場にしたいと思っていたので、Layout ファイルをグローバルに適用するのは少し憚られたけれども、どうしてもグローバルにしたい場合は pages/_app.js をいい感じにすればいいと思い思い切って全体に Layout 適応をした。

Next.js の公式サイトにも Layout の指南はあるので、いざという時には参考にできそう: Basic Features: Layouts | Next.js

GitHub Actions でデプロイする

デプロイ先は一旦最もお手軽そうな GitHub Actions で。スクリプト自体はGitHub に公開したのでそちらでみてもらうとして。

昔と比べると色々変わっていた。変わっていたところで言うと...

カスタムドメインを使うにはドメインの認証が必要
gh-pages branch で公開される運用とは別に、actions/deploy-pagesを使った方式が登場

というあたり。他にも GitHub Actions の GITHUB_TOKEN のpermission を workflow/job ごとに指定できるようになっていたり、進化していた（前からできたっけ？）。

ということでひとまず公開できる形になった。他にもやりたいことがあるので TODO に記載している。

もの書きスペースの使い分け

Scrapbox、はてなブログ、Zennと、パッと思いつくだけでも、ものを書くスペースはいくつかあるのだけれども、なんとなくそれぞれこんな感じで使い分けられればと考えている。

Zenn: ちょっとした Tips、例えば GITHUB_TOKEN の Permission の話など
Scrapbox: ちょっとしたメモ
はてなブログとこのブログ: 迷い中
- 基本的にはてなブログの方が購読者が多いので、あっちはもう少し大作置き場みたいな感じにするかもしれない
- そんなに使い分けできるのかは不明。でもはてなブログと比べて軽いのは気に入っている

いつまで続くかはわからないけど、長く続けられるといいですね。