Files
hugoDocs/content/hosting-and-deployment/hosting-on-netlify.md
T
Bjørn Erik Pedersen 2c0d1ccdcd Squashed 'docs/' changes from b0470688..73f355ce
73f355ce Update theme
83ff50c2 Use example.com in examples
71292134 Add alias news > release-notes
2e15f642 Update theme
8eef09d2 Add Pygments configuration
572b9e75 Clean up the code shortcode use
a1b2fd3b Remove the code fence language codes
1473b1d9 Remove redundant text
b92c2042 Update theme
8f439c28 Edit contributing section in README
8bcf8a19 Add contributing section to README
4c44ee1c Fix broken content file
2bdc7710 Clarify .Data.Pages sorting in lists.md
092271c2 Use infinitive mood for main titles
b9b8abef Update theme to reflect change to home page content
b897b71b Change copy to use sentence case
fd675ee5 Enable RSS feed for sections
060a5e27 Correct movie title in taxonomies.md
6a5ca96a Update displayed site name for Hub
22f4b7a4 Add example of starting up the local server
d9612cb3 Update theme
a8c3988a Update theme
4198189d Update theme
12d6b016 Update theme
2b1c4197 Update theme
b6d90a1e Fix News release titles
cfe751db Add some build info to README

git-subtree-dir: docs
git-subtree-split: 73f355ce0d
2017-07-21 11:00:08 +02:00

6.8 KiB

title, linktitle, description, date, publishdate, lastmod, categories, authors, menu, weight, sections_weight, draft, aliases, toc
title linktitle description date publishdate lastmod categories 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
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, 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

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>

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