静的サイトの展開に Surge を使用する: 総合ガイド

静的 Web サイトを展開する際、Web アプリの開発者は、Web サイトを改善するための最新かつ最も効率的なツールを常に探しています。 一般的に言えば、静的サイト ジェネレーター (SSG) は、手作業でコーディングされた操作と完全な CMS を即興で作成します。 このセットアップは、サーバー側で処理されるのではなく、ほとんどの Web サイトまたは Web アプリケーション プロジェクトに最適です。 この傾向により、開発者は webtask.io プログラムに切り替えて、さまざまなサーバー エンドポイントを処理しています。 この記事では、Web アプリ開発の重要なトレンドに加えて、開発者が静的サイトを成長させるために行うプロセスについて詳しく説明します。 サーバーレス Webアプリケーション。

静的サイトジェネレーターとは何ですか？

詳細には、State Site Generator を使用する開発者は、HTML のみの Web サイトを生成することによってプロセスを開始します。 HTMLのみであるため、サイトは主に生データとテンプレートを使用しています. 前述のとおり、生データも「マークダウン ファイル」に分類されます。 理解を深めるために、マークダウン ファイル (リンク: https://guides.github.com/features/mastering-markdown/) は、マークダウン言語の方言を使用する一般的なテキスト ファイルです。 プレーン テキスト形式には、太字、斜体、インデント、ヘッダー、表示などのテキストを含む形式を作成するためのテキスト シンボルが含まれています。

動的な Web サイトとは異なり、これらのファイルはプログラミングの知識を比較的必要とせず、作成する最も基本的なタイプの Web サイトです。 したがって、サイトの各 Web ページには、どのプラットフォームのどのユーザーにも同じように表示される、固定の Web サイト コンテンツを含む独自の HTML ファイルがあります。 その結果、ライブ サーバーに転送されるビルドが作成されます。

静的サイトと動的サイト

比較すると、 静的なウェブサイト クライアント側の HTML および CSS コード ベースです。 クライアントが静的サーバー Web サイトからリクエストを行うと、HTML ファイルはゲスト デバイスにすぐに表示できるサイトにきちんとパッケージ化されます。 一般的な静的サイト ジェネレーターには次のようなものがあります。 ジキル、Github Pages がサポートするもの、および Next。 対照的に、動的Webサイトは、クライアント側とサーバー側のスクリプト言語に依存しています。 いくつかの例として、JavaScript（リンク：https：//www.javascript.com）、PHP（リンク：https：//www.php.net）、およびASP（リンク：https：//www.w3schools.com/ asp / webpages_intro.asp）は、「動的サーバーサイド」スクリプトです。 説明として、HTTP動的サーバーで実行すると、ファイルがブラウザーに送信されます。 同時に、ジェネレーターは、エンドユーザーがページを呼び出すたびに新しいHTMLファイルを作成します。

サージとは？

Surgeは、静的なWebサイトおよびアプリケーションを展開およびホストするためのサービスです。 これを使用して、次のような静的サイトジェネレーターでビルドされたプロジェクトをホストできます。 ギャツビー.js, ジキル。 HTML、CSS、およびクライアント側の JavaScript で構築されたカスタム プロジェクトも機能します。 その無料プランは、ほぼすべての静的サイトに最適であり、サービスの構成は、コマンド ラインで数回のキーストロークだけで実行できます。 カスタム SSL、パスワード保護などの追加機能を追加したプレミアム バージョンを利用できます。

サージを使用する理由

Surge は、すべてのフロントエンド Web 開発者が使用すべき非常に便利なツールです。 信じられないほど簡単で、数秒で静的サイトをオンラインで公開できます。 Web パブリッシングに必要なのは、コマンド ラインにいくつかのコマンドを入力することだけです。最良の部分は、投資が必要ないことです。 また、ユーザーは自分のプロジェクトに個人用ドメインを追加したり、他のユーザーとプロジェクトを共有したり、クライアントを他の Web ページに誘導する 404 エラー ページを作成したりすることもできます。 Surge には、他の一般的な静的サイト デプロイヤーにはない独自の利点があります (「Surge と Github ページの比較」を参照)。

サージは無料サービスですか？

上で暗示されているように、Surge の使用には費用はかかりません。 ただし、追加料金を投資しても構わないと思っているユーザーには、より多くのメリットをもたらす Surge Professional があります。 このサービスのプレミアム バージョンは、月額 $30 から始まります。 具体的には、追加料金を払えば、プロのプロジェクトを無制限に作成したり、カスタム SSL を使用したり、HTTPS を使用した安全な Web サイトを作成したりできます。 また、リソースを共有したり、サイト内でリダイレクトを開発したり、プロジェクトをパスワードで保護したりできます.

ソースファイルを公開して小規模または個人の Web サイトを作成する場合は、無料プランで十分です。 ただし、プロジェクトを公開するために定期的に Surge に依存している人にとっては、Surge Premium も賢明な選択肢です。

Surgeのインストール

Surge のインストールとアカウントの設定は、非常にシンプルで直感的です。 新しいターミナル ウィンドウを開き、次のコマンドを入力します。

npm install –グローバルサージ

（注：この手順では、Nodeとnpmがシステムにインストール済みであることを前提としています。インストールされていない場合は、公式サイトから両方の最新バージョンをインストールできます。 Node.jsウェブサイト.)

