How to upgrade jQuery on an old static HTML site (for embarrassingly new noobs)

Hello there.

Are you a beginner dev looking to upgrade jQuery on your static HTML site? GitHub Dependabot spamming you a lot lately?

You've come to the right DEV.to post!

About Me / Background / TL;DR

I'm a digital marketer and technical copywriter who's also built plenty of websites.

I'm a WordPress guy mostly, but I've been dabbling in Static Sites since before it was cool and before there was such a thing as SSGs (static site generators).

Because I didn't want to maintain a WP install and tech stack for a simple personal site, I used one of those pretty cool HTML5up templates and built a quick lil' site.

Here's my personal site - thisisjoewells.com

My jQuery was way way out of date

Ever since GitHub's nifty Dependabot tool started scanning my (possibly neglected) repos, I started getting emails from it.

What was I to do? I'm the opposite of a skilled JS dev by any measure. How do I upgrade jQuery on my super-simple one-pager site? How hard could it be?

I kept putting it off. For like...5 months. 😅

I think I figured it out

I had trouble finding a quick tutorial on how to do it. So, here's my DEV post! I hope it helps you, dear reader.

And for all the serious and skilled developers out there glancing at my article, thanks for not making fun of me and feel free to leave a better method in the comments!

First

I Googled and found this page. But it was full of lots of words. Like a lot of them.

Second

I got stressed, then a little depressed at my lack of nunchuck and JavaScript skills. Cuz, I'm a busy guy, blessed with a wife and kids, a day job, a side hustle, friends to see, things to do, miles to jog, pizza to eat...

Third

I had this idea. This question for myself. Can't I just copy and paste the minified code into my jquery.min.js file in the repo?

The answer? YES. I think.

Last: I did the things with the things

1: I made a new branch on my GitHub repo
2: I copied the minified jQuery files from here
3: I removed the old code in jquery.min.js, and pasted in the new code
4: I synced the branch to my local (MacBook) the site seemed to work fine
5: I nervously merged the new branch into Master

There is no step 6 because I host my site at Kinsta and I have it set up to redeploy my site any time I commit a change to the Master branch.

So my new site went live like 17 seconds after I hit commit. We live in the future!

Conclusion

I think this is a workable way to upgrade your jQuery. I will confirm with a reputable dev and update this article, hopefully in the next few days.

Then you can trust that this article is good advice. Until then, be sure to keep an old copy of your site handy or GitHub branch standing by, just in case.

Cheers.