diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-05.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-05.png new file mode 100644 index 0000000000..bb98d974a8 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-05.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-06.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-06.png new file mode 100644 index 0000000000..2e9b96e2be Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-06.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-07.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-07.png new file mode 100644 index 0000000000..b3260157b0 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-07.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-08.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-08.png new file mode 100644 index 0000000000..55e80e7100 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-08.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-09.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-09.png new file mode 100644 index 0000000000..b422e3ad6a Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-09.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-11.png b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-11.png new file mode 100644 index 0000000000..e147edfb9d Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-amplify/amplify-step-11.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-amplify/index.md b/content/en/hosting-and-deployment/hosting-on-amplify/index.md new file mode 100644 index 0000000000..d4ec03b411 --- /dev/null +++ b/content/en/hosting-and-deployment/hosting-on-amplify/index.md @@ -0,0 +1,152 @@ +--- +title: Host on AWS Amplify +description: Host your site on AWS Amplify with continuous deployment. +categories: [hosting and deployment] +keywords: [hosting] +menu: + docs: + parent: hosting-and-deployment +toc: true +--- + +## Prerequisites + +Please complete the following tasks before continuing: + +1. [Create an AWS account] +2. [Install Git] +3. [Create a Hugo site] and test it locally with `hugo server` +4. Commit the changes to your local repository +5. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account + +[Bitbucket]: https://bitbucket.org/product +[Create a Hugo site]: /getting-started/quick-start/ +[Create an AWS account]: https://aws.amazon.com/resources/create-account/ +[GitHub]: https://github.com +[GitLab]: https://about.gitlab.com/ +[Install Git]: https://git-scm.com/book/en/v2/Getting-Started-Installing-Git + +## Procedure + +This procedure will enable continuous deployment from a GitHub repository. The procedure is essentially the same if you are using GitLab or Bitbucket. + +Step 1 +: Create a file named `amplify.yml` in the root of your project. + +```sh +touch amplify.yml +``` + +Step 2 +: Copy and paste the YAML below into the file you created. Change the application versions as needed. + +{{< code file=amplify.yml copy=true >}} +version: 1 +env: + variables: + # Application versions + DART_SASS_VERSION: 1.81.0 + GO_VERSION: 1.23.3 + HUGO_VERSION: 0.139.3 + # Time zone + TZ: America/Los_Angeles + # Cache + HUGO_CACHEDIR: ${PWD}/.hugo + NPM_CONFIG_CACHE: ${PWD}/.npm +frontend: + phases: + preBuild: + commands: + # Install Dart Sass + - curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - sudo tar -C /usr/local/bin -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz + - export PATH=/usr/local/bin/dart-sass:$PATH + + # Install Go + - curl -LJO https://go.dev/dl/go${GO_VERSION}.linux-amd64.tar.gz + - sudo tar -C /usr/local -xf go${GO_VERSION}.linux-amd64.tar.gz + - rm go${GO_VERSION}.linux-amd64.tar.gz + - export PATH=/usr/local/go/bin:$PATH + + # Install Hugo + - curl -LJO https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz + - sudo tar -C /usr/local/bin -xf hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz + - rm hugo_extended_${HUGO_VERSION}_linux-amd64.tar.gz + - export PATH=/usr/local/bin:$PATH + + # Check installed versions + - go version + - hugo version + - node -v + - npm -v + - sass --embedded --version + + # Install Node.JS dependencies + - "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci --prefer-offline || true" + + # https://github.com/gohugoio/hugo/issues/9810 + - git config --add core.quotepath false + build: + commands: + - hugo --gc --minify + - ./pagefind --site public + artifacts: + baseDirectory: public + files: + - '**/*' + cache: + paths: + - ${HUGO_CACHEDIR}/**/* + - ${NPM_CONFIG_CACHE}/**/* +{{< /code >}} + +Step 3 +: Commit and push the change to your GitHub repository. + +```sh +git add -A +git commit -m "Create amplify.yml" +git push +``` + +Step 4 +: Log in to your AWS account, navigate to the [Amplify Console], then press the **Deploy an app** button. + +[Amplify Console]: https://console.aws.amazon.com/amplify/apps + +Step 5 +: Choose a source code provider, then press the **Next** button. + + ![screen capture](amplify-step-05.png) + +Step 6 +: Authorize AWS Amplify to access your GitHub account. + + ![screen capture](amplify-step-06.png) + +Step 7 +: Select your personal account or relevant organization. + + ![screen capture](amplify-step-07.png) + +Step 8 +: Authorize access to one or more repositories. + + ![screen capture](amplify-step-08.png) + +Step 9 +: Select a repository and branch, then press the **Next** button. + + ![screen capture](amplify-step-09.png) + +Step 10 +: On the "App settings" page, scroll to the bottom then press the **Next** button. Amplify reads the `amplify.yml` file you created in Steps 1-3 instead of using the values on this page. + +Step 11 +: On the "Review" page, scroll to the bottom then press the **Save and deploy** button. + +Step 12 +: When your site has finished deploying, press the **Visit deployed URL** button to view your published site. + + ![screen capture](amplify-step-11.png) diff --git a/content/en/hosting-and-deployment/hosting-on-aws-amplify.md b/content/en/hosting-and-deployment/hosting-on-aws-amplify.md deleted file mode 100644 index 43d75312ae..0000000000 --- a/content/en/hosting-and-deployment/hosting-on-aws-amplify.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Host on AWS Amplify -description: Develop and deploy a cloud-powered web app with AWS Amplify. -categories: [hosting and deployment] -keywords: [hosting,amplify] -menu: - docs: - parent: hosting-and-deployment -toc: true ---- - -In this guide we'll walk through how to deploy and host your Hugo site using the [AWS Amplify Console](https://console.amplify.aws). - -AWS Amplify is a combination of client library, CLI toolchain, and a Console for continuous deployment and hosting. The Amplify CLI and library allow developers to get up & running with full-stack cloud-powered applications with features like authentication, storage, serverless GraphQL or REST APIs, analytics, Lambda functions, & more. The Amplify Console provides continuous deployment and hosting for modern web apps (single page apps and static site generators). Continuous deployment allows developers to deploy updates to their web app on every code commit to their Git repository. Hosting includes features such as globally available CDNs, easy custom domain setup + HTTPS, feature branch deployments, and password protection. - -## Pre-requisites - -* [Sign up for an AWS Account](https://portal.aws.amazon.com/billing/signup?redirect_url=https%3A%2F%2Faws.amazon.com%2Fregistration-confirmation). There are no upfront charges or any term commitments to create an AWS account and signing up gives you immediate access to the AWS Free Tier. -* You have an account with GitHub, GitLab, or Bitbucket. -* You have completed the [Quick Start] or have a Hugo website you are ready to deploy and share with the world. - -## Hosting - -1. Log in to the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home) and choose Get Started under Deploy. - ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-gettingstarted.png) - -1. Connect a branch from your GitHub, Bitbucket, GitLab, or AWS CodeCommit repository. Connecting your repository allows Amplify to deploy updates on every code commit to a branch. - ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-connect-repo.gif) - -1. Accept the default build settings. The Amplify Console automatically detects your Hugo build settings and output directory. - ![Hugo Amplify](/images/hosting-and-deployment/hosting-on-aws-amplify/amplify-build-settings.png) - -1. Review your changes and then choose **Save and deploy**. The Amplify Console will pull code from your repository, build changes to the backend and frontend, and deploy your build artifacts at `https://master.unique-id.amplifyapp.com`. Bonus: Screenshots of your app on different devices to find layout issues. - -## Using a newer version of Hugo - -If you need to use a different, perhaps newer, version of Hugo than the version currently supported by AWS Amplify: - -1. Visit the [AWS Amplify Console](https://console.aws.amazon.com/amplify/home), and click the app you would like to modify -1. In the side navigation bar, Under App Settings, click **Build settings** -1. On the Build settings page, near the bottom, there is a section called **Build image settings**. Click **Edit** -1. Under **Live package updates**, click **Add package version override** -1. From the selection, click **Hugo** and ensure the version field says `latest` -1. Click **Save** to save the changes. - -[Quick Start]: /getting-started/quick-start/ diff --git a/content/en/hosting-and-deployment/hosting-on-github/index.md b/content/en/hosting-and-deployment/hosting-on-github/index.md index 28c5ff841d..62582b65de 100644 --- a/content/en/hosting-and-deployment/hosting-on-github/index.md +++ b/content/en/hosting-and-deployment/hosting-on-github/index.md @@ -12,6 +12,8 @@ aliases: [/tutorials/github-pages-blog/] ## Prerequisites +Please complete the following tasks before continuing: + 1. [Create a GitHub account] 2. [Install Git] 3. [Create a Hugo site] and test it locally with `hugo server`. @@ -53,10 +55,11 @@ Step 4 {style="max-width: 280px"} Step 5 -: Create an empty file in your local repository. +: Create a file named `hugo.yaml` in a directory named `.github/worflows`. ```text -.github/workflows/hugo.yaml +mkdir -p .github/workflows +touch hugo.yaml ``` Step 6 @@ -144,7 +147,13 @@ jobs: {{< /code >}} Step 7 -: Commit the change to your local repository with a commit message of something like "Add workflow", and push to GitHub. +: Commit and push the change to your GitHub repository. + +```sh +git add -A +git commit -m "Create hugo.yaml" +git push +``` Step 8 : From GitHub's main menu, choose **Actions**. You will see something like this: @@ -181,7 +190,7 @@ You may remove this step if your site, themes, and modules do not transpile Sass [Dart Sass]: /hugo-pipes/transpile-sass-to-css/#dart-sass -## Additional resources +## Other resources - [Learn more about GitHub Actions](https://docs.github.com/en/actions) - [Caching dependencies to speed up workflows](https://docs.github.com/en/actions/using-workflows/caching-dependencies-to-speed-up-workflows) diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/index.md b/content/en/hosting-and-deployment/hosting-on-netlify/index.md index a634510627..361a40e801 100644 --- a/content/en/hosting-and-deployment/hosting-on-netlify/index.md +++ b/content/en/hosting-and-deployment/hosting-on-netlify/index.md @@ -11,11 +11,13 @@ toc: true ## Prerequisites +Please complete the following tasks before continuing: + 1. [Create a Netlify account] 2. [Install Git] 3. [Create a Hugo site] and test it locally with `hugo server` 4. Commit the changes to your local repository -4. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account +5. Push the local repository to your [GitHub], [GitLab], or [Bitbucket] account [Bitbucket]: https://bitbucket.org/product [Create a Hugo site]: /getting-started/quick-start/ @@ -34,64 +36,64 @@ Step 1 Step 2 : Select your deployment method. -![screen capture](netlify-step-02.png) + ![screen capture](netlify-step-02.png) Step 3 : Authorize Netlify to connect with your GitHub account by pressing the **Authorize Netlify** button. -![screen capture](netlify-step-03.png) + ![screen capture](netlify-step-03.png) Step 4 : Press the **Configure Netlify on GitHub** button. -![screen capture](netlify-step-04.png) + ![screen capture](netlify-step-04.png) Step 5 : Install the Netlify app by selecting your GitHub account. -![screen capture](netlify-step-05.png) + ![screen capture](netlify-step-05.png) Step 6 : Press the **Install** button. -![screen capture](netlify-step-06.png) + ![screen capture](netlify-step-06.png) Step 7 : Click on the site's repository from the list. -![screen capture](netlify-step-07.png) + ![screen capture](netlify-step-07.png) Step 8 : Set the site name and branch from which to deploy. -![screen capture](netlify-step-08.png) + ![screen capture](netlify-step-08.png) Step 9 : Define the build settings, press the **Add environment variables** button, then press the **New variable** button. -![screen capture](netlify-step-09.png) + ![screen capture](netlify-step-09.png) Step 10 : Create a new environment variable named `HUGO_VERSION` and set the value to the [latest version]. [latest version]: https://github.com/gohugoio/hugo/releases/latest -![screen capture](netlify-step-10.png) + ![screen capture](netlify-step-10.png) Step 11 : Press the "Deploy my new site" button at the bottom of the page. -![screen capture](netlify-step-11.png) + ![screen capture](netlify-step-11.png) Step 12 : At the bottom of the screen, wait for the deploy to complete, then click on the deploy log entry. -![screen capture](netlify-step-12.png) + ![screen capture](netlify-step-12.png) Step 13 : Press the **Open production deploy** button to view the live site. -![screen capture](netlify-step-13.png) + ![screen capture](netlify-step-13.png) ## Configuration file diff --git a/content/en/methods/page/GitInfo.md b/content/en/methods/page/GitInfo.md index c54a77371e..a05916d79d 100644 --- a/content/en/methods/page/GitInfo.md +++ b/content/en/methods/page/GitInfo.md @@ -141,6 +141,7 @@ Some providers perform deep clones by default, others allow you to configure the Hosting service | Default clone depth | Configurable :-- | :-- | :-- +AWS Amplify | Deep | N/A Cloudflare Pages | Shallow | Yes [^CFP] DigitalOcean App Platform | Deep | N/A GitHub Pages | Shallow | Yes [^GHP]