Node.js.websiteが正しくインストールされているかどうかを確認するには、コマンドラインに移動し、ステータスとして「node-v」と入力します。

初めて設定するとき、Surge はアカウントを設定するように求めます。 唯一の要件は、メールアドレスとパスワードを提供し、後でメールを確認することです. この手順を完了すると、Surge アカウントが設定され、サービスにデプロイする準備が整います。

サイトをデプロイする

静的 Web サイトを Surge に使用するには、まず、実装するプロジェクト ディレクトリのファイル パスを見つけます。 たとえば、/Users/air/surge-test にあるプロジェクトを実装します。

デプロイするディレクトリのファイルパスがわかったら、ターミナルウィンドウで次のコマンドを実行します。

発生します

ユーザー名 (つまり、電子メール アドレス) が表示されます。 その後、プロジェクトのファイル パスを指定する必要があります。

完全なファイルパスを入力し、Enterキーを押します。

サージプログラムは、ランダムな単語を使用してドメイン名を自動的に提供します。 まだ取得されていない場合は、カスタムドメインを作成することもできます。 選択したドメイン名を入力して、Enterキーを押します。

(注: 入力したカスタム ドメイン名が既に使用されている場合は、エラー メッセージが表示されます。
中止 – [ に公開できません]

デプロイが完了すると、ターミナルに成功メッセージが表示されます。 プロジェクトのドメイン名と IP アドレスは、ライブ デプロイにアクセスできる場所を示します。

ウェブブラウザにドメイン名を入力すると、サイトがライブで表示されます。

カスタムドメイン名の追加

CNAME レコードの使用

デフォルトでは、Surge は、サービスに展開するすべての Web サイトにカスタム サブドメインを提供します。 your-custom-domain.surge.sh のようになります。 サブドメインが何であるかをカスタマイズして選択できます (まだ使用されていない場合)。 プロのプロジェクトには、カスタム ドメインを使用する必要があります。

これを行うには、ドメインプロバイダーのDNSパネルにXNUMXつの新しいCNAMEレコードを追加する必要があります。 XNUMXつはホスト名@で、もうXNUMXつはホスト名wwwです。 両方のCNAMEレコードは、次のIPアドレスを指します。

na-west1.surge.sh

A レコードの使用

何らかの理由でドメイン プロバイダーが CNAME レコードを許可しない場合は、代わりに A レコードを設定できます。 A レコードが 45.55.110.124 の IP アドレスを指すようにします。

カスタムサブドメインの使用

sub.my-cool-site.com など、任意のカスタム サブドメインを使用して Surge を指すこともできます。 そのためには、新しい CNAME レコードを設定する必要があります。 これにより、上記と同じ na-west1.surge.sh IP アドレスにつながるはずですが、今回はホスト名が *. * ホスト名はワイルドカードです。 プライマリ ドメイン以外のサブドメインは有効であり、許可されます。

サージ プログラムは、これらの DNS の変更をすぐに認識します。 他の場所に伝播するには時間がかかる場合があります。 ただし、通常は 24 ～ 48 時間ほどかかります。

カスタム ドメインを使用したプロジェクトのデプロイ

DNS 設定が有効になったら、プロジェクトをデプロイできます。 使用するドメインを指定する必要があります。 これを行うには、端末でurgeコマンドを実行します。 次のように、最初にプロジェクトへのファイル パスを指定し、次にカスタム ドメインを指定します。

サージ ファイル パス//プロジェクト a-cool-custom-domain.com

カスタムドメインをプロジェクトにバインドする

ドメインをプロジェクトにバインドできるため、デプロイするたびにドメインを入力する必要はありません。 次のように、echo コマンドを使用して、CNAME ファイルに送信します。

echo a-cool-custom-domain.com> CNAME

Surgeプロジェクトを共有する

他の Surge ユーザーに公開許可を与えるには、まずプロジェクトを投稿する必要があります。 次に、コマンド ラインに add コマンドを入力して、電子メール アドレスで共同作業者を追加します。

サージ–追加 Collaborator@email.com

プロジェクトに招待され、招待を受け入れるゲストは、ソース ファイルを同じドメインに公開できます。

サージプロジェクトの一覧表示

Surge を使用して公開したプロジェクトを表示するには、この単純な Surge コマンドをコマンド ラインに入力します。 これにより、すべてのプロジェクトのリストが生成されます。

サージリスト

カスタム404エラーページの追加

デフォルトの 404 エラー ページをカスタムビルドのものに置き換えたい場合は、新しい 404 ファイルをデプロイする準備ができたら、surge をコマンドするだけで 404.html ファイルを Surge プロジェクトに追加するだけです。

.surgeignore ファイルを作成する

Git エコシステムの .gitignore ファイルと同様に、Surge は独自の無視ファイルを提供します。 Surge が展開時に無視するファイルとディレクトリのリストを設定できます。これは、開発プロセス中にのみ関連するファイルを除外するのに役立ちます。 完全に非公開にできるものはすべて、ここに含めることをお勧めします。

これを設定するには、プロジェクト フォルダーのルートに .surgeignore という名前の新しいファイルを作成します。 このファイルで無視したいファイルとディレクトリをリストできます。 一般的な例には、node_modules、bower_components などがあります。 サイトの運用バージョンに関連しない特定のファイルの種類を無視することもできます。 拡張子 (つまり、*.swp、*.psd など) の前に * (ワイルドカード記号) を追加すると、これが実現されます。

サージからサイトを削除する

何らかの理由でWebサイトを削除したい場合は、surge teardownコマンドに続けてプロジェクトのドメインを使用すると、これを簡単に行うことができます。

サージティアダウン your-domain.com

プロジェクトを削除する前に、Surgeのバージョンが最新バージョンに更新されていることを確認してください。

サージとGithubページの比較

サージと同様に、もうXNUMXつの一般的な代替静的ホスティングサービスは Githubページ. この無料サービスにより、ユーザーは Github リポジトリで個人の静的サイト プロジェクトをホストできます。 Github ページは、最高ランクの静的ホスティング サービスの XNUMX つとして、あらゆる規模の Web 開発者の間で非常によく知られている評判を誇っています。 ドメインgithub.ioの下に作成できる「プロジェクトページまたはユーザーおよび組織ページ」のXNUMX種類のページを作成できます。 もちろん、カスタム ドメインも自由に使用できます。 Github は、商用目的のプロジェクトをホスティング サービスを使用して公開しないことを明示的に推奨しています。 そのため、大規模なウェブサイトには対応できないかもしれませんが、Github Pages は非商用または個人的な使用に最適です。

プロジェクト ページとユーザーおよび組織ページにはわずかな違いがあります。 プロジェクト ページは、master ブランチや「GH-pages」ブランチなど、複数のソースの場所から公開できます。 カスタム ドメインがない場合、デフォルトの公開ドメインは https:// になります。 .github.io/. 一方、ユーザー ページと組織ページは、Github リポジトリの下のマスター ブランチにあります。 彼らはドメイン https:// で公開しています.github.io.

サージの利点

Github Pages は間違いなく強力なツールですが、Surge には Github Pages にはない利点もあります。 これらの利点の 200 つは、クライアント側のルーティングです。 Surge プロジェクト内で、クライアントが存在しないパスを要求した場合、クライアントを「バックアップ」HTML ファイル (404.html) にリダイレクトできます。 これは、Surge が警告的な XNUMX エラーを表示するのではなく、フォールバック ファイルを提供するため、有益です。

Surge のもう XNUMX つの注目すべき利点は、ユーザーが自分のサイトに新しい変更を数秒で展開できることです。 前述のように、surge コマンドをコマンド ラインに入力するだけで、行った変更をオンラインで即座に表示できます。 テストの実験中に特に役立ちます。ユーザーの Web サイトに対する単純な編集は、管理が容易です。 Web ページをすぐに更新するオプションがあるため、Web ブラウザーでの変更がより顕著になります。 あるいは、Github Page のユーザーは、オンライン インターフェースに変更をプッシュしてコミットし続け、長くて面倒なプロセスに苦労することになります。 長期的には、適切な静的サイトは、ソフトウェア開発者が混乱する時間を防ぎます。

まとめ

結論として、Surge を使用して静的サイトをデプロイすることは、開発プロセスを合理化し、Web サイトを迅速に稼働させるのに役立つ強力なツールです。 経験豊富な開発者でも初心者でも、Surge はユーザーフレンドリーで直感的なプラットフォームであり、Web サイトをすばやく構築して立ち上げるのに役立ちます。

初期セットアップと構成からサイトの展開と管理に至るまで、Surge は Web サイトの管理を容易にする包括的な機能とツールのセットを提供します。 リードを生成する 常にスムーズに動作していることを確認します。 強力な自動化機能と柔軟な構成オプションを備えた Surge は、静的サイトを迅速かつ効率的に構築および展開したいと考えている人にとって優れた選択肢です。

全体として、静的サイトを展開するための信頼性が高く効率的な方法を探している場合は、Surge を検討する価値があります。 直感的なインターフェイス、強力な機能、役立つドキュメントを備えた Surge は、Web サイトを次のレベルに引き上げようとしているすべての開発者にとって価値のあるツールです。 それでは、開発プロセスを合理化し、サイトを次のレベルに引き上げるのにどのように役立つかを試してみませんか?