靜的ウェブサイトジェネレーター：ランディングページのワークフローを改善するための強力なツール

コアポイント：

Hugoなどの靜的なWebサイトジェネレーターは、コンテンツやWebデザインの完全な制御、速度の改善、柔軟性の向上など、多くの利點を提供します。 WordPressなどのコンテンツ管理システムとは異なり、訪問者がリクエストするたびにページを構築します。靜的Webサイトジェネレーターは、新しいコンテンツを作成または編集するときにWebページを構築します。
• 靜的なWebサイトジェネレーターに移行すると、ホスティングプロセスを簡素化できます。 usersNapはNetlifyを正常に使用します。NetlifyはGitHubでうまく機能し、単純な展開プロセスを提供します。
ソースコード管理、コードシップによる自動テスト、およびusersNapを使用した手動テストにGithubを使用すると、靜的Webサイトの強力な開発ワークフローが作成されます。このツールの組み合わせにより、効率的なエラーレポートと自動テストが可能になり、高品質でエラーのない環(huán)境が確保されます。
• この記事では、UsersNapのテクニカルマーケティング擔當者であるThomas Pehamは、靜的Webサイトジェネレーターがランディングページのワークフローを支援できる方法と理由を説明しています。

バグを見つけるのが好きな人はいません。さらに悪いことに、デジタル製品を購入するときにバグを見つけるのが好きな人はいません。そのため、數萬人のユーザーにWebベースのバグ追跡ツールを提供する企業(yè)として、バグのない環(huán)境を確保する必要があります。私たちのWebページが成長するにつれて、したがってコードの行の數が成長するにつれて、內部ワークフローを改善する方法を見つける動機があります。この記事では、ツールスタックを変更して、新しいランディングページの生成と展開方法を変更するために、過去數か月にわたって行ってきた旅を紹介したいと思います。

usersnap.comの新しいツールスタック

usersnap.comランディングページの內部ワークフローを改善することを決定するとすぐに、回答する必要がある多くの質問があります。どのコンテンツ管理システムを使用しますか？どんなソフトウェアツール？さらに質問があります。最終的にHugoを使用して、usersnap.comのメインWebサイトフレームワークとして使用しました。この決定は、チームが協力して開発する方法に根本的な変化をもたらしました。

靜的Webサイトジェネレーターの利點

では、ヒューゴは私たちのウェブサイトの設定でどのような役割を果たしていますか？ Hugoは、オープンソースの靜的Webサイトジェネレーターです。靜的Webサイトジェネレーターは、新しいコンテンツを作成したり、コンテンツを編集したりするときにWebページを構築します。代わりに、WordPressなどのコンテンツ管理システムは、訪問者がリクエストするたびにページを構築します（ただし、さまざまなキャッシュテクニックがありますが）。 WordPressのようなシステムではなく、Hugoのような靜的なWebサイトジェネレーターを選択することには多くの利點があります。そして、これらの利點は、パフォーマンスだけではありません。 Hugoで作成された靜的Webページは、コンテンツとWebデザインを100％制御できます。さまざまなレイアウトとコンテンツタイプのWebサイトを開始する予定がある場合は、コンテンツ管理システムの代わりに靜的Webサイトジェネレーターを使用することを検討することは理にかなっています。また、特定のCMSのすべての機能を知る必要はありませんが、HTMLとCSSの基本を知る必要があります。 Hugoはもともと、Steve Franciaによってサイドプロジェクトとして開始されました。今日、Hugoコミュニティには165人以上の貢獻者、35人のトピック、數千人のユーザーがいます。私たちは私たちのサイドプロジェクトBugtrackers.ioでHugoを使用しています。また、usersnap.comに使用したいフレームワークでもあることがわかっています。

Netlify WordPressのようなCMSが利點よりも複雑さをもたらすと判斷した後、靜的ホストを探し始めました。要件はシンプルで明確です。靜的ホストはGitHubと完全に連攜する必要があり、會社の全員が実行できる展開プロセスを設定できる必要があります。 Googleに取得された後、Divshot（bugtrackers.ioのホスト）がシャットダウンされると、netlifyに切り替えます。 Netlifyに非常に満足しているため、靜的なランディングページとして選択することも自然で簡単な決定です。 githubを使用してバージョンコントロール

他のいくつかのプロジェクトでGitHubを使用しているため、Githubがソースコード管理の場所になることがわかっています。新しいランディングページ用にプライベートリポジトリをセットアップし、GitHubをNetLifyに接続するのは非常に簡単です。

特にHugoのような靜的なWebサイトジェネレーターの場合、このワークフローはさらに強力になります。コマンドを使用して、netlifyでHugoを構成できます。プロジェクトの構築方法と、どのディレクトリを公開するかを選択するだけです。 GitHubにプッシュするたびに、Netlifyはビルドコマンドを実行し、結果を展開します。私たちの例では、構成は次のようになります：

（JavaScriptおよびCSSの前処理のために他のツールを実行します。）

CodeshipとusersNapを使用したhugo

テスト

<code>Repository: usersnap/landing-pages
Branch: master

Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch 
build —production && cd .. && hugo

Public folder: /public</code>

テストと品質保証に関しては、ほとんどの人がこのトピックを避けるのに忙しいようです。 ;）Codeship（自動テスト用）とUsersNap（手動テスト用）を使用して、自動テストセーフティネットを使用している間、いつでもバグを報告できる完璧なツールチェーンを見つけたと思います。そのため、コードがNetlifyでホストされる前に、コードシップによってテスト、準備、展開されます。このようにして、靜的Webサイトのステージングおよび制作環(huán)境を設定します。展開したら、usersNap（はい、獨自の製品を使用します）を手動のテストと品質保証に使用するか、新しいアイデアについて話し合うか、何かに関するフィードバックを収集します。要するに、開発ワークフローは次のとおりです

すべての人を関與させるために、CodeshipとusersNapをSlackに接続しました。新しいプッシュが専用のスラックチャネルに表示されます。さらに、開発者は、新しいバグレポートとフィードバックについてSlackの通知を受け取ります。

バグを管理して仕事を終わらせる

新しいバグとエラーに関するアラートと通知を受信することも同じです。優(yōu)先順位付け、割り當て、修正は別の問題です。當社の製品と開発チームは、機能マトリックスと呼ばれる製品ロードマップに依存しています。この機能マトリックスには、チームが取り組んでいるすべての機能、バグ修正、変更リクエストが含まれています。機能マトリックスに加えて、コミュニケーションと生活を簡素化するために、いくつかの內部ツールも使用します。 Slackは、會社全體でお互いにコミュニケーションをとることができるので、Slackを呼び出したいと思っています。新しいプロジェクトを管理し、仕事を成し遂げるために、私たちは製品管理ツールBlossomに依存しています。これにより、全體像を十分に理解できるようになります。たとえば、當社の製品用のブロッサムボードがあります。これにより、新製品の要件の現在の狀況を十分に理解できるようになりました。また、すべての靜的Webサイトプロジェクト用のブラックボードもあります。

次は何ですか？

成長するスタートアップとして、私たちは効率を改善する新しい方法について考え続けています。新しい従業(yè)員を開発チームに追加するには、私たちがどのように働いているかを再考し、異なる方法で行う必要がある仕事を特定する必要があります。新しいワークフローを通じて、新しいランディングページの展開をより効率的にする方法を見つけました。今後、DevOpsは企業(yè)の発展策にとってますます重要になっていると考えています。 AWSやAzureなどのサービスへのインフラストラクチャをアウトソーシングすることは、ソフトウェアの構築とスケーリングの事実上の基準となっています。その結果、インフラストラクチャの運用はそれほど重要ではありませんが、ソフトウェアの運用とサービスを処理するリソース、スキル、ツールに対する需要が高まっています。幸いなことに、DevOpsをスピードアップするのに役立つさまざまなサービスがすでにあります。

（記事の殘りの部分はFAQであり、以前の返信でカバーされています。複製コンテンツはここで省略されています）

以上が靜的サイトジェネレーターワークフローの開発の詳細內容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。