Inject Custom JavaScript Into a Gatsby Site

Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

Learn how to add custom JavaScript to your Gatsby's main HTML.

Instructor: [00:00] We need to make a copy of the html JavaScript file from Gatsby's cache and move it into our source directory. Open up html.js. You'll see that this is what Gatsby auto-generates for us.

[00:11] For this example, I just want to add a basic console log just so we can see our custom JavaScript being injected. When I refresh my site, I expect to see the new console log statement, but it's not showing up. The reason is because we're not working with an actual html file here. We're still working with a JavaScript file.

[00:29] We need to inject the JavaScript in a way that React allows us to. We can do that by using React's dangerouslySetinnerHTML attribute on the script tag.

[00:39] Now, when we refresh our site, we see our custom JavaScript.

egghead
egghead
~ 31 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today