Dusting off gatsby

git gatsby

I upgraded my development VM and had to start from scratch. Considering that my previous VM was a horrible mish-mash of conflicting development environments, this may not be all bad. However, I don't know what I'm doing, so I'll likely end up with another horrible, but hopefully less-bad, evironment when it's all said and done.

Step one:

Clone the git repo. Oh wait, I don't have any ssh keys. That's easy enough to fix -- there are super-easy instructions on gitlab on how to create and import a key.

Step two:

Clone the git repo (for real this time).

git clone <copied string from gitlab>

Now we're on a roll.

Step three:

I don't know what to do now. Looking at netlify, it says my build command is "yarn run build". But looking at the deploy log, it says that netflify.toml is overriding that. Long story short, netlify.toml wins. The [build.environment] in there only contains NODE_VERSION and it is waaaaaay out of date. The netlify deploy logs also tell me that I need to use a newer version. I've tried this all once before and failed miserably. Not this time. This time I will get it. Anyway, the build command is "gatsby build". Easy enough.

$ gatsby
bash: gatsby: command not found

Ok, maybe not THAT easy.

Let's dig into the gatsby documentation. I know that I need node and I need a version newer than 8.whatever-the-old-version-was. Here we go, tutorial part 0: https://www.gatsbyjs.com/tutorial/part-zero/

Step four:

Update my VM OS. It's been a while. Update, restart and get the windows all set up correctly. So far, so good.

Step five:

Install curl. Use curl to install nvm. Verify nvm version.

Step six:

Set the node.js version. I set it to 10 because that's what the gatsby tutorial uses. At this point, the tutorial says that I need gatsby-cli. I'm not so certain about that -- netlify doesn't seem to have it anyway. Time to dig in a bit... Let's try an experiment.

Step seven:

Update netlify.toml to match our newly installed node.js. Fire up vim, a bit of typing. git add/git commit...and...oh no, I haven't set up git yet.

git config --global user.email "mysupercoolemail@example.com"
git config --global user.name "Chris Weber"

Step eight:

Commit and push. Let's look at the netlify deploy log. Success! (ish) Node is updated, but it failed to build.

Step nine:

npm install

This seemed to install a bunch of node packages. It did finish successfully and noted a LOT of warnings in the post-install audit. I still do not have a gatsby command, either.

Step ten:

I still don't know what I'm doing. The netlify build process has a gatsby build command that works, I do not. I'm off to read some netlify build documentation to see if any of these other files would affect that. Then I stumble across this gem:

If a build fails, it's worth retrying with a cleared build cache to see if this works better. You can do this by selecting the Retry deploy button in the header of a failed deploy log page, and then selecting Clear cache and deploy site.

Oh yes, cached build environment, I've run into you before! Wipe the cache and rebuild and...SUCCESS! The site deployed, albeit with some warnings.

Step eleven:

Let's get to the bottom of this. There's something different between the netlify build envinroment and my dev environment. Let's look at the netlify build logs and more netlify documentation... What's this "buildbot" thing? More googling... There's a netlify build image... And somehow I stumble upon this: https://github.com/netlify/build-image

Eureka! There are the scripts. And now, let's hunt a bit. There we go:

export PATH=$(npm bin):$PATH

Step twelve:

$ export PATH=$(npm bin):$PATH
$ gatsby build

Success (for real this time).

Summary for Future Chris

git clone <copied string from gitlab>

https://www.gatsbyjs.com/tutorial/part-zero/

Install curl, install nvm, set default node.js version.

 npm install
 export PATH=$(npm bin):$PATH

Previous Post Next Post