Home
Projects
Blogs
About
Hire Me

Using HTML, CSS, JQuery template in gatsby

Photo by Karolina Grabowska from Pexels

In this tutorial, we are going to look at how you can use jquery in a gatsby website.

A lot, of people, are struggling to get jquery work in a gatsby because it uses windows and document and as you know that gatsby struggles to use these objects.

So to make things easier I'm going to use a good responsive template from HTML5 UP because most of the templates here use jquery as a default library.

Step 1(Find a template)

There are a lot of templates you can scroll and look at the demo to get a feel how they'd look like. Also, depends on your needs and requirement of what your website should look like. Of course, there are other platforms you can use to download a template you like.

Step 2(Download and Extract)

After you have found the template download it in your local machine. It will be a zip file of HTML, CSS, scripts and assets. Extract all the files in a folder and open the project to make sure everything is working correctly.

Step 3(Initialize a gatsby project)

Kick-off your project with this default boilerplate. The starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing-fast app generator for React.

Use the Gatsby CLI to create a new site, specifying the default starter.

# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default

Navigate into your new site’s directory and start it up.

cd my-default-starter
gatsby develop

Step 4(Integrate)

Integrate Styling

  • if you can't find gatsby-browser.js in the root directory of your gatsby project then create one.
  • create a styles folder on the root of your gatsby project src/styles and paste all the CSS files in it.
  • add all your CSS files path in gatsby-browser.js file. 
// gatsby-browser.js

import "./src/styles/main.css"
import "./src/styles/noscript.css"
  • resolve import errors (either font/images/css file)

Integrate Scripts

  • if you can't find a static folder at the root of your repo then create one. Please read detailed documentation about why and when to use static folder from the official gatsby site.

    You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

  • install react-helmet and add all your scripts inside it in the Layout component.

// layout.js
import { withPrefix } from "gatsby"
const Layout = ({ children }) => (
  <>
    <Header />
    <SEO title="Demo" />
    <Footer />
    <Helmet>
        <script src={withPrefix('../../scripts/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrollex.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrolly.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/browser.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/breakpoints.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/util.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/main.js')} type="text/javascript" />
    </Helmet>
  </>
)

Add Images

  • add the images in the src/images folder

Voilà

That's it, that's all it takes.
Done