HarioNote

<p>Netlifyのホスティングサービスは無料枠で利用できるStarterプランがあります。<br>
これを利用すると無料で静的ウェブサイトをホスティングできます。</p>
<p>しかし一定の利用量を超えると課金されてしまうため、たまに利用量をチェックするのですが、どのページで確認できるかいつも忘れてしまうため備忘録として残しておきます。</p>
<h2>Netlifyの無料枠</h2>
<p>無料枠の詳細については<a href="https://www.netlify.com/pricing/">こちら</a>の公式サイトで確認できます。</p>
<p>私が気にしている無料枠の項目は以下の2点です。</p>
<ul>
<li>帯域幅: 月100GB</li>
<li>ビルド: 月300分</li>
</ul>
<p>これらを超えると課金となり、請求が来るので注意したいところです。</p>
<h2>Netlifyで自身の利用量を確認する</h2>
<p>Netlifyにログインすれば最初に表示されるダッシュボードに利用状況が表示されます。<br>
URLパスが「https://app.netlify.com/teams/xxxxx/overview」のようになっているページです。<br>
<img src="https://storage.googleapis.com/newt-files/30fd0339-67f8-475d-a180-eda4450ce893/2023-12-10_2.webp" alt="2023-12-10_2.webp"></p>
<p>Site overviewから遷移するには左上のNetlifyアイコンをクリックすればokです。<br>
<img src="https://storage.googleapis.com/newt-files/89a43277-7680-495c-9f28-6d17928dadca/2023-12-10_1.webp" alt="2023-12-10_1.webp"></p>
<p>過去に請求書が出されているかの確認は<code>Billing</code> &gt; <code>Invoices</code>で確認できます。<br>
<img src="https://storage.googleapis.com/newt-files/b6f7679a-7e2b-4811-ae17-c542b3dd36bf/2023-12-10_3.webp" alt="2023-12-10_3.webp"></p>
<p>Overdue invoicesが「No invoices」となっているので支払いが遅延している請求書はないことが確認できます。</p>
<p>以上です。</p>


Netlifyの無料枠を超えていないか利用量を確認する

<h2>前置き</h2>
<p>※本記事ではNewtで作成したサイトをNetlifyにホスティングする手順や記事更新時の自動デプロイの方法については言及しません。<br>
公式のチュートリアルにわかりやすい手順の記載があります。</p>
<ul>
<li><a href="https://www.newt.so/docs/tutorials/connect-to-netlify">GitHubのリポジトリとNetlifyを接続して、ホスティングする</a></li>
<li><a href="https://www.newt.so/docs/tutorials/deploy-to-netlify-with-webhooks">コンテンツの更新時にNetlifyでデプロイを行う</a></li>
</ul>
<h2>背景</h2>
<p>そういえばGoogleのサーチコンソールにサイトマップがないよと言われていて対応するのを忘れており、自動生成できるようにして対応しなきゃと思いやったときの備忘録です。</p>
<p>当ブログはタイトルにもある通り、Newt(ヘッドレスCMS) + Next.js + Netlify(静的ホスティングサービス)で構成されています。<br>
記事を投稿するとWebhookによりNetlifyで自動的にビルドコマンドが走り、静的ビルドが行われ記事ページが生成されてサイトが最近状態に更新されます。</p>
<p>そのため以下で説明する方法は、静的ファイル生成で静的ホスティングサービスにホストしている場合に有効な方法となります。（nodeのサーバー上で動かしている人にとっては参考にならないかもですのでご注意ください。）</p>
<h2>やったこと</h2>
<p>Next.jsを使っているのであまり色々考えなくても使えそうな<a href="https://github.com/iamvishnusankar/next-sitemap">next-sitemap</a>を使うことにしました。</p>
<h3>1. <code> next-sitemap</code>をインストール</h3>
<p>バージョンは最新でいいと思います。</p>
<pre><code>npm install next-sitemap@4.2.3 --save-exact
</code></pre>
<h3>2. 公式のGetting startedに従い設定ファイルを作成</h3>
<p><a href="https://github.com/iamvishnusankar/next-sitemap#create-config-file">Create config file</a>に従い設定ファイルをサイトのリポジトリのルートに作成します。</p>
<pre><code class="language-json">// next-sitemap.config.json
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}
</code></pre>
<p>私は環境変数は特に設定していないですが.env...に関する記述はそのまま残してます。（特に意味はないです）</p>
<h3>2. npmスクリプトの編集</h3>
<p>next-sitemapの機能(サイトマップ生成)が利用できるようにpackage.jsonにスクリプトの定義を追加します。<br>
さらにビルド時のビルドコマンド実行時にもサイトマップ生成が行われるように元々あったbuildコマンドの定義も編集します。</p>
<p><strong>before</strong></p>
<pre><code class="language-json">  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build&quot;,
    ...
  },
