Skip to content

bobby_dreamer

How i made this site

web-development, gatsbyjs4 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

# Steps to make a gatsby site

  1. Install NodeJS

  2. Install Gatsby CLI

    npm install -g gatsby-cli@2.4.17
  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 bdv2 https://github.com/LekoArts/gatsby-starter-minimal-blog
  6. Start the template site.

    cd bdv2
    gatsby develop

    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.

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

1require(`dotenv`).config({
2 path: `.env`,
3})
4
5module.exports = {
6 siteMetadata: {
7 siteTitle: `bobby_dreamer`,
8 siteTitleAlt: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
9 siteHeadline: `Personal website of Sushanth Bobby Lloyds`,
10 siteUrl: `https://www.bobbydreamer.com`,
11 siteDescription: `Sushanth Bobby Lloyds. Programming. Games. Music. Videos. Resume. Experiments.`,
12 author: `Sushanth Bobby Lloyds`,
13 },
14 plugins: [
15 {
16 resolve: `@lekoarts/gatsby-theme-minimal-blog`,
17 options: {
18 navigation: [
19 {
20 title: `bio`,
21 slug: `/bio`,
22 },
23 {
24 title: `articles`,
25 slug: `/articles`,
26 },
27 {
28 title: `TIL`,
29 slug: `/til`,
30 },
31 {
32 title: `music`,
33 slug: `/music`,
34 },
35 {
36 title: `movies`,
37 slug: `/movies`,
38 },
39 ],
40 externalLinks: [
41 {
42 name: `Github`,
43 url: `https://github.com/bobbydreamer`,
44 },
45 {
46 name: `LinkedIn`,
47 url: `https://www.linkedin.com/in/sushanth-bobby-lloyds/`,
48 },
49 ],
50 },
51 },
52 {
53 resolve: `gatsby-plugin-google-analytics`,
54 options: {
55 trackingId: process.env.GOOGLE_ANALYTICS_ID,
56 },
57 },
58 `gatsby-plugin-sitemap`,
59 {
60 resolve: `gatsby-plugin-manifest`,
61 options: {
62 name: `BobbyDreamer - Works of Sushanth Bobby Lloyds`,
63 short_name: `bobby|dreamer`,
64 description: `Sushanth Bobby Lloyds. Programming. Games. Music. Videos. Resume. Experiments.`,
65 start_url: `/`,
66 background_color: `#fff`,
67 theme_color: `#6B46C1`,
68 display: `standalone`,
69 icons: [
70 {
71 src: `/android-chrome-192x192.png`,
72 sizes: `192x192`,
73 type: `image/png`,
74 },
75 {
76 src: `/android-chrome-512x512.png`,
77 sizes: `512x512`,
78 type: `image/png`,
79 },
80 ],
81 },
82 },
83 `gatsby-plugin-offline`,
84 `gatsby-plugin-netlify`,
85 // `gatsby-plugin-webpack-bundle-analyser-v2`,
86 ],
87}

Changes to home page

  • Updating the text in homepage banner. Its in a file called hero.mdx. To change the banner text (Hi, I'm Lupin...), create a folder & file in path mentioned in code header below.

    main-folder/src/@lekoarts/gatsby-theme-minimal-blog/texts/hero.mdx
    1<h3>Hello, I am Sushanth.</h3>
    2
    3I am a mainframe Db2 DBA.
    4
    5Yep, mainframe is still there and as usual its highly scalable, highly available and highly secured.
    6Occasionally, Tom Cruise tries to visit us from ceiling, we just look up and say "Hi Tom" and he just panics and says "Code red, mission compromised" and he does his trailer-shot run. :D
    7
    8This site is my sandbox, probably will contain collection of my unorganized notes/articles, programming tests, home projects, fav. music, fav. YT videos and VLC screenshots not sure why i take those, mostly stuff i took time to look at.
  • Updating the "Projects" section of the homepage which is in the bottom after "Latest Posts". Create a file in the path mentioned in the code header below.

    main-folder/src/@lekoarts/gatsby-theme-minimal-blog/texts/bottom.mdx
    1<Title text="Home Projects" />
    2
    3- [Stash](http://stash.bobbydreamer.com)
    4- [Feedback Management System](https://feedbacks.bobbydreamer.com/)

Adding content

Adding new page

New page insense like, its an isolated page which needs to be in the top header-menu. For this site, i have decided to have below pages, for now

  • bio - Possibly going to be a long resume
  • blog - I have no intention of creating something like article as most of the content is going to be a How-to, Step-by-step and if its NON-IT, just few words on why i took time to post about it. So, subsections of this page going to be
    1+ Notes - I take notes when i am learning something, if i don't have something elaborate, i am going to put that in notes section.
    2+ Cheatsheet - This is going to like quick commands to get things done. A quickie.
    3+ Article - Notes & Cheatsheet will eventually evolve into this.
  • TIL(Today i learned) - Snippets, life lessons, plans, ideas, todos, bucket list, etc.
  • music - Playlist of favourite songs. Why Youtube has this weird issue, if a song video is deleted, in your playlist it shows as deleted video, but don't know what got deleted to add that back. So here i am going to put that list.
  • movies - I used to be a Movie freak, this section will have list of movies i have watched and few sentences on why i like it.
  • fan - People, whom i followed/follow and get inspiration from. According to me they are the best in what they do.

Steps to add new page

  1. Create a new folder inside content/pages

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

  3. In index.mdx write your frontmatter(title, slug) and content Page/Frontmatter

  4. Optionally add files/images to the folder you want to reference from the page

  5. Go and update gatsby-config.js --> navigation

    navigation: [
    {
    title: `bio`,
    slug: `/bio`,
    },
    {
    title: `music`,
    slug: `/music`,
    },
    ],
Adding new post

Posts are something that we create or update regularly, this does not come in header menu. Posts appear in section "Latest Posts" in home page(only latest 3 are shown, no options to increase that)

Posts can be created/added by creating MDX files inside content/posts folder.

Steps to add new page

  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

  4. Optionally add files/images to the folder you want to reference from the page

# 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

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. Tagging
  5. Images get optimized properly and images have shadow glowing effect

Disadvantages

  1. Gatsby Markdown MDX - Not all markdown features works like markdown supports html inbetween markdown codes. Here there is no 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. Custom changes
  2. Changing default theme colors
  3. Deploying & Hosting in Firebase

Thank you very much for reading the post!