Skip to content
bobby_dreamer
GithubLinkedIn

How i made this site

— web-development, gatsbyjs — 3 min read

One fine day, i decided to make a new version of my site and thats because of my new acquired knowledge and successful little tests. I have a plan to accomplish this but this project is not time bound like nobody is eagerly waiting for it except me.

The plan is very simple, "I want to build a site" and in the address bar, i don't want to see .html when the page is displayed. I want to make content and maintain consistent look across the site. Content can be stored in .json or markdown or even better in Firebase storage. Most importantly appearance has to be awesome.

Solutions

  1. There are many solutions to this like .htaccess, but to me better one is running the application written in NodeJS with Express.
  2. To maintain consistency, i can use NodeJS template engines like EJS, PUG, Handlebars, etc...
  3. Data can be retreived from Firebase / Firestore or Firebase storage, think on pricing, coding and how often will you use this.
  4. Awesome appearance. hmmm, get a list of things you want to have and prepare of list of essential things/must have sort of.

Next few months, mostly i have been working on the requirements, you know the The Awesome Appearance, actually was alot occupied at work, so mostly i was just making notes and saving links in Stash. And one fine day, i decided i should put a end to all this and make the site and like all successful Software products, there should be a plan/strategy to do this. Honestly to say, i didn't go step by step, i was working parallely in all stages at different times like changing designs and steps based on feasibility.

This is the thing, THE SDLC

NStagesActivity
1PlanCollectors item / All amazing fancy stuff
2DefineEpiphany Moment. Its going to be a plain content site, nothing else. (PERIOD)
3DesignYou are here, this is the final product. Next 3 stages are repetitive
4BuildStarted to add some content here
5TestThis is a test till break stage. If it breaks, go back to stage (3)/(4) depending on the issue. If it does not break, then you are in UAT/Pre-PROD zone. Do the final testing. If all OK, move to next stage.
6DeployTruly a ninja moment, nobody knows that this site exists, but it does
7MaintenanceAdd more content

# Installing Gatsby and a starter theme

  1. Install NodeJS

  2. Install Gatsby CLI

    npm install -g gatsby-cli

  3. Go to the github site Gatsby Starter: Minimal Blog

  4. Open your VS Code and create a new folder 

    mkdir lupin
    cd lupin

  5. Use gatsby CLI to install the starter template. It will take around 5mins or so to finish(in my system)

    gatsby new bdv3g4 https://github.com/LekoArts/gatsby-starter-minimal-blog
    -- or
    git clone https://github.com/LekoArts/gatsby-starter-minimal-blog
    cd gatsby-starter-minimal-blog
    -- or 
    git clone https://github.com/LekoArts/gatsby-starter-minimal-blog bdv3g4
    cd bdv3g4
    

    -- If you use npm 7 or above use the `--legacy-peer-deps` flag
    npm install --legacy-peer-deps

  6. Start the template site. 

    gatsby develop --verbose

    What gatsby develop does is, runs the server in the background, enables useful features like live reloading and Gatsby’s GraphQL to query pages & attributes.

  7. Visit the site http://localhost:8000/ in browser of your choice.

# Starting the custom changes

After seeing the site working. First change we will be making is in gatsby-config.js and i have highlighted the updated lines

gatsby-config.js
1require(`dotenv`).config()
2

3const shouldAnalyseBundle = process.env.ANALYSE_BUNDLE
4// const googleAnalyticsTrackingId = process.env.GOOGLE_ANALYTICS_ID
5

