ContentfulとNext.jsで作る技術ブログ

投稿日: 2/28/2021

Hello World

ContentfulとNext.js、そしてVercelを使ってポートフォリオ兼技術ブログとなるサイトを作った。フロントエンドエンジニアとして、単に技術の知識を共有するだけでなく、フロントエンド技術を実験する場、そしてそれがそのままポートフォリオになるような場がほしいなと思って開設した。

実は最近ずっとサーバーサイドも自分で実装しようと奮闘していたんだけど、考えれば考えるほど実現に向けて避けられない課題が見えてきて、一旦そこは諦めることにした。TODOリストくらいならいいんだけど、まだはっきり仕様も固まっていないブログサービスのAPIを開発するとなると自分の力量的に難しかった。

ということで、このサイト、ブログ記事の管理にContentfulというHeadless CMSを利用することにした。要件がふわっとしている今の自分にとって、フロントエンドを自由に実装でき、柔軟にコンテンツの構造を変えられるHeadless CMSはこれ以上なくマッチしていた。日本製のmicroCMSなどもあったけど、サービスとしてのメジャー度と、コンテンツの自由度の高さ、TypeScriptとの相性の良さからこちらを選択した。（特にAPIの型を自動生成できるのはかなり嬉しかったのでそのうち記事にしたい。）ただ、microCMSも素晴らしいサービスで、個人的にUIはそちらのほうが好きだったし、Next.jsを使ったスターター的なドキュメントが用意されていたのも好印象だった。

バックエンドの自力実装を諦めHeadless CMSを使うと決めてからはデプロイまで順調だった。だだバックエンドの実装も諦めたわけではなくて、むしろ絶対にやりとげなければという決意を新たにしたところなので、今後はその試行錯誤を記事にしていきたいと思っている。そういう意味でもひとつここに場所ができて良かった。

P.S. 下はMarkdownをマークアップしているサンプル。このサイトではマークアップに marked 、Syntax Highlightには highlight.js というライブラリを使っている。

これは見出しh1です

これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。これは最初の本文です。

これは見出しh2です

箇条書きテスト1
箇条書きテスト2
箇条書きテスト3

これは見出しh3です

これは引用文です。

重要な警告

これは重要な警告です。

軽度な警告

これは軽度な警告です。

お役立ち情報

これはお役立ち情報です。

チェック項目

これはチェック項目です。

これは見出しh4です

syntaxHighlightTest.ts
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax

インラインコードのテスト test です。

インライン数式のテスト $\pm\sqrt{a^2 + b^2}$ です。

数式のテストです。

\pm\sqrt{a^2 + b^2}

最後に強調のテストをして、本文終わりです。