mirror of
https://github.com/gohugoio/hugo.git
synced 2024-11-14 20:37:55 -05:00
13e64d7276
6b00298bb Remove outdated "related example" 987f1e1cd Fix dead links (#601) 96287a20a Add config option "summaryLength" (#600) ced7f2085 Adjust Over showcase e334a6354 Add new showcase: over 10435b502 Add warning about privacy options only work with internal templates (#525) 48c6b0e4d Minor grammatical fix 684670ebc Add quote 0e9fada52 Improvements to taxonomy template examples e06c4bf73 Add syntax highlighting; consistent 4-space indentation c1cb3f081 Remove dead links for custom permalinks 3e3aefd04 Fix 0a671bc3751479e74a0a9d2132736c61d239707c d65888685 fix file name in 'Add Non-content Entries to a Menu' code toggle (#547) 1a0563857 Add Solus install guide (#590) 8a0d65b0d Update Windows Installation instructions (#564) c4348636a Fix typo 0a671bc37 Add post to menu example af14497c6 Add notes for `os.Stat` (Hugo 0.47) (#557) e49f65bb3 Singular to plural cb5608dbf Update introduction.md 30b060dff Add variable re-definition example (Hugo v0.48+) 21123967e Minor edits fac3df043 Refresh the Go Templates introduction 4a9600e92 Updating URL to how-to-guide for hosting hugo site on firebase bfaa7779c add missing word c2cb5d09b Tweak 'name: weight' to 'name: date' in example (#582) 5ea938ad6 Remove some Scratch 2708dcd57 Release 0.48 e375d0f05 Merge branch 'temp48' 75e36c160 releaser: Prepare repository for 0.49-DEV a6102f253 releaser: Add release notes to /docs for release of 0.48 41fc35db4 releaser: Bump versions for release of 0.48 64b9ecc74 Spell out the npm command for installing PostCSS 19e900a17 Improved Related Content doc fe21600e7 Merge commit '844aef544c19e9d8f529b4f8144e089d0982bb34' 844aef544 Squashed 'themes/gohugoioTheme/' changes from 66249819..68ddff44 069828db8 Update git.md d881d1433 Make default "related" behavior more explicit 60b9160eb Add docs for displaying 404 page on CloudFront b72ebc760 Add .gitattributes to /resources 000cf85f4 Make the pros/cons styling consistent for summaries; use desc list ebf1da97a Add note about outputStyle compressed e3338ee91 Triple backquote syntax fix 361962a7c Add one more Blogger to Hugo tool for Windows (.NET Framework 4.5) (#540) 066606a21 Fix wrong link about Mmark Syntax Document faee70757 Added exitwp-for-hugo 6b4108051 Add hugo-wrapper to starter-kits 4695dfba2 Added Utterances as Comments Alternatives. c7ba9e3e1 Correct typo beb850d9f Release 0.47.1 1cf417c8a Merge branch 'temp471' 0843bc46c releaser: Prepare repository for 0.48-DEV 8ff5c8b70 releaser: Add release notes to /docs for release of 0.47.1 e2353434d releaser: Bump versions for release of 0.47.1 ffb1300af Update development.md c22234ea5 netlify: Minify output 5b9191c56 Release 0.47 bfd92cf52 releaser: Prepare repository for 0.48-DEV ac7acf730 releaser: Add release notes to /docs for release of 0.47 b0096099d releaser: Bump versions for release of 0.47 86a7ae459 docs: Regenerate CLI docs d2c8b72bc Merge commit 'a95896878f4b4a79448b39ce93a4e0d3258b4a43' 84de7ef59 Merge commit '3a44bf182fed5f34621f450114083a6dd7e88a07' git-subtree-dir: docs git-subtree-split: 6b00298bb26b700281df28817b6556e7480cdd1e
153 lines
7.4 KiB
Markdown
153 lines
7.4 KiB
Markdown
---
|
||
title: Host on Netlify
|
||
linktitle: Host on Netlify
|
||
description: Netlify can host your Hugo site with CDN, continuous deployment, 1-click HTTPS, an admin GUI, and its own CLI.
|
||
date: 2017-02-01
|
||
publishdate: 2017-02-01
|
||
lastmod: 2017-03-11
|
||
categories: [hosting and deployment]
|
||
keywords: [netlify,hosting,deployment]
|
||
authors: [Ryan Watters, Seth MacLeod]
|
||
menu:
|
||
docs:
|
||
parent: "hosting-and-deployment"
|
||
weight: 10
|
||
weight: 10
|
||
sections_weight: 10
|
||
draft: false
|
||
aliases: []
|
||
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 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.](/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 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][config], 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:
|
||
|
||
```
|
||
[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.](/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][installthemes] 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`:
|
||
|
||
```
|
||
cd themes
|
||
git submodule add https://github.com/<THEMECREATOR>/<THEMENAME>
|
||
```
|
||
|
||
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:
|
||
|
||
```
|
||
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][httpscustom]
|
||
3. [Redirects and Rewrite Rules][]
|
||
|
||
|
||
[app.netlify.com]: https://app.netlify.com
|
||
[build command]: /getting-started/usage/#the-hugo-command
|
||
[config]: /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
|
||
[installthemes]: /themes/installing/
|
||
[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
|