</code></pre>
<p><strong>after</strong></p>
<pre><code class="language-json">  &quot;scripts&quot;: {
    &quot;build&quot;: &quot;next build &amp;&amp; next-sitemap&quot;, //ビルド時に実行する用
    ...
    &quot;postbuild&quot;: &quot;next-sitemap&quot; //ローカルで動作確認する用
  },
</code></pre>
<p>やったことは以上になります。</p>
<p>ローカルで動作確認するときはターミナルで</p>
<pre><code>npm run postbuild
</code></pre>
<p>を実行すると<code>/public</code>下に<code>sitemap.xml</code>と<code>sitemap-0.xml</code>が生成されます。（記事数によってこの辺は若干変わると思います。）</p>
<p>あとは記事更新時にnetlifyでのビルド処理完了後にサイトマップが生成されているはずですので、<code>本番環境のurl/sitemap.xml</code>にアクセスしてサイトマップが表示されれば完了です。</p>
<p>Google Search Consoleを使用している人はそこでサイトマップの登録をしてちゃんと反映されるか確認してみるといいと思います。</p>
<p>以上です。</p>


Newt + Next.js + Netlifyの静的サイトにnext-sitemapを使ってビルド時にサイトマップを自動生成する

<p>表題の通りです。<br>
といってもNetlifyの公式Docに載っている情報ですのでわざわざこの記事を読む必要はないといえばないです。ちゃんと知りたい人はDocを読んだほうがいいと思います。<br>
NetlifyのDoc→<a href="https://docs.netlify.com/configure-builds/build-hooks/">https://docs.netlify.com/configure-builds/build-hooks/</a></p>
<h2>前提</h2>
<p>本記事はNewt+Github+Netlifyですでにサイトの構築が完了していることが前提となります。<br>
そのうえで、現在は手動でデプロイしているが、Newtで記事を書いて公開にしたら自動でNetlifyでデプロイして反映させたい人へ向けた内容となります。</p>
<h2>やること</h2>
<p>まずNetlifyにて自身のサイトのページにアクセスし、「Site settings」をクリック<br>
<img src="https://storage.googleapis.com/newt-files/60919785-cf14-4615-9699-f2a7fa699ec1%2F2023-02-02_1.png" alt="2023-02-02_1.png"></p>
<p>表示されてページの左サイドメニューの「Build &amp; deploy」をクリックして下へスクロールして「Build hooks」のセクションを探します。<br>
見つけたら「Add build hook」ボタンをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/a5ce3c4a-1faf-4b9e-8b9e-b4833210c93a%2F2023-02-02_2.png" alt="2023-02-02_2.png"></p>
<p>表示された入力欄に任意のBuild hook名を入力します。（どのような用途・トリガーのhookなのかわかるような名前にするのが良いと思います。今回はNewtで記事を公開したりしたときがトリガーとなるのでそればわかるような。）<br>
入力したらsaveボタンをクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/ffee89de-9034-4b39-b5fe-765ab373c742%2F2023-02-02_3.png" alt="2023-02-02_3.png"></p>
<p>Build hookのURLが生成されるのでそれをコピーしておきます。<br>
<img src="https://storage.googleapis.com/newt-files/3d809cb7-0d26-4361-9e9d-cd1a5cca04a2%2F2023-02-02_4.png" alt="2023-02-02_4.png"></p>
<p>今度はNewtの管理画面に移動し、スペース設定のWebhookにて「Webhookを作成」をクリックし、「Webhokテンプレート」を選択します。<br>
<img src="https://storage.googleapis.com/newt-files/dbc21128-7f9b-4b9a-a294-7074de2e0939%2F2023-02-02_5.png" alt="2023-02-02_5.png"></p>
<p>テンプレートから「Netlify」を選択し、Build Hook URLの欄に先程コピーしたURLを貼り付けます。<br>
貼り付けたら「Webhookを作成」をクリックします。<br>
<img src="https://storage.googleapis.com/newt-files/7588bc9e-cc6c-47a8-ac6f-1125b257d917%2F2023-02-02_6.png" alt="2023-02-02_6.png"></p>
<p>これで自動で記事を公開したらデプロイされるようになったので、実際に記事を作成して公開をします。</p>
<p>以上です。</p>


#Netlify

Netlifyの無料枠を超えていないか利用量を確認する

Newt + Next.js + Netlifyの静的サイトにnext-sitemapを使ってビルド時にサイトマップを自動生成する

Newt+Github+Netlifyで構築されているサイトに記事を投稿したら、webhookで自動デプロイされるようにする