タグ
7件の記事
Gatsby.jsを使って作ったブログをGithub Actionを用いてクラウドなどへCD（継続的デリバリー）、つまり自動デプロイを行っていきます。CICDの分野ではJenkinsやCircleCIが有名でしたが、最近はGithub Actionsが有名です。Github公式のサービスなので非常に簡単に導入できます。今回はロリポップマネージドクラウドへデプロイしますが、SSH接続ができるならVPSや他のクラウドサービスやレンタルサーバーにも同じようにデプロイできると思います。
Netlifyでのビルド時間を高速化するためにプラグインを導入して、デプロイにかかる時間を約半分にしました。10分の1にはさすがになりませんでした。しかし、どうしても記事や画像が多くなってくるとどうしてもビルド時間は伸びていってしまいます。最近はGithub Actionsがすごいのでそちらで自動デプロイするようにしようか悩み中です。
以前、NetlifyとGatsubyを使ったブログの構築を紹介しました。Netlifyのサーバーを使うとき、DNSの設定をする方法は主に二つあります。Netlify DNSを使う方法と取得した独自ドメイン側のCNAMEレコードを設定する方法です。この時はNetlify DNSを使用して設定しました。しかし、最近同じドメインのサブドメインを作成しようとしたときに、サイトが全く表示されませんでした。予想ですがDNSの設定をNetlify側に任せると、そちらの方にもっていかれてドメイン管理サービス側からCNAMEレコードを作成しても反映してもらえません。そこでNetlifyのネームサーバーとDNSを辞めてムームードメインのネームサーバーに変更しました
Gatsby.jsの問題は、GoogleAdsenseの自動広告が正常に読み込まれないことです。この問題を解決しようと調べましたが、結論としては現時点で最適な解は存在しないようです。GoogleAdsenseの自動広告はページ読み込み時に、Headに設置したGoogleのスクリプトが走るのだと思いますが、Gatsbyはサイト内のページ遷移をする際にJavascript（React.js）で現在表示しているHTMLを書き換えているのでうまく広告が表示されないのだと予想してます。自身のGatsby.jsで構築されたブログを見ていて気付いたのは、自動広告が正常に動いていないページを再読み込みした際には自動広告がきちんと表示されていることです。今回はこの問題を解決する方法を考えてみました。
NetlifyとGatsby.jsのサイトでリダイレクトを行う方法について解説します。「_redirects」を用いた方法ではうまくいかなかったので、「netlify.tomlファイル」を用いた手法を使いました。
Gatsby.jsで作ったサイトをNetlifyで管理していて、それに独自ドメインを設定する際に躓いたのでそのメモです。 ネームサーバー？DNSレコード編集？って感じで躓いていました。 結果としては以下の手順で設定しました。
Gatsby.jsをご存じでしょうか。 React.js を使った静的サイトジェネレータで、画像の先読み機能などを備えており、SPA(シングルページアプリケーション)として動作するので信じられないくらい速く動きます。 今回は私のブログを WordPress + ロリポップサーバーから Gatsby.js + Netlify + Netlify CMS という構成に変更したので、紹介します。 連載全体ではGatsby.js, Netlify, Netlify CMS などについて解説していくつもりです。