Netlifyで静的サイトをホストするためのチュートリアル

Netlifyを発見してください。これは、静的サイトに最適な優れたホスティングサービスで、無料のプランと無料のCDNがあり、非常に高速です。

私は自分のブログをホストしていますNetlify

しばらく前に引っ越しましたが、以前のホスティングで問題が発生し、サイトに数時間アクセスできなくなりました。サイトが再びオンラインになるのを待っている間に、すばやく元に戻す方法を探して、 Netlify上の私のサイトのレプリカ。

このブログはで実行されているのでヒューゴ、静的サイトジェネレーターであるため、ブログを新しいホスティングに移動するのに多くの作業は必要ありません。必要なのは、HTMLファイルを提供できるものだけです。これは、地球上のほとんどすべてのホスティングです。

静的サイトに最適なプラットフォームを探し始め、いくつか目立ったものがありましたが、最終的にNetlifyを試しましたが、それができてよかったです。

Netlify Logo

Netlifyの紹介

試してみる前に印象に残ったことがいくつかあります。

まず、無料プランはとても寛大です100GBの無料の月間帯域幅を備えた無料または商用プロジェクトの場合、およびあちこちに数枚の画像しかない静的サイトの場合、それは多くのスペースです!

それらにはグローバルが含まれますCDN、中央ロケーションサーバーから遠く離れた大陸でも速度が問題にならないようにするため。

あなたはあなたを指すことができますDNSNetlifyのネームサーバー。高度なニーズを設定するための非常に優れたインターフェイスですべてを処理します。

もちろん、カスタムドメインとHTTPSを持つこともサポートしています。

Firebaseから来て、デプロイを管理するための非常にプログラマーに優しい方法を期待していましたが、各静的サイトジェネレーターの処理に関してはさらに優れていることがわかりました。

NetlifyとHugo

私はHugoを使用しており、ローカルでは組み込みツールを使用してサーバーを実行していますhugo server、変更を加えるたびにすべてのHTMLの再構築を処理し、ポートでHTTPサーバーを実行します1313デフォルトでは。

静的サイトを生成するには、実行する必要がありますhugo、これにより、に一連のファイルが作成されます。public/フォルダ。

Firebaseでこの方法に従いました:実行しましたhugoファイルを作成してからfirebase deploy、私をプッシュするように構成されていますpublic/Googleサーバーへのフォルダコンテンツ。

ただし、Netlifyの場合は、サイトをホストするプライベートGitHubリポジトリにリンクし、マスターブランチにプッシュするたびに、Netlifyに同期するように指示し、Netlifyが新しいデプロイを開始し、変更が有効になります。数秒以内に。

Dashboard

ヒント:NetlifyでHugoを使用する場合は、必ずHUGO_VERSIONをnetlify.tomlデフォルトバージョンは古い可能性があり、(執筆時点では)ポストバンドルなどの最近の機能をサポートしていないため、最新のHugo安定版リリースに移行します。これが私のnetlify.toml設定ファイルです

これは新しいことではないと思う場合は、その通りです。これは、自分のサーバーに実装するのは難しくありません(Netlifyでホストされていない他のサイトで実装します)が、ここに新しいものがあります。任意のGitHub(またはGitLab)をプレビューできます。 、またはBitBucket)ブランチ/ PRを別のURLで実行します。メインサイトが稼働していて、「安定した」コンテンツで実行されている間はすべてです。

もう1つの優れた機能は、2つの異なるGitブランチでA / Bテストを実行する機能です。

Netlify forStaticSitesが提供する高度な機能

静的サイトには、たとえば従来のCMSに期待されるような、サーバー側の操作を実行できないという明らかな制限があります。

これは利点です(気にするセキュリティの問題が少ない)が、実装できる機能の制限でもあります。

ブログは複雑なものではありません。コメントを追加したい場合は、Disqusなどのサービスを使用してコメントを追加できます。

または、フォームを追加したい場合は、WufooやGoogleフォームなどのサードパーティアプリケーションで生成されたフォームを埋め込むことで追加できます。

Netlifyは、処理するための一連のツールを提供しますフォーム、ユーザーを認証し、さらに展開および管理しますラムダ関数

サイトを立ち上げる前に、サイトをパスワードで保護する必要がありますか? ✅

処理する必要がありますCORS? ✅

301リダイレクトが必要ですか? ✅

SPAの事前レンダリングが必要ですか? ✅

サードパーティのサービスに連絡することなく、Netlifyでできることのほんの一部を紹介しました。試してみる理由をお伝えしたいと思います。

ブランチのプレビュー

GitHubの統合は、プルリクエストでうまく機能します。

プルリクエストをプッシュするたびに、Netlifyはそのブランチを特定のURLにデプロイします。このURLは、チームまたは必要な人と共有できます。

ここで、公開ブログで利用可能にすることなく、ブログ投稿をプレビューするためのプルリクエストを作成しました。

GitHub Pull Request

Netlifyはすぐにそれを取得し、自動的にデプロイしました🎉

The deployed preview

リンクをクリックすると、サイトのPRバージョンをプレビューできる特別なURLが表示されます。


その他のサービスチュートリアル: