静的サイトジェネレーターワークフローの開発

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

コアポイント：

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

バグを見つけるのが好きな人はいません。さらに悪いことに、デジタル製品を購入するときにバグを見つけるのが好きな人はいません。そのため、数万人のユーザーにWebベースのバグ追跡ツールを提供する企業として、バグのない環境を確保する必要があります。私たちの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サイトのステージングおよび制作環境を設定します。展開したら、usersNap（はい、独自の製品を使用します）を手動のテストと品質保証に使用するか、新しいアイデアについて話し合うか、何かに関するフィードバックを収集します。要するに、開発ワークフローは次のとおりです

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

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

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

次は何ですか？

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

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

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