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 in a server like NodeJS.
  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. And one fine day, i decided i should put a end to this and make the site and like all successful Software products, there should be a plan. Honestly to say, i didn't go step by step, i was working parallely in all stages and 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)
3DesignWell you are here. 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

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

  4. Open your VS Code and create a new folder

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

  6. Start the template site.

    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

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.

  • 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.

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 + 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. + Cheatsheet - This is going to like quick commands to get things done. A quickie. + 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

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)

Below will be the output of the above command

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.

# Next steps

  1. Custom changes
  2. Changing default theme colors
  3. Deploying & Hosting in Firebase

# 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.
  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 blog site, 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.

Now please go and try it for yourself.

Thanks!