Photo by Karolina Grabowska from Pexels
In this tutorial, we are going to look at how you can integrate jquery based template in to a gatsby website.
A lot, of people, are struggling to get jquery work in a gatsby because it uses
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.
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.
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.
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
- if you can't find
gatsby-browser.jsin the root directory of your gatsby project then create one.
- create a
stylesfolder on the root of your gatsby project
src/stylesand paste all the CSS files in it.
- add all your CSS files path in
// gatsby-browser.js import "./src/styles/main.css" import "./src/styles/noscript.css"
- resolve import errors (either font/images/css file)
if you can't find a
staticfolder 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
react-helmetand add all your scripts inside it in the
- add the images in the