サージを使用して静的サイトをデプロイする(2020アップデート)

サージを使用して静的サイトをデプロイする(2020アップデート)

サージを使用して静的サイトをデプロイする

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

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

詳細には、State Site Generatorsを使用する開発者は、HTMLのみのWebサイトを生成することによってプロセスを開始します。 HTMLのみであるため、サイトはほとんど生データとテンプレートで実行されます。 前述のように、生データも「マークダウンファイル」として分類されます。 理解を深めるために、マークダウンファイル(リンク:https://guides.github.com/features/mastering-markdown/)は、マークダウン言語の方言を使用する一般的なテキストファイルです。 プレーンテキストの書式設定には、太字、斜体、インデント、ヘッダー、表示などのテキストを含む書式を作成するためのテキスト記号が含まれています。 これらのファイルは、プログラミングの知識を比較的必要とせず、動的なWebサイトとは対照的に、作成する最も基本的なタイプのWebサイトです。 したがって、サイトの各Webページには、任意のプラットフォームのすべてのユーザーに対して同じように表示される固定Webサイトコンテンツを含む独自のHTMLファイルがあります。 その結果、ライブサーバーに転送されるビルドが作成されます。

静的サイトと動的サイト

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

サージとは?

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

サージを使用する理由

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

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

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

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

サージ価格

Surgeのインストール

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

npm install –グローバルサージ

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

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

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

サージコマンド

サイトをデプロイする

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

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

発生します

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

静的サイトをSurgeにデプロイする

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

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

(注:入力したカスタムドメイン名がすでに使用されている場合は、エラーメッセージが表示されます。

中止– [に公開する権限がありません]

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

サージ配備

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

サージのある静的サイトの展開

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

使い方 CNAME USBレコーディング

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

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

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

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

サージfilepath / of / project a-cool-custom-domain.com

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

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

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

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

Sunlight Media LLC:Surgeプロジェクトの共有

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

サージ–追加 collaborator@email.com

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

 


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

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

サージリスト

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

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

 

作る .surgeignore file、/ h2>

Gitエコシステムの.gitignoreファイルと同様に、Surgeは独自のignoreファイルを提供します。 展開時に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は、商用目的を達成することを目的としたプロジェクトは、ホスティングサービスを使用して公開しないことを明確に推奨しています。 したがって、大規模なWebサイトに対応できない可能性がありますが、Githubページは非商用または個人的な使用に最適です。

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

サージの利点

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

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

 

著者紹介

クリスタルはカリフォルニア州サンタクラリタの公立高校の先輩です。 彼女は、XNUMX年生のときから最初のWeb開発コースを受講し、Dreamweaverを使用して最初のWebサイトを設計して以来、テクノロジーに投資しています。

彼女は大学レベルのコンピューターサイエンスのコースに進み、Javaプログラミングに習熟しました。 2018年の夏の間、CrystalはKode with Klossyと呼ばれる選択的プログラムに参加し、HTML5 / CSS、Javascriptのスキルを習得し、仮想および拡張現実シミュレーションの開発を実験しました。

Crystalは、中等教育後もコンピューティングとテクノロジーの研究を続けたいと考えています。

2 コメント

  • サウンドス 月29、2020で6:45の午後

    素晴らしいブログ、公開してくれてありがとう。

  • ウルスラン・アリ 月31、2020で3:28の午後

    次の問題が発生しています。解決方法を教えてください
    中止–そのようなファイルまたはディレクトリはありません:C:\ Users \ lenovo \ Desktop \ UrduBootCamp \ UrduBootCamp \ UrslanAli.surge.sh

コメントの投稿

コメントはモデレートされます。 あなたのメールは非公開にされます。 必須フィールドは、マークされています *