Skip to content


Making some custom changes to gatsby starter theme

web-development, gatsbyjs1 min read

To make your site stand out from the default, you have to make some custom changes.
Just to let the world know, "You have started"

Below are some custom changes which i have made in this site,

  1. To increase number of posts displayed in homepage from default 3. Check the below file,

  2. Spacing updates ( thought there were big gap between content & texts )

    • Blog post : Increasing space between H4 and previous element
      Updated site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\gatsby-plugin-theme-ui\index.js - Added mt: 4

      1h4: {
      2 ...tailwind.styles.h4,
      3 color: `heading`,
      4 fontSize: [2, 3, 4],
      5 mt: 4,
      6 },
    • Home page : Reducing the space between Latest posts and Home projects

      1From = <section sx={{ mb: [5, 6, 7] }} className={className}>
      2To = <section sx={{ mb: [3, 4, 5] }} className={className}>
    • Home page : Enabling tags in Latest posts

      1From = <Listing posts={posts} showTags={false} />
      2To = <Listing posts={posts} showTags={true} />
    • Home page : More space between multiple sections in the bottom

      2 ul: { margin: 0, padding: 0},
      3 li: { listStyle: `none`, mb: 3 },
      6 ul: { margin: 0, padding: 0, mb: 4 },
      7 li: { listStyle: `none`, mb: 2 },
    • Blog page : Reducing the space between Header and Blog title
      Updated site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\header.tsx

      1From = <header sx={{ mb: [5, 6] }}>
      2To = <header sx={{ mb: [4, 5] }}>
    • Blog page : Updated space between "Blog" title and list items
      Updated site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\blog.tsx

      1From : <Listing posts={posts} sx={{ mt: [4, 5] }} />
      2To : <Listing posts={posts} sx={{ mt: [3, 4] }} />
    • All the above changes can be made permanent, what do you mean permanent ? If you ask, npm install will overwrite all the above changes as modules get installed in node_modules folder. So to avoid that and make the changes permanent you can follow, procedures mentioned in Gatsby Shadowing Concepts and Long story short, basically you will have create folders and files,

    For instance, take you have updated file in below path,
    Copy the file to the below path( create required folders )

    Do rememember these files will be having import statements and those files need to copied as well. So folder looks like this due to dependent files. files in folder

  3. Adding 404 page : Create a new page in site-name/src/pages/404.js

    1import React from "react"
    3function NotFoundPage() {
    4 return <div>Not Found</div>
    7export default NotFoundPage
  4. Adding Google Analytics

  5. Adding Favicon

Above are some minimal custom changes, i have done to the site, before the first deployment/implementation.

# Next steps

I will be making more custom changes as maintenance is always an on-going process.

Below are some custom changes, i have in mind at the moment,

# Related articles

  1. How i made this gatsby site