New to JAMStack tutorial missing a crucial step

Support
, ,
#1

New user here, and I found out the hard way there’s a misleading statement in the tutorial New to JAMstack? How to make a site from A to Z.

It says

Another conflicting file is src/css/main.css — delete this file too.

Unfortunately, that leads to an error, because main.css is imported in index.js:

ERROR in ./src/index.js
Module not found: Error: Can’t resolve ‘./css/main.css’ in ‘/Users/gkosan/Desktop/netlify_a-to-z/victor-hugo/src’
@ ./src/index.js 2:0-24

I was able to fix this error by commenting out the include line from src/index.js.
Or probably I could have deleted the contents of src/css/main.css without deleting the actual file.

I wanted to share this since I spent a frustrating amount of time debugging the issue, which I only discovered during the initial deployment. I know its a simple error, but I hope this helps other newbies like myself.

#2

hi gkosan! sorry you had a frustrating time with this, although, i have to say that I am quite pleased that the instructions for a tutorial from 2016 (largely) still work!

The tutorial did say that that step was optional if you were working with your own theme, was that the case? it is also possible that the way that file is processed has changed since then :thinking:

can you tell me a little more about you worked through the tutorial here?

#3

Hi Perry,

Thank you for looking into this.
I had installed the strata theme as described in the instructions.
I took the instructions to mean I should delete the default src/css/main.css file, which is what lead to the error.

One difference I can think of is that I installed Hugo Static Site Generator v0.68.3/extended darwin/amd64 using homebrew not git and npm (originally couldn’t figure out how to add Hugo to my path using the npm install).

:thinking: Let me brew uninstall hugo, reinstall it using npm, and run through the tutorial one more time from scratch in a new folder…

Ok same build error, which I eliminated by creating an empty file called src/css/main.css

Another minor discrepancy in the tutorial: To create a new page from the site folder as instructed, I also had to run hugo with a relative path, since it wasn’t in my system path:

../node_modules/.bin/hugo new PAGE_NAME.md

Final minor discrepancy: the strata config.toml lives in site/themes/hugo-strata-theme/exampleSite/config.toml not in site/themes/hugo-strata-theme/config.toml as specified in the tutorial.

I’m not trying to nitpick here, just a fan of explicit instructions. The main reason for my post here was to call out a case where a beginner tutorial could lead to failed Netlify deployment (as it did in my case).

#5

Hey @gkosan,

It looks like the article you’re referring to is a little outdated. The general practice for downloading hugo is via homebrew if you’re on linux or mac, which sounds like you already did. With regards to why hugo is not available as a global command via npm, this is because hugo is installed locally in the project directory and is not available globally, that is if you ran npm install. For hugo to be available as a global command on the terminal you’d have to append the global flag so npm install -g

I appreciate you bringing a lot of these discrepancies to our attention. We care a lot about making sure that Netlify users get to successfully deploy projects, especially if we’re leading them through a step by step process. However, because this is a rather old blogpost, we don’t intend on making updates to this particular post.

With regards to setting up Hugo with Netlify, we’d encourage that you check out the templates available on https://templates.netlify.com/ and hit the deploy to netlify button. We’re constantly keeping those templates up to date, so there’s less risk of things breaking or going out of date there.

Cheers!
Divya

2 Likes