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 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 projectsrc/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 theLayout
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
Top comments (1)
I think this is the another way I am using the gatsby from scratch