<blockquote className="twitter-tweet"><p lang="ja" dir="ltr">技術ブログを作る理由って、素振りでしょ</p>&mdash; 八雲睦月／むったん (@yakumomutsuki) <a href="https://twitter.com/yakumomutsuki/status/1541540259707891712?ref_src=twsrc%5Etfw">June 27, 2022</a></blockquote>

Twitterで言った手前、技術ブログを作りました。SEOとかアフィリエイトとか考えれば、はてなブログやnoteなどのサービスを使えばいいと思います。が、結局カスタマイズのしやすさや、最近話題のヘッドレスCMSをやってみた系の記事ということで、誰かの参考になれば幸いです。

## ヘッドレスCMSとはなにか

コンテンツは（外部）APIにて配信され、表示画面（ヘッド）はサービス運営者が実装します。そのためフロントエンドとなるWeb、モバイル(iPhone/Android)はそれぞれ実装をする必要がありますが、一方で言語やプラットフォームには左右されないため、さまざまなプラットフォームへの配信が可能となります。

Contentful、microCMS、Prismicなどのサービスによってコンテンツを管理し、記事の入稿や編集はそれらサービスの管理画面にて行います。

## 使用したライブラリ・サービス

- prismjs ソースコードのシンタックスハイライト
- markdown-to-jsx Markdown形式のテキストをJSXに埋め込む
- contentful 今回利用するcontentfulのAPIへ簡易にアクセスできるラッパーライブラリ

なお、本ブログのNext.js × TypeScriptをベースとしています。
シンタックスハイライトは以下のよう表示されます。

```javascript
for( let i = 1; i <= 100; i ++ ) {
  if( i % 15 === 0 ) {
   　console.log( "FizzBuzz" );
 　 } else if ( i % 5 === 0 ) {
  　  console.log( "Buzz" );
 　 } else if ( i % 3 === 0 ) {
   　 console.log( "Fizz" );
　  } else {
   　 console.log( i );
 　 }
 }
```

## 型定義生成

型定義については、`contentful-typescript-codegen` を利用して作成できます。環境変数はnpm scriptに直接記述しましたが、dotenv等を導入してもよいかもしれません。自分は、nextのenvと競合すると面倒なため、このような形に落ち着きました。

package.json

```json
"contentful-typescript-codegen": "CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=xxxx CONTENTFUL_SPACE_ID=xxxx CONTENTFUL_ENVIRONMENT=xxxx contentful-typescript-codegen --output ./api/libs/contentful/types.d.ts"
```

## 所感

contentfulを導入して記事を表示させるだけなら、1日もかからずできるかと思います。どういうレイアウトにしようかとか、記事一覧も作ろう、コンポーネント一覧も作りたい、タグ検索もしたいなどあればいろいろ調整が必要となりますが、そうでなければ簡単に導入できると思います。

GitHub Actions まわりが妙にはまってしまい、General → Secrets より、Repository secrets を設定して、contentfulまわりの秘密情報を設定するところを、General → Environments より環境変数を利用するものだと思いこんでしまい、デプロイするのに時間がかかりました。

https://docs.github.com/ja/actions/security-guides/encrypted-secrets

貼っておきますが、正直わかりにくいですよねこれ...。

ソースコードのリンクを貼っておきますので、何かしらの参考になれば嬉しいです。

https://github.com/yakumomutsuki/yakumomutsuki.github.io


ブログ一覧