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

コアポイント：

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

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

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

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

靜的Webサイトジェネレーターの利點(diǎn)

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

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

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

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

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

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>

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

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

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

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

次は何ですか？

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

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

以上が靜的サイトジェネレーターワークフローの開(kāi)発の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。