Zenn
😸

初めてのブログづくり

2024/01/06に公開
Next.js
初心者
tech

はじめに

ずっと自分でブログを作ってみたいなと思っていたところ、以下の記事シリーズを拝見し、「これならできそう！」と思い、はじめてのブログ作りに取り掛かりました。

next.jsのblog-starterというテンプレを基に、基本的には上の記事に沿って作りすすめ、なんとなくいったんは形になったかなあと思います。カスタマイズした部分について本記事に記録したいと思います。出来上がったブログはこちら。

なお、制作日記はこちらのスクラップにつけており、本記事もほぼそのスクラップからの引用、まとめです（別アカウントですが同一人物です）。

ブログ記事の画像をmdファイルと同階層で管理する

ブログ記事内で画像を表示したい場合、元のフォルダ構成（以下のような感じ）だと、publicフォルダに配置した画像を参照する必要がありました。

_posts
  -article1.md
  -article2.md
  -article3.md
public
  -assets
    -blog
      -posts
        -article1_img1.png
        -article1_img2.png
        -article2_img.jpg

このフォルダ構成だと執筆時辛いので、_postsの階層を一つ増やし、記事mdと、その記事で使用している画像達を1フォルダにまとめて管理できるようにしました（以下のような感じ）。

_posts
  -article1
    -index.md
    -article1_img1.png
    -article1_img2.png
  -article2
    -index.md
    -article2_img1.png
  -article3
    -index.md
public
  -assets
    -blog
      -posts

やり方はこちらのスクラップに記載しました。

ブログ記事のカバーイメージを絵文字に

Zennのように、ブログ記事のカバーイメージを絵文字にしました。

絵文字で構成されているブログ記事のカバーイメージ

やり方はこちらのスクラップに記載しました。

OGP画像を自動生成するようにした。

ブログ記事のURLをシェアすると、タイトルと記事投稿日とその記事のカバー画像に設定した絵文字を基に自動生成されたOGP画像が表示されるようにしました。絵文字散らすのめんどくさかった....。

タイトル等記事の情報を使用して自動生成される、ブログ記事のOGP画像

やり方はこちらのスクラップに記載しました。

その他細かいこと

  • フォント変更
    • 以下の記事の応用2に沿って導入。
  • Flowbiteを使用してUIを整えた
    • 素のFlowbite(? Reactじゃない方)がなかなか動かず困ったが、以下記載のコメント参照して解消。
  • zenn-content-cssのカスタマイズ
    • マークダウンの変換にはzennのものを使用させていただきましたが、cssは一部カスタマイズしました。
  • google analytics導入
    • _appにスクリプト書く。
  • accessible colour palet探し
    • 色の知識が全くなかったが、accessibleな色の組み合わせがいいなと思い、以下サイトを参考に使う色を決めた。

今後やりたいこと

  • 外部記事（zennの記事とか）へのリンクもブログ内に一緒に並べたい
  • 色テーマを切り替えられるようにしたい（ダーク/ライト/ポップの3種）
  • 画像ズームできるようにしたい
  • 本とか映画とかの記録コーナーとレシピの記録コーナーを作りたい。ふわっとzennのスクラップみたいな...？でもnotionでもいいかも...？考える。

nextjsもreactもなんもわからんのまま、簡単に雰囲気で一応ブログが作れてしまって感動しました。勉強して、よりよくしていきたいです。

GitHubで編集を提案

Discussion