blog

自分のブログサイトを作るにあたって、こだわったところ

まだ記事も機能も大してない当ブログですが、このブログを作るにあたって、個人的にこだわったところや、今後追加していきたい機能などを、簡単に述べていきたいと思います。

こだわったところ

記事内でnext/linknext/imageを使えるようにする

Next.jsのチュートリアルのように、試しにデベロッパツールからこのページのhtmlの背景色を変えて、こちらのリンクをクリックしてみてください。背景色は変わらないまま、別ページへ移動できるはずです。

当ブログはヘッドレスCMSにmicroCMSを採用していて、記事のデータはMarkdown形式で入稿しているのですが、記事のコンテンツ内のリンクのうち、このブログ内の別ページへのリンクは、Next.js側でレンダーする際に自動的にnext/linkに置き換えるようにしています。

実装にはunifiedエコシステムのrehypeを使っているのですが、詳しい方法は後日Zennに投稿しようかと思います。

2021年4月5日追記: Zennに記事を投稿しました

コードブロック内にハイライトをつける

技術ブログとして使っていくのなら、絶対コードブロックのハイライトは欲しい! 特に自分は主にReactやNext.jsの記事を書きたいと考えていたので、JSXTSXに対応しているハイライトは必須でした。

↓以下は当サイトのHomeページ(現在制作中)のコードです。

import React from 'react';

import { NextPage } from 'next';
import Link from 'next/link';

import Container from '../components/container';

const Home: NextPage = () => (
  <Container>
    <section style={{ textAlign: 'center' }}>
      <p>このページは現在制作中です😌</p>
      <p>
        よろしければ、
        <Link href="/blog">
          <a>blog</a>
        </Link>
        の方を覗いてみてください
      </p>
    </section>
  </Container>
);

export default Home;

TSXのコードもちゃんとハイライトされているのが、おわかりいただけるかと思います。

これまたrehypeのプラグインであるrehype-shikiを使って実装しています。shikiは、元MicrosoftでVS Codeの開発に携わっておられたエンジニアの方(名前からして日本の方かな?)が開発したシンタックスハイライターだそうです。めちゃくちゃ綺麗な色使いで、とても気に入っています。

記事検索をタグではなく検索フォームでするようにする

まだ記事数が少ないため、真価を発揮できていませんが、ブログ一覧の上にある検索フォームに文字を入力すると、その文字列がブログタイトルか本文に含まれる記事以外は即座にフィルタリングされます。

当初は、他のブログサイトと同じく「タグ」による記事検索機能を実装していたのですが、VercelのエンジニアであるLeeRobinson氏のブログの記事の検索機能を見て、「こっちを採用しよう!」と思いました。

思えば、タグをクリックして、/blog/tags/なんやかんやみたいな、そのタグがついた記事の一覧ページに遷移するよりは、読みたい話題の言葉を入力して、その言葉が含まれる記事が即座に一覧に表示される方が、遥かに便利だと思います。

記事をここまで素早くフィルタリングできるのは、SSGならではですね。

とは言っても、「やっぱ探しづらいかなー」と感じたら、タグ機能も追加するかもしれません。

ロゴを作る

ロゴはFigmaでデザイン、作成しました。気取っているようですが、一度作ってみたかったんですよね。

今後実装していきたい機能

他のSNSヘのシェア機能

ブログには大抵ついてますよね。

2021年4月13日追記: 追加しました(Twitter、Facebook、URLのコピーボタン)。

ツイートやリンクカードなど、コンテンツの埋め込み機能

実装方法はこれから調査します…(他のサイトはどうやってるんだろう)

入稿の際のプレビューモード

実はすでに実装しているんですが、本番環境にデプロイするとなぜかコケます… ローカルでビルドするとうまく動くんですが…現在原因を究明中です😢

2021年4月10日追記: プレビューモードの不具合を修正しました。

ブログ以外のページ

Home、About、Contactのページも追加していきたいと考えています。

portrait

takahira

デザインと関数型プログラミングが好きです。