Skip to content

bobby_dreamer

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

    • Home page : Reducing the space between Latest posts and Home projects
      site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\listing.tsx

    • Home page : Enabling tags in Latest posts
      site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\homepage.tsx

    • Home page : More space between multiple sections in the bottom
      site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\list.tsx

    • Blog page : Reducing the space between Header and Blog title
      Updated site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\header.tsx

    • Blog page : Updated space between "Blog" title and list items
      Updated site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\blog.tsx

    • 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,
    site-name\node_modules\@lekoarts\gatsby-theme-minimal-blog\src\components\blog.tsx
    Copy the file to the below path( create required folders )
    site-name\src\@lekoarts\gatsby-theme-minimal-blog\components\blog.tsx

    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

  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