📝 hosting-deployment

This commit is contained in:
yuubinnkyoku 2024-12-22 02:11:39 +00:00
parent d60dc0beb6
commit cc8828cf53

View file

@ -1,38 +1,38 @@
---
title: "Hosting & Deployment"
title: "ホスティングとデプロイ"
weight: 14
draft: false
description: "Learn how to deploy a Blowfish site."
description: "Blowfish サイトのデプロイ方法について説明します。"
slug: "hosting-deployment"
tags: ["docs", "hosting", "deployment", "github", "netlify", "render"]
series: ["Documentation"]
series_order: 14
---
There are many ways to deploy your Hugo website built with Blowfish. The theme is designed to be flexible in almost any deployment scenario.
Blowfish で構築された Hugo ウェブサイトをデプロイする方法はたくさんあります。このテーマは、ほとんどすべてのデプロイシナリオで柔軟に対応できるように設計されています。
Blowfish is built using relative URLs throughout the theme. This enables sites to easily be deployed to sub-folders and hosts like GitHub Pages. There's usually no special configuration required for this to work as long as the `baseURL` parameter has been configured in the `config.toml` file.
Blowfish は、テーマ全体で相対的な URL を使用して構築されています。これにより、サイトをサブフォルダや GitHub Pages などのホストに簡単にデプロイできます。`baseURL` パラメータが `config.toml` ファイルで設定されていれば、通常、これが機能するために特別な設定は必要ありません。
The official Hugo [Hosting and Deployment](https://gohugo.io/hosting-and-deployment/) docs are the best place to learn how to deploy your site. The sections below contain some specific theme configuration details that can help you deploy smoothly with certain providers.
Hugo の公式 [ホスティングとデプロイ](https://gohugo.io/hosting-and-deployment/) ドキュメントは、サイトのデプロイ方法を学ぶのに最適な場所です。以下のセクションには、特定のプロバイダーでスムーズにデプロイするのに役立つ、テーマ固有の設定の詳細が記載されています。
**Choose your provider:**
**プロバイダーを選択してください:**
- [GitHub Pages](#github-pages)
- [Netlify](#netlify)
- [Render](#render)
- [Cloudflare Pages](#cloudflare-pages)
- [Shared hosting, VPS or private web server](#shared-hosting-vps-or-private-web-server)
- [共有ホスティング、VPS、またはプライベート Web サーバー](#共有ホスティング-vps-またはプライベート-web-サーバー)
---
## GitHub Pages
GitHub allows hosting on [GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) using Actions. To enable this functionality, enable Pages on your repo and create a new Actions workflow to build and deploy your site.
GitHub では、[GitHub Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages) でのアクションを使用したホスティングが可能です。この機能を有効にするには、リポジトリで Pages を有効にし、サイトをビルドしてデプロイするための新しいアクションワークフローを作成します。
The file needs to be in YAML format, placed within the `.github/workflows/` directory of your GitHub repository and named with a `.yml` extension.
ファイルは YAML 形式で、GitHub リポジトリの `.github/workflows/` ディレクトリ内に配置し、`.yml` 拡張子を付けて名前を付ける必要があります。
{{< alert >}}
**Important:** Ensure you set the correct branch name under `branches` and in the deploy step `if` parameter to the source branch used in your project.
**重要:** `branches` の下とデプロイステップの `if` パラメータに、プロジェクトで使用されているソースブランチの正しいブランチ名を設定してください。
{{< /alert >}}
```yaml
@ -74,19 +74,19 @@ jobs:
publish_dir: ./public
```
Push the config file to GitHub and the action should automatically run. It may fail the first time and you'll need to visit the **Settings > Pages** section of your GitHub repo to check the source is correct. It should be set to use the `gh-pages` branch.
設定ファイルを GitHub にプッシュすると、アクションが自動的に実行されます。最初は失敗する可能性があり、GitHub リポジトリの **Settings > Pages** セクションにアクセスして、ソースが正しいことを確認する必要があります。`gh-pages` ブランチを使用するように設定する必要があります。
{{< screenshot src="github-pages-source.jpg" alt="Screen capture of GitHub Pages source" >}}
{{< screenshot src="github-pages-source.jpg" alt="GitHub Pages ソースのスクリーンキャプチャ" >}}
Once the settings are configured, re-run the action and the site should build and deploy correctly. You can consult the actions log to check everything deployed successfully.
設定が完了したら、アクションを再実行すると、サイトが正しくビルドおよびデプロイされます。すべてが正常にデプロイされたことを確認するには、アクションログを参照してください。
## Netlify
To deploy to [Netlify](https://www.netlify.com), create a new continuous deployment site and link it to your source code. The build settings can be left blank in the Netlify UI. You will only need to configure the domain you'll be using.
[Netlify](https://www.netlify.com) にデプロイするには、新しい継続的デプロイサイトを作成し、それをソースコードにリンクします。Netlify UI では、ビルド設定を空白のままにすることができます。使用するドメインを設定するだけで済みます。
{{< screenshot src="netlify-build-settings.jpg" alt="Screen capture of Netlify build settings" >}}
{{< screenshot src="netlify-build-settings.jpg" alt="Netlify ビルド設定のスクリーンキャプチャ" >}}
Then in the root of your site repository, create a `netlify.toml` file:
次に、サイトリポジトリのルートに `netlify.toml` ファイルを作成します。
```toml
# netlify.toml
@ -98,7 +98,7 @@ Then in the root of your site repository, create a `netlify.toml` file:
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Set to preferred timezone
TZ = "UTC" # 希望のタイムゾーンに設定
[context.production.environment]
HUGO_VERSION = "0.104.1"
@ -108,41 +108,41 @@ Then in the root of your site repository, create a `netlify.toml` file:
HUGO_VERSION = "0.104.1"
```
This configuration assumes you are deploying Blowfish as a Hugo module. If you have installed the theme using another method, change the build command to simply `hugo --gc --minify -b $URL`.
この設定では、Blowfish を Hugo モジュールとしてデプロイすることを想定しています。別の方法でテーマをインストールした場合は、ビルドコマンドを単に `hugo --gc --minify -b $URL` に変更します。
When you push the config file to your repo, Netlify should automatically deploy your site. You can check the deploy logs in the Netlify UI to check for any errors.
設定ファイルをリポジトリにプッシュすると、Netlify は自動的にサイトをデプロイします。エラーがないか確認するには、Netlify UI のデプロイログを確認してください。
## Render
Deploying to [Render](https://render.com) is very straightforward and all configuration is via the Render UI.
[Render](https://render.com) へのデプロイは非常に簡単で、すべての設定は Render UI を介して行います。
Create a new **Static Site** and link it to your project's code repository. Then simply configure the build command to be `hugo --gc --minify` and publish directory to be `public`.
新しい **静的サイト** を作成し、それをプロジェクトのコードリポジトリにリンクします。次に、ビルドコマンドを `hugo --gc --minify` に、公開ディレクトリを `public` に設定するだけです。
{{< screenshot src="render-settings.jpg" alt="Screen capture of Render settings" >}}
{{< screenshot src="render-settings.jpg" alt="Render 設定のスクリーンキャプチャ" >}}
The site will automatically build and deploy whenever you push a change to your repo.
リポジトリに変更をプッシュするたびに、サイトが自動的にビルドおよびデプロイされます。
## Cloudflare Pages
Cloudflare offers the [Pages](https://pages.cloudflare.com/) service that can host Hugo blogs. It builds the site from a git repository and then hosts it on Cloudflare's CDN. Follow their [Hugo deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) to get started.
Cloudflare は、Hugo ブログをホストできる [Pages](https://pages.cloudflare.com/) サービスを提供しています。これは、git リポジトリからサイトをビルドし、Cloudflare の CDN でホストします。[Hugo デプロイメントガイド](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site) に従って始めてください。
The Rocket Loader™ feature offered by Cloudflare tries to speed up rendering of web pages with JavaScript, but it breaks the appearance switcher in the theme. It can also cause an annoying light/dark screen flash when browsing your site due to scripts loading in the wrong order.
Cloudflare が提供する Rocket Loader™ 機能は、JavaScript を使用した Web ページのレンダリングを高速化しようとしますが、テーマの外観スイッチャーが壊れます。また、スクリプトが間違った順序で読み込まれるため、サイトの閲覧時に迷惑な明暗の画面のちらつきが発生する可能性があります。
This problem can be fixed by disabling it:
この問題は、次のように無効にすることで修正できます。
- Go to the [Cloudflare dashboard](https://dash.cloudflare.com)
- Click on your domain name in the list
- Click _Optimization_ in the _Speed_ section
- Scroll down to _Rocket Loader™_ and disable it
- [Cloudflare ダッシュボード](https://dash.cloudflare.com) に移動します
- リストでドメイン名をクリックします
- _Speed_ セクションで _Optimization_ をクリックします
- _Rocket Loader™_ までスクロールして無効にします
Hugo sites built with Blowfish still load very quickly, even with this feature disabled.
Blowfish でビルドされた Hugo サイトは、この機能を無効にしても非常に高速に読み込まれます。
## Shared hosting, VPS or private web server
## 共有ホスティング、VPS、またはプライベート Web サーバー
Using traditional web hosting, or deploying to your own web server, is as simple as building your Hugo site and transferring the files to your host.
従来の Web ホスティングを使用したり、独自の Web サーバーにデプロイしたりするのは、Hugo サイトをビルドしてファイルをホストに転送するのと同じくらい簡単です。
Make sure that the `baseURL` parameter in `config.toml` is set to the full URL to the root of your website (including any sub domains or sub-folders).
`config.toml``baseURL` パラメータが、Web サイトのルートへの完全な URL (サブドメインやサブフォルダを含む) に設定されていることを確認してください。
Then build your site using `hugo` and copy the contents of the output directory to the root of your web server and you will be ready to go. By default, the output directory is named `public`.
次に、`hugo` を使用してサイトをビルドし、出力ディレクトリの内容を Web サーバーのルートにコピーすると、準備完了です。デフォルトでは、出力ディレクトリの名前は `public` です。
_If you need a hosting provider, check out [Vultr](https://www.vultr.com/?ref=8957394-8H) or [DigitalOcean](https://m.do.co/c/36841235e565). Signing up using these affiliate links will give you up to $100 in free credit so you can try the service._
_ホスティングプロバイダーが必要な場合は、[Vultr](https://www.vultr.com/?ref=8957394-8H) または [DigitalOcean](https://m.do.co/c/36841235e565) を確認してください。これらのアフィリエイトリンクを使用してサインアップすると、最大 $100 の無料クレジットが付与されるため、サービスを試すことができます。_