[ Hugo ]の開発、ステージ、prod構成
ようこそ!
前回のチュートリアルでは、Hugoとその典型的な違いについて話しました.
今日、私たちは、本当に重要な何かについて話します.はい、我々はレイアウトとテンプレートについて話すことなく、このトピックに右にジャンプしている!なぜ?さて、いくつかの時点であなたのウェブサイトをワールドワイドウェブ上で利用できるようにします.これはホスティングに置く必要があることを意味します.ホスティングプロバイダによっては、あなたが開発したコンピュータと異なるように設定する必要があります数多くのことがあります.
展開の最後について考える代わりに、ウェブサイトがすでに大きくなったとき、なぜ我々はすぐにいくつかの大きな実行を確立しませんか?
少しの間、私はHugoについて話すのを止めて、別々の環境を持つ概念をカバーしたいです.
典型的なソフトウェア開発ワークフローは、ソフトウェアアプリケーションの開発サイクルをスムーズにし、手間のかからないようにする1つ以上の環境から成ります.モデルは、通常、開発、ステージング、および生産環境から成ります.複数の環境では、開発、テスト、リリースなどのさまざまな段階でアプリケーションの開発者を助けることを想定しています.
別のプロジェクトでは、これらの用語は異なることを意味することができます.趣味ウェブサイトのために、開発環境は開発者コンピュータにあります、一方、より大きいプロジェクトの間、それは複数のサーバーの間で分配されます.ステージングとプロダクションが同一であることは一般的です、主な違いは本当のユーザーデータの存在です.
ヒューゴに戻って取得し、右のコーディングにジャンプしましょう!私は仕事を続けます
まず最初に、追加(または新しいプロジェクトを起動した場合に作成する)をしましょう
HUGO開発サーバの起動
あなたが開くならば
構成ファイルを使用すると、簡単に開発のさまざまな段階でHugoプロジェクトを管理することができます.
現実世界の例を見てみましょう.ウェブサイトが3つの環境を持っていると仮定してくださいギタブページのステージングとNetLifyでの生産.どのように、この特定のウェブサイトのための構成は見えますか?
さて、唯一の方法は、このようなウェブサイトを作成することです!これはNetLifyまたはGitHubページにウェブサイトを展開する方法についてのチュートリアルではありません.私がここで作りたいポイントは、箱の中からヒューゴを使用して設定を管理する方法です.
まず、開発の設定を見てみましょう.TOML :
ステージングに移動します.私はgithubリポジトリを作成し
すべてを考慮して、ここに私の設定段階があります.TOML :
この瞬間以前は、デフォルトの設定ファイルを常に使用しています.ヒューゴは知っている
最後に、我々の生産環境.Netlifyはデフォルトで静的なウェブサイトのCI/CDが付属しています.既存のGithubリポジトリを接続し、最小限の設定を行います.
NetLifyによって生成されたデフォルトのアプリケーション名はかなりランダムです.あなたはいつもそれを変えることができます、しかし、私のケースでは、私はそのままそれを残すことに決めました
繰り返しますが、この例は、実際のチュートリアルではなく、イラストのためのものです.それは、あなたが自分自身を試してみたい場合には、完全なコードは私の上にありますGitHub .
私があなたに行かせる前に、1つの最後のもの.私たちはこのプロジェクトの設定ファイルを使用していますが、Hugoは開発者がディレクトリによって設定を分離することができます.
たとえば、configディレクトリには次のレイアウトがあります.
今日はこれだ!うまくいけば、あなたは何か新しいことを学んだ.次回はヒューゴレイアウトとテンプレートについて話します.
ステイ!
前回のチュートリアルでは、Hugoとその典型的な違いについて話しました.
今日、私たちは、本当に重要な何かについて話します.はい、我々はレイアウトとテンプレートについて話すことなく、このトピックに右にジャンプしている!なぜ?さて、いくつかの時点であなたのウェブサイトをワールドワイドウェブ上で利用できるようにします.これはホスティングに置く必要があることを意味します.ホスティングプロバイダによっては、あなたが開発したコンピュータと異なるように設定する必要があります数多くのことがあります.
展開の最後について考える代わりに、ウェブサイトがすでに大きくなったとき、なぜ我々はすぐにいくつかの大きな実行を確立しませんか?
展開環境
少しの間、私はHugoについて話すのを止めて、別々の環境を持つ概念をカバーしたいです.
典型的なソフトウェア開発ワークフローは、ソフトウェアアプリケーションの開発サイクルをスムーズにし、手間のかからないようにする1つ以上の環境から成ります.モデルは、通常、開発、ステージング、および生産環境から成ります.複数の環境では、開発、テスト、リリースなどのさまざまな段階でアプリケーションの開発者を助けることを想定しています.
別のプロジェクトでは、これらの用語は異なることを意味することができます.趣味ウェブサイトのために、開発環境は開発者コンピュータにあります、一方、より大きいプロジェクトの間、それは複数のサーバーの間で分配されます.ステージングとプロダクションが同一であることは一般的です、主な違いは本当のユーザーデータの存在です.
ヒューゴの環境構成
ヒューゴに戻って取得し、右のコーディングにジャンプしましょう!私は仕事を続けます
hello-world 前のチュートリアルからのプロジェクト.新しいプロジェクトを作成することができますhugo create site コマンドは、既存のコードを再利用しないからです.まず最初に、追加(または新しいプロジェクトを起動した場合に作成する)をしましょう
layouts/index.html :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<title>{{ .Title }}</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css"
integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz+WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK"
crossorigin="anonymous">
</head>
<body class="d-flex text-center text-white bg-dark" style="font-size: 1.5em;">
<div class="container w-100 pt-5 mt-5 mx-auto flex-column">
<h1>Welcome to {{ .Title }}!</h1>
The website is served at {{ .Site.BaseURL }}
</div>
</body>
</html>
{{ ... }} それは全くすばらしいです.これをテンプレートと呼ぶ.我々は、今後のポストで詳細をカバーします.今のところただHTMLのバリエーションをする方法と考えてください.HUGO開発サーバの起動
hugo server ), に移動し、http://localhost:1313 . 次のように表示されます. あなたが開くならば
config.toml ここで明らかになるMy New Hugo Site パートが来ています.またbaseURL ドメイン名を設定するプロパティ.これは混乱することができます.開発サーバーを使用する場合baseURL プロパティは部分的に上書きされる.もっと読むhere .構成ファイルを使用すると、簡単に開発のさまざまな段階でHugoプロジェクトを管理することができます.
開発・演出・生産
現実世界の例を見てみましょう.ウェブサイトが3つの環境を持っていると仮定してくださいギタブページのステージングとNetLifyでの生産.どのように、この特定のウェブサイトのための構成は見えますか?
さて、唯一の方法は、このようなウェブサイトを作成することです!これはNetLifyまたはGitHubページにウェブサイトを展開する方法についてのチュートリアルではありません.私がここで作りたいポイントは、箱の中からヒューゴを使用して設定を管理する方法です.
まず、開発の設定を見てみましょう.TOML :
baseURL = "/"
languageCode = "en-us"
title = "Development Environment"
ステージングに移動します.私はgithubリポジトリを作成し
learn-hugo . しかし、あなたはそれを呼び出して無料です.私のgithubのアカウント名はaakatev , だから私のステージングウェブサイトのアドレスはhttps://aakatev.github.io/learn-hugo/ . 通常のスキーマはhttps://<username>.github.io/<repo-name>/ . ページからのファイルdocs ディレクトリので、アカウントにそれを取る必要があります.すべてを考慮して、ここに私の設定段階があります.TOML :
baseURL = "https://aakatev.github.io/learn-hugo/"
languageCode = "en-us"
title = "Staging Environment"
publishDir = "docs"
この瞬間以前は、デフォルトの設定ファイルを常に使用しています.ヒューゴは知っている
config.toml . しかし、名前が違う今、我々は提供しなければなりません--config 以下のように設定します.hugo --config config-stage.toml
最後に、我々の生産環境.Netlifyはデフォルトで静的なウェブサイトのCI/CDが付属しています.既存のGithubリポジトリを接続し、最小限の設定を行います.
NetLifyによって生成されたデフォルトのアプリケーション名はかなりランダムです.あなたはいつもそれを変えることができます、しかし、私のケースでは、私はそのままそれを残すことに決めました
dazzling-curran-c212c7 . ウェブサイトのドメイン名は<netlify-app-name>.netlify.app , ここでは、config - prod . tomlがあります.baseURL = "https://dazzling-curran-c212c7.netlify.app/"
languageCode = "en-us"
title = "Production Environment"
publishDir = "public"
概況
繰り返しますが、この例は、実際のチュートリアルではなく、イラストのためのものです.それは、あなたが自分自身を試してみたい場合には、完全なコードは私の上にありますGitHub .
私があなたに行かせる前に、1つの最後のもの.私たちはこのプロジェクトの設定ファイルを使用していますが、Hugoは開発者がディレクトリによって設定を分離することができます.
たとえば、configディレクトリには次のレイアウトがあります.
├── config
│ ├── _default
│ │ ├── config.toml
│ ├── production
│ │ ├── config.toml
│ │ └── extra.toml
│ └── staging
│ ├── config.toml
│ └── extra.toml
_default サブディレクトリ.Hugoでは、それはかなり自明である特別な名前です.このディレクトリは--configDir フラグが与えられる.今日はこれだ!うまくいけば、あなたは何か新しいことを学んだ.次回はヒューゴレイアウトとテンプレートについて話します.
ステイ!
Reference
この問題について([ Hugo ]の開発、ステージ、prod構成), 我々は、より多くの情報をここで見つけました https://dev.to/hi_artem/learn-hugo-develop-stage-and-prod-configurations-2k8dテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol