hugo/content/en/hosting-and-deployment/hosting-on-netlify.md
Bjørn Erik Pedersen eb16165694 Squashed 'docs/' changes from 37095d540..d1cf9adc4
d1cf9adc4 Fix typo
26e10a690 Fix the name and arg mismatch between partial defn and call
2db0e53cd Merge commit '9c36cff15224f6cbd19058ad61311229b7a23c83'
9c36cff15 Squashed 'themes/gohugoioTheme/' changes from 68ddff44..b8202f53
4b021eff8 Update lang.Merge.md
b37af2916 Add title to yaml
a9a281233 Fixed incorrect usage of the code-toggle shortcode
4560a0169 Update Warning for Theme Links (#676)
0305e3c6b Document .File.ContentBaseName
6d30c5aa1 Update configuration.md
158df174a Document .Sites and .Sites.First
0c0f583b8 Add stale config
e2531afd8 Document path template functions
4dd779057 Clarify that partialCached is per site/language
19e5bbe0c Update index.md
44b000857 Add missing dot
a41300cf9 Release 0.52
2d1d92b88 Merge branch 'temp52'
c5925250d releaser: Prepare repository for 0.53-DEV
d000b04a2 releaser: Add release notes to /docs for release of 0.52
4bb983a0a releaser: Bump versions for release of 0.52
36736ca28 tpl: Add "param" shortcode
378677aa6 Add Elasticsearch/bonsai.io to services doc.
4c3fd4fa4 docs: Document inline shortcodes
6c64c374c Whitelist CSS modules from purge
817a872b9 Improve search icon position
cf86ff1c7 Add minification and resource cache clear to build command
fd77e8df3 Update asset dependencies and adopt Hugo Pipes
cdbe97e8c Update render.md
b0e279220 git command to update submodule to latest
a1cb98c12 cache/filecache: Add a :project placeholder
07c1b2b46 cache/filecache: Use time.Duration for maxAge
ffa9b165e Add AND as a title
6e7733b40 Add OR as a sub title to make it easier to find in search
72b6791a1 docs: Document the new file cache
714d3ca91 Fix minification issues
cd1e961da Revert "Add Elasticsearch/bonsai.io to services doc."
15a0cda6e Add Elasticsearch/bonsai.io to services doc.
f931d86de Release 0.51
e2ffe867a Merge branch 'temp51'
423e7f5c8 releaser: Prepare repository for 0.52-DEV
c6f2d6ae1 releaser: Add release notes to /docs for release of 0.51
5bbb556dc releaser: Bump versions for release of 0.51
3b2b172b9 docs: Document shortcode error handling
b8672f3d4 docs: Document symdiff
4bc6071e6 docs: Document complement
d1baab752 docs: Re-generate CLI docs
9ea667e24 Revert "tpl: Update Jsonify to return pretty-print output"
ce5a1403d docs: Regenerate the docs helper
99a1f4a94 Fix note for reserved partial name(starting with -> including).
eba3cbc42 fix accidentally modification on paragraph.
3eebd98c3 Add note for reserved partial name.
40b881cc2 Document templates.Exists
b5c3bcd3b Update multilingual.md
61c59c67e Fix misspelling (#648)
f21d8c4a4 Correct minor typo (#5372)
e967001b9 Release 0.50
685fd6b08 releaser: Prepare repository for 0.51-DEV
f245a9faa releaser: Add release notes to /docs for release of 0.50
4354da30d releaser: Bump versions for release of 0.50
feaa05469 docs: Regenerate CLI docs
5c724200c Merge commit 'd6a4af7018e8618944a6471ceeb7aae1d4df6afa'
2ddab36c2 Merge commit '74309fe5699a595080fdb3a14711e0869babce99'
8cf296a7c docs: Regenerate CLI docs
9097683dd tpl: Update Jsonify to return pretty-print output

git-subtree-dir: docs
git-subtree-split: d1cf9adc412245c96d9d32592a903370d3972aef
2018-12-12 09:05:31 +01:00

7.6 KiB
Raw Blame History

title linktitle description date publishdate lastmod categories keywords authors menu weight sections_weight draft aliases toc
Host on Netlify Host on Netlify Netlify can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own CLI. 2017-02-01 2017-02-01 2017-03-11
hosting and deployment
netlify
hosting
deployment
Ryan Watters
Seth MacLeod
docs
parent weight
hosting-and-deployment 10
10 10 false
true

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 signup 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.

Selecting GitHub will bring up an authorization modal for authentication. Select "Authorize application."

Screenshot of the authorization popup for Netlify and GitHub.

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'

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

And then again with the GitHub authorization modal:

Screenshot of step 1 of create a new site for Netlify: selecting the git provider

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

Once selected, you'll be brought to a screen for basic setup. Here you can select the branch you wanted published, 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 for your environments in netlify.toml file or set HUGO_VERSION as a build environment variable in the Netlify console.

For production:

[context.production.environment]
  HUGO_VERSION = "0.36"

For testing:

[context.deploy-preview.environment]
  HUGO_VERSION = "0.36"

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:

{{< code file="netlify.toml" nocode="true" >}} {{< readfile file="netlify.toml" highlight="toml" >}} {{< /code >}}

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.

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.

Screenshot of homepage to https://hugo-netlify-example.netlify.com, which is mostly dummy text

Visit the live site.

Now every time you push changes to your hosted git repository, Netlify will rebuild and redeploy your site.

See this blog post 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 or those found on Git's website for more information, but the command is similar to that of git clone:

cd themes
git submodule add https://github.com/<THEMECREATOR>/<THEMENAME>

It is recommended to only use stable versions of a theme (if its 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:

cd themes/<theme>
git tag
# exit with q

You can checkout a specific version as follows:

git checkout tags/<version-name>

You can update a theme to the latest version by executing the following command in the root directory of your project:

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
  3. Redirects and Rewrite Rules