n350071作業体系化ノート概要GatsbyJSというReactとGraphQLを利用したWebサイト構築ツールでこのブログを作成しました。Domain(カスタムドメインを購入)以下、作業内容を記載していきます。GatsbyJSを立ち上げるGatsbyJSのチュートリアルを軽く読むチュートリアルを軽く読みましょう。GatsbyJSのREADMEも少し見ておくとよいかもしれません。GatsbyJSのスターターキットを利用するStartersから、好きなテンプレートを選びましょう。今回はgatsby-starter-hero-blogを選びました。動くことを確認できます。Netlifyにデプロイするデプロイ手順は簡単です。コマンドでビルドします。servicesというエラーになるため、algoliaをストップする必要がありました。これをコミットして、GitHubにpushします。最後に、Netlifyにデプロイします。アカウントの連携を行い、その流れでデプロイ対象のリポジトリを選択するだけでした。値段は¥1400+税程度でした。お名前.comと違って画面が見やすく、自分の欲しいドメインを入れると、取得可能な複数のドメイン名をリストしてくれるので選びやすかったです。managementに進み、取得したドメイン名を入力します。Googleで買ってから数分以内でしたが、購入したドメイン確認が取れて無事に設定することができました。最後に、DNSの設定を行い、ドメイン名がこのサイトのIPアドレスを向くように設定します。Serversの項目を探します。このサイトであれば、このURLでたどり着けます。https://app.netlify.com/teams/n350071/dns/n350071.com#nameserversそこに書いてある以下のような文字列を確認します。Domainのxxxxに指定すれば、設定は終わりです。SSL化するNetlifyの先程のドメイン設定のページの最下部に行くと、SSLの設定項目があります。指示に従うとできるようになっています。私はドメインを変えたばかりでしたので、1時間ほどSSL化できませんでした。(できないときは、しばらく待ってみるとよさそうです。機能カスタマイズここから先は、私のスターターキットでの設定になります。Analyticsの利用登録後に確認できます。algoliaalgoliaにアクセスして指示に従うとできます。.envに設定するキーが多いですが特に迷わずにできました。Hilightについては最初から実装済みでした。shellなどと書かないとハイライトがうまく効きません。こんな風にタイトルをつけるには、gatsby-remark-prismjs-titleを参考にしてください。記事の書き方自体はこちらで確認できます。作成できるようにしました。詳細は🔨こちら(作成中)に書きました。使われて、記事がシェアされたときの画像になるので、しっかり変えておきましょう。Conditionspages以下は消していって大丈夫ですが、唯一success以下を消すとbuildできませでした。(ハマった)pages以下は、このヘッダを消さないようにしましょう。Success---Contactは消しました。以下のpng画像を取り替えて、次のスクリプトを実行します。scripts/generate-app-icons.shCSS調整src/components/Header/Header.jsにベタ書きされているので、必要に応じて修正します。設定としては以上です。その他フリーの画像素材としてUnsplashを使っています。こだわりがないので、他に良いところがあれば教えてもらえると嬉しいです。pixabay.com。