<a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank">gatsbyjs/gatsby-starter-blog</a> で作成したブログはデフォルトの状態ではコードのシンタックハイライトが無く非常に見辛いです。 
プラグインを設定してシンタックハイライトを導入します
<h2 id="プラグインの導入">プラグインの導入</h2>
gatsby-starter-blog には最初から <a href="https://gatsbyjs.org/packages/gatsby-remark-prismjs" target="_blank">gatsby-remark-prismjs</a> がプラグインとしてインストールされています。 
そのため、新たにプラグインをインストールする必要はなく、ハイライトのcss読み込み設定を修正するだけでシンタックハイライトを有効化できます。
<pre class="language-js"><code class="language-js"> {
 resolve: `gatsby-transformer-remark`,
 options: {
 plugins: [
 {
 resolve: `gatsby-remark-images`,
 options: {
 maxWidth: 590,
 },
 },
 {
 resolve: `gatsby-remark-responsive-iframe`,
 options: {
 wrapperStyle: `margin-bottom: 1.0725rem`,
 },
 },
 `gatsby-remark-prismjs`,
 `gatsby-remark-copy-linked-files`,
 `gatsby-remark-smartypants`,
 ],
 }, {
 resolve: `gatsby-transformer-remark`,
 options: {
 plugins: [
 {
 resolve: `gatsby-remark-images`,
 options: {
 maxWidth: 590,
 },
 },
 {
 resolve: `gatsby-remark-responsive-iframe`,
 options: {
 wrapperStyle: `margin-bottom: 1.0725rem`,
 },
 },
 `gatsby-remark-prismjs`, // 初期状態でインストール済み
 `gatsby-remark-copy-linked-files`,
 `gatsby-remark-smartypants`,
 ],
 },
</code></pre>
<h3 id="CSSの読み込み設定">CSSの読み込み設定</h3>
gatsby-browser.jsにて prismjs のテーマのCSS読み込みを追記します。 
デフォルトで利用できるテーマの一覧は <a href="https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes" target="_blank">PrismJS/prism/themes</a> で確認できます。
<pre class="language-js"><code class="language-js">import "prismjs/themes/prism-tomorrow.css"
</code></pre>
<h2 id="シンタックハイライトを利用">シンタックハイライトを利用</h2>
pre記法に言語タグを指定することでシンタックハイライトを利用できます。 
利用可能な言語タグの一覧は <a href="https://prismjs.com/#supported-languages" target="_blank">prismjs</a> の公式ページに記載してあります。
<pre class="language-js"><code class="language-js">```js
console.log('シンタックハイライトだよ')
```
</code></pre>

gatsby-starter-blogでコードのシンタックスハイライトを設定

通販でキーキャップを購入する時に見たショップの一覧をまとめました。
<h2 id="国内">国内</h2>
<h3 id="遊舎工房">遊舎工房</h3>
国内でも有名なキーボード専門ショップです。自作キーボード周りで何か購入したい場合は、とりあえずここのショップを見るが早い気がする。
<a href="https://yushakobo.jp/product-category/keycaps/" target="_blank">https://yushakobo.jp/product-category/keycaps/</a>
<h3 id="TALP KEYBOARD">TALP KEYBOARD</h3>
DSAプロファイルやXDAプロファイルのキーキャップがバラ売りされてた。
<a href="https://talpkeyboard.stores.jp/?category_id=59be183f428f2d49120007b1" target="_blank">https://talpkeyboard.stores.jp/?category_id=59be183f428f2d49120007b1</a>
<h3 id="ゆかりキーボードファクトリー">ゆかりキーボードファクトリー</h3>
Tai-Hao というメーカーのキーキャップをメインに取り扱っていた。
<a href="https://eucalyn.shop/keycaps/" target="_blank">https://eucalyn.shop/keycaps/</a>
<h2 id="国外">国外</h2>
<h3 id="AliExpress">AliExpress</h3>
アリババグループにより運営されている大手ECサイトで、見た中で取り扱っている種類が一番多かった気がします。「キーキャップ dsa」とかで検索したら、プロファイルを絞って検索できるのが良かった。ただ、OEMプロファイルのキーキャップも検索結果に含まれていたので、検索結果を鵜呑みにせず商品説明とかで、プロファイルは確認しましょう。
<a href="https://ja.aliexpress.com/wholesale?catId=0&amp;initiative_id=SB_20210125042416&amp;SearchText=%E3%82%AD%E3%83%BC%E3%82%AD%E3%83%A3%E3%83%83%E3%83%97" target="_blank">https://ja.aliexpress.com/wholesale?catId=0&amp;initiative_id=SB_20210125042416&amp;SearchText=キーキャップ</a>
<h3 id="Tai-Hao Shop">Tai-Hao Shop</h3>
台湾のキーボードメーカー Tai-Hao の公式通販ショップ。カラフルなキーキャップが多いイメージがあり、バックライト対応のキーキャップがカテゴリー分けされて販売されていたのが良かった。 
取り扱いされている商品を全て見ていないが、OEMプロファイルが多い印象だった。
<a href="https://shop.tai-hao.com/categories/backlit-keycaps" target="_blank">https://shop.tai-hao.com/categories/backlit-keycaps</a>
<h3 id="zFrontier">zFrontier</h3>
共同購入ができる海外のショップ。共同購入は、発送まで数ヶ月と時間が要したり募集定員に満たない場合は生産されない可能性があるので、すぐに購入したい場合は難しそうだった。
種類は少ないが、すぐに購入ができる IN STOCK 商品もあった。
<a href="https://en.zfrontier.com/collections/keysets" target="_blank">https://en.zfrontier.com/collections/keysets</a>
<h3 id="DROP">DROP</h3>
取り扱いが多かった。欲しいプロファイルで絞り込みたい場合は、「cherry keycap」などで検索すると良い。
<a href="https://drop.com/mechanical-keyboards/wdrops?subcategory=keycaps" target="_blank">https://drop.com/mechanical-keyboards/wdrops?subcategory=keycaps</a>

通販でキーキャップを購入する時に見たショップの一覧をまとめました。

キーキャップを通販で購入する

<h2 id="Netfify CMSとは？">Netfify CMSとは？</h2>
任意の静的サイトジェネレーターと組み合わせて利用可能なNetlifyが提供するCMSツールです。 
テキスト編集やプレビュー機能、画像アップロードなどの機能をWebベースのUIとして提供してくれます。 
また、GitHubのAPIを内部で利用しており、管理画面上で記事作成 =&gt; githubにpush =&gt; netlifyにデプロイ のフローを自動で実施してくれます。
<h2 id="GastbyJSのテンプレートからブログを作成">GastbyJSのテンプレートからブログを作成</h2>
立ち上げるブログが無いと何も始まりません。
最初に GatbyJS の <a href="https://github.com/gatsbyjs/gatsby-starter-blog" target="_blank">gatsbyjs/gatsby-starter-blog</a> を利用してテンプレートからブログを作成します。
<pre class="language-shell"><code class="language-shell">$ yarn add global gatsby-cli
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
</code></pre>
たった2行でブログの作成が完了しました！ 
デザインの修正とかやりだすと、やる事が増えて結局途中で諦めてしまう可能性がある（自分の性格上そうなる）ので、とりあえず公開する事だけを目標とします。
デザインとかは後からゆっくり修正していきましょう。
<h3 id="Netlify CMS をインストール">Netlify CMS をインストール</h3>
続いて Netlify CMS をインストールします。
<pre class="language-shell"><code class="language-shell">$ cd blog
$ yarn add netlify-cms-app gatsby-plugin-netlify-cms
</code></pre>
<code>static/admin/gatsby-config.yml</code> ファイルを作成して次の内容を貼り付けます。
<pre class="language-yaml"><code class="language-yaml">backend:
 name: git-gateway
 branch: master

media_folder: static/images/uploaded
public_folder: /images/uploaded

collections:
 - name: "blog"
 label: "Blog"
 folder: "content/blog"
 create: true
 slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
 editor:
 preview: true # プレビュー表示を有効化
 publish_mode: editorial_workflow # ワークフロー管理を有効化
 fields:
 - { label: "Title", name: "title", widget: "string" }
 - { label: "Publish Date", name: "date", widget: "datetime" }
 - { label: "Description", name: "description", widget: "string" }
 - { label: "Body", name: "body", widget: "markdown" }
</code></pre>
画像をアップロードする空ディレクトリを追加します。
<pre class="language-shell"><code class="language-shell">$ mkdir -p static/images/uploaded
$ touch static/images/uploaded/.gitkeep
</code></pre>
最後に <code>gatsby-config.js</code> にプラグインを追記します。
<pre><code>plugins: [`gatsby-plugin-netlify-cms`]
</code></pre>
CMSのインストールはこれだけです。 すごい簡単で感動ですね。
実際にローカル環境で確認してみましょう。
<pre><code>$ yarn development
</code></pre>
http://localhost:8000/admin にアクセスしてCMSのログイン画面が表示されたらOKです。
ログインするには後述する Netlify の認証設定が必要です。
<h3 id="ブログを公開する">ブログを公開する</h3>
ここまで来たら、いよいよNetlifyにブログを公開します。
最初にGitHubにリポジトリをデプロイします。
<pre class="language-shell"><code class="language-shell">$ git add .
$ git commit -m "Initial Commit"
$ git remote add origin https://github.com/YOUR_USERNAME/NEW_REPO_NAME.git
$ git push -u origin master
</code></pre>
続いて Netlify のページ上で <code>New Site From Git</code> を選択して手順に沿ってブログを公開します。
ビルド設定は次ように設定します。
<pre><code>Build Command: gatsby build
Publish directory: public/
</code></pre>
&lt;ブログのドメイン名&gt;/admin にアクセスすれば管理画面を表示できます。
<img src="/images/posts/netlify-cms/blog-template.png" alt="テンプレートの画面" loading="lazy" width="1930" height="1460">
テンプレートのままですが、自分のブログが公開されました (*'ω'ﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁ
<h2 id="CMSの管理ユーザーの作成">CMSの管理ユーザーの作成</h2>
CMSの管理画面にログインするために Netlify の認証設定をして管理ユーザーを作成しましょう。 Netlifyの管理画面から公開したサイトを選択して次の手順に沿ってアカウント作成の作業を進めます。
<ol>
<li>Settings &gt; Identity &gt; Enable Identity を選択</li>
<li>Registration preferences &gt; Edit Settings &gt; Invite only を選択 この設定をしないと誰でもアカウントを作成して管理画面にログインできてしまうので、よほどの理由がない限りは設定しておくことをオススメします</li>
<li>Services &gt; Git Gateway &gt; Enable Git Gateway をクリック</li>
<li>Identityタブに移動 &gt; Invite users をクリック 自分のメールアドレスを指定して自分を管理者として招待 送信された招待メールからアカウントを作成</li>
</ol>
これでCMSの管理画面にログイン出来るようになりました。
<h2 id="記事を投稿する">記事を投稿する</h2>
最後にCMSで最初の記事を投稿していきます。
<ol>
<li>/admin にアクセスして、管理画面にログイン</li>
<li><code>new blog</code> をクリック</li>
<li>記事を書いて <code>Save</code> をクリック</li>
<li>問題なければ Publish をクリック</li>
</ol>
以上で記事が公開されます。

GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる

とあるフロントエンドエンジニアのブログ

記事一覧

gatsby-starter-blogでコードのシンタックスハイライトを設定

キーキャップを通販で購入する

GatsbyJS + Netlify CMS でエンジニアブログを立ち上げる