Add updated Netlify tutorial
Ryan Watters
@ -63,7 +63,7 @@ watch = true
|
||||
# Add GA Tracking Code Here. This leverages a built-in (ie, "internal") partial from HUGO: https://gohugo.io/extras/analytics#configuring-google-analytics
|
||||
googleanalyticstrackingcode = ""
|
||||
## Critical Render Path. If true, site style will be embedded in a <style> tag in each html <head> as part of Gulp Build. False puts a typical <link> to the stylesheet in <head>>
|
||||
usecrp = true
|
||||
usecrp = false
|
||||
## Twitter handle without the "@"
|
||||
twitterhandle = "GoHugoIO"
|
||||
## Facebook URL
|
||||
|
||||
@ -12,53 +12,110 @@ weight: 10
|
||||
draft: false
|
||||
aliases: []
|
||||
toc: true
|
||||
wip: 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
|
||||
|
||||
- Have an account with Github, GitLab, or Bitbucket
|
||||
- Have completed the Quick Start or have a completed website ready for deployment
|
||||
|
||||
## Goals
|
||||
|
||||
We will connect a git repo to Netlify's continuous deployment service. Pushing a commit to your repo will automatically trigger Netlify's service and deploy your site.
|
||||
* 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
|
||||
|
||||
Got to [netlify.com][netlify] and click on the signup button. Alternatively, you may go directly to their [signup page][netlifysignup].
|
||||
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.
|
||||
|
||||
![][1]
|
||||
The following examples use GitHub, but other git providers will follow a similar process.
|
||||
|
||||
Choose how you would like to register your account. You will be able to connect to any service later regardless of what you choose now.
|
||||
|
||||
|
||||
## Continuous Deployment
|
||||
Selecting GitHub will bring up a typical modal you've seen through other application that use GitHub for authentication. Select "Authorize application."
|
||||
|
||||
Click on the service that is hosting your repo.
|
||||
|
||||
|
||||
![][2]
|
||||
## Create a New Site with Continuous Deployment
|
||||
|
||||
You will see a list of your repos. Click on the repo you wish to connect to Netlify.
|
||||
You're now already a Netlify member and should be brought to your new dashboard. Select "New site from git."
|
||||
|
||||
![][3]
|
||||
|
||||
|
||||
There are three settings on the Basic Settings tab. If you have multiple branches, you may choose which branch to deploy. Set the publish directory to `public` and the build command to `hugo`. After filling in the fields, click the button that says "Build your site."
|
||||
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.
|
||||
|
||||
![][4]
|
||||
|
||||
|
||||
Your site is now configured for continuous deployment, and you may view your site once the build is complete.
|
||||
And then again with the GitHub authorization modal:
|
||||
|
||||
![][5]
|
||||
|
||||
|
||||
## Other Settings
|
||||
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:
|
||||
|
||||
Check out Netlify's settings page and read their documentation for further configuration. You can use custom domain names as well as free HTTPS.
|
||||
|
||||
|
||||
[1]: /images/hosting-and-deployment/hosting-on-netlify/netlify-signup.png
|
||||
[2]: /images/hosting-and-deployment/hosting-on-netlify/netlify-start.png
|
||||
[3]: /images/hosting-and-deployment/hosting-on-netlify/netlify-start-repos.png
|
||||
[4]: /images/hosting-and-deployment/hosting-on-netlify/netlify-configure-repo.png
|
||||
[5]: /images/hosting-and-deployment/hosting-on-netlify/netlify-build-done.png
|
||||
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.
|
||||
|
||||
### Building 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][hugoversions].
|
||||
|
||||
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:
|
||||
|
||||
```bash
|
||||
hugo_0.19
|
||||
```
|
||||
|
||||
Your simple configuration should now look similar to the following:
|
||||
|
||||
|
||||
|
||||
Selecting "Deploy site" will immediately take you to a terminal for your build:.
|
||||
|
||||
|
||||
|
||||
Once the build is finished---this should only take a few seconds--you should now see a card at the top of your screen letting you know the deployment is successful. The URL is automatically generated by Netlify but can be updated in the project's "Settings."
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[Visit the live site][visit].
|
||||
|
||||
Now every time you push changes to your hosted git repository, Netlify will rebuild and redeploy your site.
|
||||
|
||||
## Using Hugo Themes with Netlify
|
||||
|
||||
The [`git clone` method for installing themes][installthemes] is not supported by Netlify and would require you to recursively remove the `.git` subdirectory from the theme folder, which would prevent automated 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`:
|
||||
|
||||
{{% code file="" %}}
|
||||
```bash
|
||||
cd themes
|
||||
git submodule add https://github.com/themecreator/themename
|
||||
```
|
||||
{{% /code %}}
|
||||
|
||||
## 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#L166
|
||||
[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
|
||||
@ -75,7 +75,7 @@ The following is a list of site-level (aka "global") variables. Many of these va
|
||||
: all of the menus in the site.
|
||||
|
||||
`.Site.Pages`
|
||||
: array of all content ordered by Date with the newest first. `.Site.Pages` replaced `.Site.Recent`, which is no longer supported. This array contains only the pages in the current language.
|
||||
: array of all content ordered by Date with the newest first. This array contains only the pages in the current language.
|
||||
|
||||
`.Site.Permalinks`
|
||||
: a string to override the default [permalink](/content-management/urls/) format as defined in the site configuration.
|
||||
|
||||
@ -33,8 +33,8 @@ gulp.task('scss', function() {
|
||||
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
|
||||
.pipe(prefix('last 2 versions', '> 1%', 'ie 10', 'Android 2', 'Firefox ESR'))
|
||||
.pipe(plumber())
|
||||
.pipe(rename('style-embed.html'))
|
||||
.pipe(gulp.dest('../layouts/partials'))
|
||||
// .pipe(rename('style-embed.html'))
|
||||
// .pipe(gulp.dest('../layouts/partials'))
|
||||
.pipe(rename('style.min.css'))
|
||||
.pipe(gulp.dest('../static/css'));
|
||||
});
|
||||
@ -48,7 +48,7 @@ gulp.task("image-resize", () => {
|
||||
// ))
|
||||
// .pipe(gulp.dest("../static/images"))
|
||||
.pipe(parallel(
|
||||
imageresize({ width: imagehalf, format: 'jpg' }),
|
||||
imageresize({ width: imagefull, format: 'jpg' }),
|
||||
os.cpus().length
|
||||
))
|
||||
// .pipe(gulp.dest("../static/images/half"))
|
||||
@ -56,7 +56,7 @@ gulp.task("image-resize", () => {
|
||||
// imageresize({ width: imagethumb }),
|
||||
// os.cpus().length
|
||||
// ))
|
||||
.pipe(gulp.dest("../static/images/showcase-optimized/"));
|
||||
.pipe(gulp.dest("../static/images/hosting-and-deployment/hosting-on-netlify"));
|
||||
});
|
||||
|
||||
/**Javascript **/
|
||||
|
||||
BIN
source-images/netlify-add-new-site.png
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
source-images/netlify-authorize-added-permissions.png
Normal file
|
After Width: | Height: | Size: 120 KiB |
BIN
source-images/netlify-create-new-site-step-1.png
Normal file
|
After Width: | Height: | Size: 98 KiB |
BIN
source-images/netlify-create-new-site-step-2.png
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
source-images/netlify-create-new-site-step-3.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
source-images/netlify-deploy-published.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
source-images/netlify-deploy-site.gif
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
BIN
source-images/netlify-first-authorize.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
source-images/netlify-live-site.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
source-images/netlify-push-to-deploy.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
source-images/netlify-signup.png
Normal file
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 137 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 765 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 89 KiB |
|
Before Width: | Height: | Size: 78 KiB |