Deploying Site on Netlify

Tags:

• Docs
• Deploy
• Hugo

Categories:

• Docsy

Installing Hugo

Needed to test your new site, pretty simple if you have homebrew installed.

macOS

Install Hugo using Brew.

brew install hugo

Install extended as an npm module

This adds hugo-bin to your node_modules folder and adds the dependency to your package.json file. To install the extended version of Hugo:

npm install hugo-extended --save-dev

Install PostCSS:

npm install -D autoprefixer
npm install -D postcss-cli

Starting in version 8 of postcss-cli, you must also separately install postcss:

npm install -D postcss

Note that versions of PostCSS later than 5.0.1 will not load autoprefixer if installed globally, you must use a local install.

Install nodeJS

npm install node

Create example website

To copy the example site:

Make a local working copy of the example site directly using git clone:

git clone https://github.com/google/docsy-example.git

Switch to the root of the cloned project, for example:

cd docsy-example

Get local copies of the project submodules so you can build and run your site locally:

 git submodule update --init --recursive

Build your site:

 hugo server

Preview your site in your browser at: http://localhost:1313/. You can use Ctrl + c to stop the Hugo server whenever you like. See the known issues on MacOS.

Now that you have a site running, you can push it to a new repository:

Push to Github

Configure origin in your project. From your site’s root directory, set the URL for origin to your new repo (otherwise you’ll be trying to push changes to google/docsy rather than to your repo):

  git remote set-url origin https://github.com/MY-SITE/EXAMPLE.git

You can commit and push changes to your repo.

git add * 
git commit -m "adding new site"
git push

You can now register with Netlify and deploy using your Github repo.

When trying to deploy this site on Netlify I was running into this error:

Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "stdin", line 6, col 1: File to import not found or unreadable: ../vendor/bootstrap/scss/bootstrap.

This error is very similar to the one you get when you have the wrong version of Hugo installed since Docsy theme requires extended version, but Netlify by default installs the extended versions.

Fortunately I was able to fix this by adding git submodule update --init --recursive --depth 1 to my netlify.toml file to look like this:

[build]
publish = "public"
command = "npm install --save-dev autoprefixer && npm install --save-dev postcss-cli && go install --tags extended"

[build.environment]
GO_VERSION = "1.17.7"
HUGO_VERSION = "0.96.0"

[context.production]
command = "git submodule update --init --recursive --depth 1 ; sleep 3 ; hugo"

I found the above solution in this post.