2022-07-03
技術ブログを作ってみた
技術ブログを作る理由って、素振りでしょ
— 八雲睦月／むったん (@yakumomutsuki) June 27, 2022
Twitterで言った手前、技術ブログを作りました。SEOとかアフィリエイトとか考えれば、はてなブログやnoteなどのサービスを使えばいいと思います。が、結局カスタマイズのしやすさや、最近話題のヘッドレスCMSをやってみた系の記事ということで、誰かの参考になれば幸いです。
ヘッドレスCMSとはなにか
コンテンツは（外部）APIにて配信され、表示画面（ヘッド）はサービス運営者が実装します。そのためフロントエンドとなるWeb、モバイル(iPhone/Android)はそれぞれ実装をする必要がありますが、一方で言語やプラットフォームには左右されないため、さまざまなプラットフォームへの配信が可能となります。
Contentful、microCMS、Prismicなどのサービスによってコンテンツを管理し、記事の入稿や編集はそれらサービスの管理画面にて行います。
使用したライブラリ・サービス
- prismjs ソースコードのシンタックスハイライト
- markdown-to-jsx Markdown形式のテキストをJSXに埋め込む
- contentful 今回利用するcontentfulのAPIへ簡易にアクセスできるラッパーライブラリ
なお、本ブログのNext.js × TypeScriptをベースとしています。 シンタックスハイライトは以下のよう表示されます。
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
"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
貼っておきますが、正直わかりにくいですよねこれ...。
ソースコードのリンクを貼っておきますので、何かしらの参考になれば嬉しいです。