hugo/content/hosting-and-deployment/hosting-on-netlify.md
Bjørn Erik Pedersen 337d0c5f51 Squashed 'docs/' changes from 56c34962c..dce236ad1
dce236ad1 Wrap up the bundle etc. edits for now
27d058566 Add the bundle tree to the organization bundle
a83f750dd Move organization.md to its own bundle
01ec4f462 Make the image docs a bundle
60de1e090 Some more resources copy-edits
05d763c0c Some resource copy-edits
6299d6dbb Update the imgproc shortcode
59e0fc209 Add headless bundle documentation
a3bbf60bf Link Page Resources page from Front Matter page
830576f86 Update order significance section, add counter section
3b1836509 Revert the recent change made to default list template
886ed0e10 Page Bundles draft rev 2
f530d1a7a image processing and page resources made into regular .md
ec47cecda Finalised Page Resources and Image Processing Moved Page Resources and Impage Processing out of the Bundle section and at the root of the Content Management section
253092335 Modified front matter metadata exemple. Added yaml version.
da5e4f476 Adding date in the front-matter; missed in previous commit
6bc3ced13 Add rough draft for page and section bundles
a0e44458f Image processing first draft, Resources second read/fix
2367f0b78 data: Remove duplicate layouts in table
c2f179839 First draft of bundles/resources (covers resources and metadata)
2a3f9a613 Add weights to pages in Bundles branch
9a0146cc0 Switch front-matter format of Bundles doc to yaml; add front-matter
1295fc083 First draft for Bundles documentation organization structure
5a2e52231 Fix archetype paths
9c2e5c063 Merge commit '22cced34fc608256f8271ad591a5ccca991bb164'
22cced34f Squashed 'themes/gohugoioTheme/' changes from 75da2f6b..ecad8247
55d16c9a1 Fix broken sentence in multilingual sections
a76895ad2 Replace the outdated Emacs package with new one
e6cf1dec0 Remove obsolete link to hugo roadmap
dd2fd145b Add GitLab Pages to mentioned hosters (#309)
a05ce6bf6 Add 0.34 release notes poster
5c0ebdfca Release 0.34
13c2f3dc8 Merge branch 'temp34'
e6b5ffa04 Add 0.34 poster
1e1960496 releaser: Add release notes to /docs for release of 0.34
ac3efe182 releaser: Bump versions for release of 0.34
8f91f62d8 Fixes #222
cca35dbe4 Fix example
eaaa21ca1 Add missing params key
00d0b0363 Adding new Blogger utility to tools/migrations
7d36d579e Updated the line number for Dockerfile pointer
852188f85 Update installing.md with Fedora instructions
4d151a3ab Update search.md
4c2750bfb Update deployment-with-nanobox.md
c3cc9cd49 configuration: Remove defaultExtension from docs
f7c96b4b5 Update GitHub Pages documentation
55787f09a Merge branch 'rmetzler-menu-link-title'
2abbd9bd9 Merge branch 'master' into menu-link-title
e1fd710b7 Bring archetypes in from theme.
daf6f51c0 Mention the significance of leading 0 in int fn string input
07f498755 Add documentation for `cond` function.
050ccd12b Add documentation for the .HasShortcode function
919af9071 Correct anchor under 'Add custom metadata to a Taxonomy Term'
55600b4ff More layouts work
201cf4f67 Add some more single page layout variants
d5e7c03e2 Rework the layouts doc
84622e67c Cleans up the code sample
c231c9bd5 Add a new note to 0.33 relnotes
328ec9930 Release 0.33
b108fcc7b Merge branch 'temp33' into next
ab9d9ee65 releaser: Prepare repository for 0.34-DEV
e20c75320 releaser: Add release notes to /docs for release of 0.33
49f24dcd1 releaser: Bump versions for release of 0.33
9c8e5e207 Update 0.33 poster
7655603c8 Regenerate the docshelper data
16dc99583 Add Hugo 0.33 poster
ce40cc197 Merge commit '3cf4300097610bb8b5bd0686d96d1df5db641895'
9a3085523 releaser: Prepare repository for 0.33-DEV
a52db97d8 fixing typos and syntax for consistency
64525670f ádd title to some menu entries. This needs hugo >= v0.32
85d415ab2 ádd examples for menu .Title and .Page

git-subtree-dir: docs
git-subtree-split: dce236ad1258a9d9a0ee209f02b2e1f65b46f0fb
2018-01-31 11:07:47 +01:00

7.7 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 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 a typical modal you've seen through other application that use GitHub 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.

Build with a Specific Hugo Version

Setting the build command to hugo will build your site according to the current default Hugo version used by Netlify. You can see the full list of available Hugo versions in Netlify's Docker file.

If you want to tell Netlify to build with a specific version (hugo <= 0.20), you can append an underscore followed by the version number to the build command:

hugo_0.19

Your simple configuration should now look similar to the following:

Screenshot of 3-step, basic continuous deployment setup with a new Hugo site on Netlify

For version hugo > 0.20 you have to specify version hugo for testing and production 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.26"

For testing:

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

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.

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>

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