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 c3da5ba3e41..ec6a0c52ad8 100644 --- a/content/en/hosting-and-deployment/hosting-on-github/index.md +++ b/content/en/hosting-and-deployment/hosting-on-github/index.md @@ -1,8 +1,8 @@ --- title: Host on GitHub Pages -description: Deploy Hugo as a GitHub Pages project or personal/organizational site and automate the whole process with GitHub Actions +description: Host your site on GitHub Pages with continuous deployment using project, user, or organization pages. categories: [hosting and deployment] -keywords: [hosting,github] +keywords: [hosting] menu: docs: parent: hosting-and-deployment @@ -10,8 +10,6 @@ toc: true aliases: [/tutorials/github-pages-blog/] --- -GitHub provides free and fast static hosting over SSL for personal, organization, or project pages directly from a GitHub repository via its GitHub Pages service and automating development workflows and build with GitHub Actions. - ## Prerequisites 1. [Create a GitHub account] diff --git a/content/en/hosting-and-deployment/hosting-on-netlify.md b/content/en/hosting-and-deployment/hosting-on-netlify.md deleted file mode 100644 index 2dcdd95f5c1..00000000000 --- a/content/en/hosting-and-deployment/hosting-on-netlify.md +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Host on Netlify -description: Netlify can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own CLI. -categories: [hosting and deployment] -keywords: [hosting,netlify] -menu: - docs: - parent: hosting-and-deployment -toc: true ---- - -[Netlify][netlify] provides continuous deployment services, global CDN, ultra-fast DNS, atomic deploys, instant cache invalidation, one-click SSL, a browser-based interface, a CLI, and many other features for managing your Hugo website. - -## Assumptions - -* 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. -* You do not already have a Netlify account. - -## Create a Netlify account - -Go to [app.netlify.com] and select your preferred sign up method. This will likely be a hosted Git provider, although you also have the option to sign up with an email address. - -The following examples use GitHub, but other git providers will follow a similar process. - -![Screenshot of the homepage for app.netlify.com, containing links to the most popular hosted git solutions.](/images/hosting-and-deployment/hosting-on-netlify/netlify-signup.jpg) - -Selecting GitHub will bring up an authorization modal for authentication. Select "Authorize application." - -![Screenshot of the authorization popup for Netlify and GitHub.](/images/hosting-and-deployment/hosting-on-netlify/netlify-first-authorize.jpg) - -## Create a new site with continuous deployment - -You're now already a Netlify member and should be brought to your new dashboard. Select "New site from git." - -![Screenshot of the blank Netlify admin panel with no sites and highlighted 'add new site' button'](/images/hosting-and-deployment/hosting-on-netlify/netlify-add-new-site.jpg) - -Netlify will then start walking you through the steps necessary for continuous deployment. First, you'll need to select your git provider again, but this time you are giving Netlify added permissions to your repositories. - -![Screenshot of step 1 of create a new site for Netlify: selecting the git provider](/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-1.jpg) - -And then again with the GitHub authorization modal: - -![Screenshot of step 1 of create a new site for Netlify: selecting the git provider](/images/hosting-and-deployment/hosting-on-netlify/netlify-authorize-added-permissions.jpg) - -Select the repo you want to use for continuous deployment. If you have a large number of repositories, you can filter through them in real time using repo search: - -![Screenshot of step 1 of create a new site for Netlify: selecting the git provider](/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-2.jpg) - -Once selected, you'll be brought to a screen for basic setup. Here you can select the branch you want to publish, your [build command], and your publish (i.e. deploy) directory. The publish directory should mirror that of what you've set in your [site configuration], the default of which is `public`. The following steps assume you are publishing from the `master` branch. - -## Configure Hugo version in Netlify - -You can [set Hugo version](https://www.netlify.com/blog/2017/04/11/netlify-plus-hugo-0.20-and-beyond/) for your environments in `netlify.toml` file or set `HUGO_VERSION` as a build environment variable in the Netlify console. - -For production: - -{{< code file=netlify.toml >}} -[context.production.environment] - HUGO_VERSION = "0.122.0" -{{< /code >}} - -For testing: - -{{< code file=netlify.toml >}} -[context.deploy-preview.environment] - HUGO_VERSION = "0.122.0" -{{< /code >}} - -The Netlify configuration file can be a little hard to understand and get right for the different environment, and you may get some inspiration and tips from this site's `netlify.toml`: - -{{< readfile file=netlify.toml highlight=toml >}} - -## Build and deploy site - -In the Netlify console, selecting "Deploy site" will immediately take you to a terminal for your build:. - -![Animated gif of deploying a site to Netlify, including the terminal read out for the build.](/images/hosting-and-deployment/hosting-on-netlify/netlify-deploying-site.gif) - -Once the build is finished---this should only take a few seconds--you should now see a "Hero Card" at the top of your screen letting you know the deployment is successful. The Hero Card is the first element that you see in most pages. It allows you to see a quick summary of the page and gives access to the most common/pertinent actions and information. You'll see that the URL is automatically generated by Netlify. You can update the URL in "Settings." - -![Screenshot of successful deploy badge at the top of a deployments screen from within the Netlify admin.](/images/hosting-and-deployment/hosting-on-netlify/netlify-deploy-published.jpg) - -![Screenshot of homepage to https://hugo-netlify-example.netlify.com, which is mostly dummy text](/images/hosting-and-deployment/hosting-on-netlify/netlify-live-site.jpg) - -[Visit the live site][visit]. - -Now every time you push changes to your hosted git repository, Netlify will rebuild and redeploy your site. - -See [this blog post](https://www.netlify.com/blog/2017/04/11/netlify-plus-hugo-0.20-and-beyond/) for more details about how Netlify handles Hugo versions. - -## Use Hugo themes with Netlify - -The `git clone` method for installing themes is not supported by Netlify. If you were to use `git clone`, it would require you to recursively remove the `.git` subdirectory from the theme folder and would therefore prevent compatibility with future versions of the theme. - -A *better* approach is to install a theme as a proper git submodule. You can [read the GitHub documentation for submodules][ghsm] or those found on [Git's website][gitsm] for more information, but the command is similar to that of `git clone`: - -```txt -cd themes -git submodule add https://github.com// -``` - -It is recommended to only use stable versions of a theme (if it’s versioned) and always check the changelog. This can be done by checking out a specific release within the theme's directory. - -Switch to the theme's directory and list all available versions: - -```txt -cd themes/ -git tag -# exit with q -``` - -You can checkout a specific version as follows: - -```txt -git checkout tags/ -``` - -You can update a theme to the latest version by executing the following command in the *root* directory of your project: - -```txt -git submodule update --rebase --remote -``` - -## Next steps - -You now have a live website served over HTTPS, distributed through CDN, and configured for continuous deployment. Dig deeper into the Netlify documentation: - -1. [Using a Custom Domain] -2. [Setting up HTTPS on Custom Domains][httpscustom] -3. [Redirects and Rewrite Rules] - -[app.netlify.com]: https://app.netlify.com -[build command]: /getting-started/usage/#build-your-site -[site configuration]: /getting-started/configuration/ -[ghsm]: https://github.com/blog/2104-working-with-submodules -[gitsm]: https://git-scm.com/book/en/v2/Git-Tools-Submodules -[httpscustom]: https://www.netlify.com/docs/ssl/ -[hugoversions]: https://github.com/netlify/build-image/blob/master/Dockerfile#L216 -[netlify]: https://www.netlify.com/ -[netlifysignup]: https://app.netlify.com/signup -[Quick Start]: /getting-started/quick-start/ -[Redirects and Rewrite Rules]: https://www.netlify.com/docs/redirects/ -[Using a Custom Domain]: https://www.netlify.com/docs/custom-domains/ -[visit]: https://hugo-netlify-example.netlify.com diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/index.md b/content/en/hosting-and-deployment/hosting-on-netlify/index.md new file mode 100644 index 00000000000..ccce0166fa1 --- /dev/null +++ b/content/en/hosting-and-deployment/hosting-on-netlify/index.md @@ -0,0 +1,127 @@ +--- +title: Host on Netlify +description: Host your site on Netlify with continuous deployment. +categories: [hosting and deployment] +keywords: [hosting] +menu: + docs: + parent: hosting-and-deployment +toc: true +--- + +## Prerequisites + +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 + +[Bitbucket]: https://bitbucket.org/product +[Create a Hugo site]: /getting-started/quick-start/ +[Create a Netlify account]: https://app.netlify.com/signup +[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 +: Log in to your Netlify account, navigate to the Sites page, press the **Add new site** button, and choose "Import an existing project" from the dropdown menu. + +Step 2 +: Select your deployment method. + +![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) + +Step 4 +: Press the **Configure Netlify on GitHub** button. + +![screen capture](netlify-step-04.png) + +Step 5 +: Install the Netlify app by selecting your GitHub account. + +![screen capture](netlify-step-05.png) + +Step 6 +: Press the **Install** button. + +![screen capture](netlify-step-06.png) + +Step 7 +: Click on the site's repository from the list. + +![screen capture](netlify-step-07.png) + +Step 8 +: Set the site name and branch from which to deploy. + +![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) + +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) + +Step 11 +: Press the "Deploy my new site" button at the bottom of the page. + +![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) + +Step 13 +: Press the **Open production deploy** button to view the live site. + +![screen capture](netlify-step-13.png) + +## Configuration file + +In the procedure above we configured our site using the Netlify user interface. Most site owners find it easier to use a configuration file checked into source control. + +Create a new file named netlify.toml in the root of your project directory. In its simplest form, the configuration file might look like this: + +{{< code file=netlify.toml >}} +HUGO_VERSION = "0.122.0" +TZ = "America/Los_Angeles" + +[build] +publish = "public" +command = "hugo --gc --minify" +{{< /code >}} + +If your site requires Dart Sass to transpile Sass to CSS, the configuration file should look something like this: + +{{< code file=netlify.toml >}} +HUGO_VERSION = "0.122.0" +DART_SASS_VERSION = "1.70.0" +TZ = "America/Los_Angeles" + +[build] +publish = "public" +command = """\ + curl -LJO https://github.com/sass/dart-sass/releases/download/${DART_SASS_VERSION}/dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + tar -xf dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + rm dart-sass-${DART_SASS_VERSION}-linux-x64.tar.gz && \ + export PATH=/opt/build/repo/dart-sass:$PATH && \ + hugo --gc --minify \ + """ +{{< /code >}} diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-02.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-02.png new file mode 100644 index 00000000000..31fceff27aa Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-02.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-03.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-03.png new file mode 100644 index 00000000000..7b98e0b8f16 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-03.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-04.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-04.png new file mode 100644 index 00000000000..31304894b45 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-04.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-05.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-05.png new file mode 100644 index 00000000000..6d6eef01dca Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-05.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-06.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-06.png new file mode 100644 index 00000000000..1b766a78521 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-06.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-07.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-07.png new file mode 100644 index 00000000000..7bb3b6ecad9 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-07.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-08.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-08.png new file mode 100644 index 00000000000..df8e9e59f04 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-08.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-09.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-09.png new file mode 100644 index 00000000000..3f925accc75 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-09.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-10.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-10.png new file mode 100644 index 00000000000..e9196d0ce32 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-10.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-11.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-11.png new file mode 100644 index 00000000000..2ac2b08af72 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-11.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-12.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-12.png new file mode 100644 index 00000000000..e251305a4ae Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-12.png differ diff --git a/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-13.png b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-13.png new file mode 100644 index 00000000000..f955f636962 Binary files /dev/null and b/content/en/hosting-and-deployment/hosting-on-netlify/netlify-step-13.png differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-add-new-site.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-add-new-site.jpg deleted file mode 100644 index 17698d34a4e..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-add-new-site.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-authorize-added-permissions.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-authorize-added-permissions.jpg deleted file mode 100644 index eaae924e4c4..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-authorize-added-permissions.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-1.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-1.jpg deleted file mode 100644 index 347477dd2e6..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-1.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-2.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-2.jpg deleted file mode 100644 index 18bfd6fed85..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-2.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-3.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-3.jpg deleted file mode 100644 index 6f9b6477c45..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-create-new-site-step-3.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploy-published.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploy-published.jpg deleted file mode 100644 index ed5eaf3c8ce..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploy-published.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploying-site.gif b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploying-site.gif deleted file mode 100644 index c1f27c236f6..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-deploying-site.gif and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-first-authorize.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-first-authorize.jpg deleted file mode 100644 index 748122e8973..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-first-authorize.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-live-site.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-live-site.jpg deleted file mode 100644 index 3edc49c43e0..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-live-site.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-push-to-deploy.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-push-to-deploy.jpg deleted file mode 100644 index f23626218ad..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-push-to-deploy.jpg and /dev/null differ diff --git a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-signup.jpg b/static/images/hosting-and-deployment/hosting-on-netlify/netlify-signup.jpg deleted file mode 100644 index cd9a218b413..00000000000 Binary files a/static/images/hosting-and-deployment/hosting-on-netlify/netlify-signup.jpg and /dev/null differ