6module.exports = {
7  siteMetadata: {
8    siteTitle: `bobby_dreamer`,    
9    siteTitleAlt: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
10    siteHeadline: `Personal website of Sushanth Bobby Lloyds`,
11    siteUrl: `https://www.bobbydreamer.com`,
12    siteDescription: `Sushanth Bobby Lloyds. Programming. Experiments. Wealth. Music. Bio.`,
13    author: `Sushanth Bobby Lloyds`,    
14  },
15  plugins: [
16    {
17      resolve: `@lekoarts/gatsby-theme-minimal-blog`,
18      // See the theme's README for all available options
19      options: {
20        navigation: [
21          {
22            title: `about_me`,
23            slug: `/bio`,
24          },          
25          {
26            title: `blog`,
27            slug: `/blog`,
28          },
29          {
30            title: `T.I.L`,
31            slug: `/til`,
32          },
33          {
34            title: `music`,
35            slug: `/music`,
36          },
37          {
38            title: `iRevere`,
39            slug: `/irevere`,
40          },
41        ],
42        externalLinks: [
43          {
44            name: `Github`,
45            url: `https://github.com/bobbydreamer`,
46          },
47          {
48            name: `LinkedIn`,
49            url: `https://www.linkedin.com/in/sushanth-bobby-lloyds/`,
50          },
51        ],
52      },
53    },
54    {
55      resolve: `gatsby-omni-font-loader`,
56      options: {
57        enableListener: true,
58        preconnect: [`https://fonts.gstatic.com`],
59        interval: 300,
60        timeout: 30000,
61        // If you plan on changing the font you'll also need to adjust the Theme UI config to edit the CSS
62        // See: https://github.com/LekoArts/gatsby-themes/tree/master/examples/minimal-blog#changing-your-fonts
63        web: [
64          {
65            name: `IBM Plex Sans`,
66            file: `https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap`,
67          },
68        ],
69      },
70    },
71    `gatsby-plugin-sitemap`,
72    {
73      resolve: `gatsby-plugin-manifest`,
74      options: {
75          name: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
76          short_name: `bobby|dreamer`,
77          description: `Sushanth Bobby Lloyds. Programming. Experiments. Wealth. Music. Bio.`,
78          start_url: `/`,
79          background_color: `#fff`,
80          theme_color: `#6B46C1`,
81          display: `standalone`,
82          icons: [
83          {
84              src: `/favicon-32x32`,
85              sizes: `32x32`,
86              type: `image/png`,
87          },
88          {
89              src: `/android-chrome-192x192.png`,
90              sizes: `192x192`,
91              type: `image/png`,
92          },
93          {
94              src: `/android-chrome-512x512.png`,
95              sizes: `512x512`,
96              type: `image/png`,
97          },
98          ],
99      }, 
100      },
101    `gatsby-plugin-offline`,
102    `gatsby-plugin-gatsby-cloud`,
103    `gatsby-plugin-netlify`,
104    {
105      resolve: `gatsby-plugin-feed`,
106      options: {
107        query: `
108          {
109            site {
110              siteMetadata {
111                title: siteTitle
112                description: siteDescription
113                siteUrl
114                site_url: siteUrl
115              }
116            }
117          }
118        `,
119        feeds: [
120          {
121            serialize: ({ query: { site, allPost } }) =>
122              allPost.nodes.map((post) => {
123                const url = site.siteMetadata.siteUrl + post.slug
124                const content = `<p>${post.excerpt}</p><div style="margin-top: 50px; font-style: italic;"><strong><a href="${url}">Keep reading</a>.</strong></div><br /> <br />`
125

126                return {
127                  title: post.title,
128                  date: post.date,
129                  excerpt: post.excerpt,
130                  url,
131                  guid: url,
132                  custom_elements: [{ "content:encoded": content }],
133                }
134              }),
135            query: `
136              {
137                allPost(sort: { fields: date, order: DESC }) {
138                  nodes {
139                    title
140                    date(formatString: "MMMM D, YYYY")
141                    excerpt
142                    slug
143                  }
144                }
145              }
146            `,
147            output: `rss.xml`,
148            title: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
149          },
150        ],
151      },
152    },
153    shouldAnalyseBundle && {
154      resolve: `gatsby-plugin-webpack-bundle-analyser-v2`,
155      options: {
156        analyzerMode: `static`,
157        reportFilename: `_bundle.html`,
158        openAnalyzer: false,
159      },
160    },
161    {
162      resolve: `gatsby-plugin-google-gtag`,
163      options: {
164        // You can add multiple tracking ids and a pageview event will be fired for all of them.
165        trackingIds: [
166          "G-6X2JSPJ1WR", // Google Analytics
167        ],
168        // This object is used for configuration specific to this plugin
169        pluginConfig: {
170          // Puts tracking script in the head instead of the body
171          head: true,
172        },
173      },
174    },       
175  ].filter(Boolean),
176}

Changes to home page

  • Updating the text in homepage banner. Its in a file called hero.mdx. It needs to be replaced with below content.

    src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx
    1<Text sx={{ fontSize: [3, 4, 5], fontWeight: `bold`, color: `heading` }}>
    2  Hello, I am Sushanth.
    3</Text>
    4

    5Welcome to my site. 
    6

    7I am a mainframe Db2 DBA. Yep, mainframe is still there and as usual its highly scalable, highly available and highly secured. 
    8

    9If you don't know what mainframe is, you should see [this](https://www.youtube.com/watch?v=ar0xLps7WSY), this is how our work environment looks like. 
    10

    11[This](../hello-world) site is my sandbox, probably will contain collection of my unorganized programming notes, things i learned doing some home projects, fav. music, self development, notes taken while watching youtube videos, etc., more or less.  
    12

    13**Thanks**

  • Updating the "Projects" section of the homepage which is in the bottom after "Latest Posts".

    src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx
    1<Title text="Home Works" />
    2

    3- [Db2 Notes](../105-db2-notes)
    4- [Working the djinn](../42-working-the-djinn)
    5- [Quest for Wealth - Value Investor Education](../40-wealth-education)
    6- [Side projects](../36-side-projects)
    7- [Notes from Tedx](../37-tedx)
    8- [Site Reliability Engineering](../53-sre-references)
    9- [Stock market terms](../112-stock-market-terms)
    10- [Shortcuts and commands](../74-shortcuts-and-commands)

