Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)

Dicka Ismaji at 18 Feb 2022 2:01

4 min read
Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)

Chakra UI is a great UI library to get your Gatsby website up and running fast. The setup is slightly different than other projects, however, the API usage seen in the rest of the docs is the same!

  1. Build Blog Site using Gatsby JS — Part 1 (Getting Started)
  2. Build Blog Site using Gatsby JS — Part 2 (Chakra UI & Home Page)
  3. Build Blog Site using Gatsby JS — Part 3 (Gatsby Plugin Mdx)
  4. Build Blog Site using Gatsby JS — Part 4 (React Helmet and SEO tag)
  5. Build Blog Site using Gatsby JS — Part 5 (Deploy site to Netlify)

Chakra UI Setup

To integrate Gatsby with Chakra UI there are some steps that you can follow below

Installation

npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

It will take a while, so be patient

Usage

After installation, you’ll need to add @chakra-ui/gatsby-plugin to the gatsby-config.js file.

// gatsby-config.js module.exports = { plugins: [ { resolve: "@chakra-ui/gatsby-plugin", options: { /** * @property {boolean} [resetCSS=true] * if false, this plugin will not use `<CSSReset /> */ resetCSS: true, /** * @property {boolean} [isUsingColorMode=true] * if false, this plugin will not use <ColorModeProvider /> */ isUsingColorMode: true, }, }, ], };

After that check on your browser, it will keep nothing different

We will create all pages from scratch using Chakra UI, so remove all files inside components, images, pages , templates directory and code inside gatsby-node.js

Create Component and Pages

Preparation

We will make the page something like this

Gatsby Blog

Project structure

Project Structure

Components

We will separate some parts of the site into component

/src/components/Header.jsx

import { Box, Container, Flex, Heading, Text, Image } from "@chakra-ui/react"; import { Link } from "gatsby"; import React from "react"; export default function Header() { return ( <header> <Box bg="red.500" color="white"> <Container maxW="container.md" paddingY={12}> <Link to="/"> <Heading as="h1" size="2xl"> Code and Tech Blog </Heading> </Link> </Container> </Box> <Container maxW="container.md" paddingY={12}> <Flex> <Image borderRadius="full" boxSize="50px" src="https://bit.ly/dan-abramov" alt="Dan Abramov" marginRight={4} /> <Box> <Text> Written by <b>Dicka Ismaji</b> who lives and work in Tokyo, Japan. He like to learn something new, check out on new tweet of him </Text> </Box> </Flex> </Container> </header> ); }

/src/components/Footer.jsx

import { Box, Container } from "@chakra-ui/react"; import React from "react"; export default function Footer() { return ( <footer> <Box bg="red.500" color="white" paddingY={4}> <Container maxW="container.md"> All right reserved - Dicka Ismaji </Container> </Box> </footer> ); }

/src/componets/Layout.jsx

Make a template so, to create another page we can use Layout.jsx instead, write a header, footer on each page.

import React from "react"; import PropTypes from "prop-types"; import Header from "./Header"; import Footer from "./Footer"; import { Container } from "@chakra-ui/react"; export default function Layout({ children }) { return ( <> <Header /> <Container maxW="container.md" paddingY={5} marginBottom="12"> {children} </Container> <Footer /> </> ); } Layout.propTypes = { children: PropTypes.node.isRequired, };

And the last component is /src/components/Blog.jsx

import React from "react"; import { Link } from "gatsby"; import { Box, Heading, Text } from "@chakra-ui/react"; export default function Blog({ link, title, date, excerpt }) { return ( <Link to={link}> <Box paddingY="4"> <Heading as="h2" color="red.500"> {title} </Heading> <Text color={"blackAlpha.800"}>{date}</Text> <Text>{excerpt}</Text> </Box> </Link> ); }

Home Page

/src/pages/index.jsx

All files inside /src/pages will convert to be pages of the website.

import React from "react"; import Blog from "../components/Blog"; import Layout from "../components/Layout"; import { Text } from "@chakra-ui/react"; export default function index() { return ( <Layout> <Text fontWeight={"black"}>Latest Article</Text> <Blog link={"/home"} title="My First Post" date="May 13, 2022" excerpt="Lorem ipsum sit dolor amet, idk what is the next word" /> <Blog link={"/home"} title="My Second Post" date="May 13, 2022" excerpt="Lorem ipsum sit dolor amet, idk what is the next word" /> <Blog link={"/home"} title="My Third Post" date="May 13, 2022" excerpt="Lorem ipsum sit dolor amet, idk what is the next word" /> </Layout> ); }

Okay good, the main layout template is done, open your browser

Preview

We have done to create home page, then we will use markdown to generate a post page and show list of a blog using gatsby-plugin-mdx

Reference

https://chakra-ui.com


Another posts

Dicka Ismaji
A boy that entushiast
with Technology

For business inquiry

Images by unsplash

Designed with Developed with Deployed with