エンジニアになってから結構時間経ったので
技術的なことや、インプットしたものを記事にした方がいいかなと思い、
ブログ兼ポートフォリオ的なサイトを作りました。
この機会に文章を書く癖をつけていきたい。
HeadlessCMSとStatic Site GeneratorというJamstackな構成で作りました。
JamstackはJavaScript、API、Markupの頭文字を取ったものです。
JavascriptでAPIを取得し、Markupを静的なHTMLに書き出すことで、
パフォーマンスとセキュリティの高いサイトを作れるというアーキテクチャです。
今回Jamstackを構築するにあたって、
Gridsome × Contentful × AWS Amplify という組み合わせにしました。
Gridsomeとは
GridsomeはVue.jsのSSGで、GraphQLでデータ管理ができるので
最近仕事でもよく使うフレームワークです。
本業ではAirtableと組み合わせて使うんですが、文章管理を別でできるのでかなり楽に開発ができます。
Contentfulとは
ContentfulはHeadless CMSの一つです。
Headless CMSは、WordPressのような従来のCMSとは異なり
コンテンツの管理するバックエンドの機能だけを持つシステムです。
コンテンツデータをAPIで取得するだけなので、フロントエンドの自由度が高いことで最近人気となってます。
他にも様々なHeadless CMSサービスもあったのですが、
Markdown機能が使えたりと無料で高機能なサービスがあるので選びました。
Amplifyとは
AWS AmplifyはSPAや、静的サイトジェネレーターやモバイルアプリを
最速でリリースするための開発プラットフォームです。
バックエンド部分や、CI/CD周りの機能を持っておりデプロイが簡単なので選びました。
セットアップ
本来ならコンテンツ管理する際は、gridsome.server.jsにデータを取り込む設定を書かないといけないんですが
Gridsome側がpluginを用意してくれてるので、@gridsome/source-contentfulを入れて
gridsome.config.jsを設定するだけで簡単にデータを取得できます。
Configの中身はこのようになります。
plugins: [
{
use: "@gridsome/source-contentful",
options: {
space: “CONTENTFUL_SPACE_ID”, // required
accessToken: “CONTENTFUL_ACCESS_TOKEN”, // required
host: “CONTENTFUL_HOST”, // required
environment: "master",
typeName: "Contentful",
},
},
],
アクセストークンなどは環境変数に登録した方がいいのでdotenvなどで管理してください。
他の細かいところなどは次の記事で書こうかなと思います。