Primary Content

Primary are contents are pages which appears in the page header. For this site, i have decided to have below pages, for now

  • bio - Possibly going to be a long resume
  • blog - This is where the articles will be listed.
  • TIL(Today i learned) - Snippets, life lessons, plans, ideas, todos, bucket list, etc.
  • music - My Fav music from Spotify.
  • iRevere - People, whom i followed/follow and get inspiration from. According to me they are the best in what they do.

Steps to add new primary content

  1. Create a new folder inside content/pages like bio, blog, TIL, music and irevere
  2. Create a new index.mdx file content/pages
  3. In index.mdx write your frontmatter(title, slug) and content Page/Frontmatter
Adding new post

Posts are blog posts (or) articles and they can be added by creating folders/files inside content/posts folder.

  1. Create a new folder inside content/posts

  2. Create a new index.mdx file content/posts

  3. In index.mdx write your frontmatter(title, date, description, tags and slug) and content below it Post/Frontmatter

# Test

Testing is quite simple. All you need to do is to type the below command, this will start a development server in your machine and watch for changes and refresh the site(just like nodemon)

1gatsby develop --verbose

Below will be the output of the above command 

1PS D:\BigData\08. HTML\Gatsby\lupin\bdv2> gatsby develop
2success open and validate gatsby-configs - 0.271s
3success load plugins - 4.072s
4success onPreInit - 0.030s
5success initialize cache - 0.040s
6success copy gatsby files - 0.275s
7success onPreBootstrap - 0.039s
8success createSchemaCustomization - 0.024s
9success source and transform nodes - 1.319s
10success building schema - 1.080s
11success createPages - 0.280s
12success createPagesStatefully - 0.237s
13success onPreExtractQueries - 0.015s
14success update schema - 0.101s   
15success extract queries from components - 1.142s
16success write out requires - 0.460s
17success write out redirect data - 0.029s
18success Build manifest and related icons - 0.027s
19success onPostBootstrap - 0.104s
20⠀
21info bootstrap finished - 18.945 s
22⠀
23success run queries - 0.183s - 3/3 16.38/s
24warn "typescript" is not installed. Builtin ESLint won't be working on typescript files.
25⠀
26You can now view bobby_dreamer in the browser.
27⠀
28  http://localhost:8000/
29⠀
30View GraphiQL, an in-browser IDE, to explore your site's data and schema
31⠀
32  http://localhost:8000/___graphql
33⠀
34Note that the development build is not optimized.
35To create a production build, use gatsby build
36⠀
37success Building development bundle - 13.618s

You can browse your test site in http://localhost:8000/

Sometimes during testing, thing might not work as expected, during those times, Keep calm and run gatsby clean and then gatsby develop again, to see if this worked. 

1PS D:\BigData\08. HTML\Gatsby\lupin\bdv2> gatsby clean
2info Deleting .cache, public
3info Successfully deleted directories

# Advantages / Disadvantages of this theme

Advantages

  1. Code block - You can highlight specific code lines in a code block, turn on/off line numbers, can mention programming language name and title
  2. Blog page will be updated with the list of all the posts in descending order. If post doesn't appear, basically means that .mdx file has issues. Check the VSCode console for any error messages.
  3. Has Dark mode
  4. Blog posts have tags
  5. Images get optimized properly and images have shadow glowing effect

Disadvantages

  1. Gatsby Markdown MDX - Regular markdown supports HTML codes but MDX doesn't. Eg:- line breaks <br>
  2. Making custom changes to the code, you have to be an expert going through codes in node_modules folder and sub-folders. 
    1@lekoarts\gatsby-theme-minimal-blog-core
    2@lekoarts\gatsby-theme-minimal-blog
  3. Gatsby Shadowing, sometimes it works and sometimes it doesn't. Its a great feature, by the way.

# Conclusion

Does it fit the purpose ?
Yes. I wanted a simple site to dump my learnings, an online archive, wanted it to be fast, responsive with tagging & code highlighting capabilities for posts. This particular gatsby theme has all of it and more, which i am still exploring.

# Next steps

  1. First set of custom changes made to this starter theme
  2. Adding a Favicon
  3. Changing default theme colors
  4. Deploying & Hosting in Firebase

Thank you very much for reading the post!