Skip to content

ayonious/that-it-guy-tech-blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Technical Blog using Gatsby

CircleCI Netlify Status

A technical Blog created by Gatsby. You can use it to write non tech blogs as well

Screenshot

๐ŸŽ Features

  1. gatsby-plugin-mdx

To convert md files to websites

  1. gatsby-source-filesystem

To access files in this folder using a graphQL api

  1. gatsby-image, gatsby-plugin-sharp, gatsby-transformer-sharp

Its about making the saved images to different formats And also loads the images lazily while webpage is refreshed

  1. gatsby-plugin-styled-components

Without this plugin all your styled components will become messy in gatsby. Here is the gatsby bug that you kill using this gatsbyjs/gatsby#9911 (comment)

  1. jquery to add hash links

This allows you to have urls like this https://that-it-guy.netlify.app/blogs/jquery-react#the-problem

  1. Themes to change to dark mode

Done using Context. useContext. Context.Provider Context.Consumer

  1. Code Syntax
  • Code syntax highlighting using Highlight.js
  • Adding a copy button for each code block
  1. Lazy loading
  • If you have too many posts it will try to load them one by one based on your screen scroll position
  1. Some other hooks

useState, useContext, useCallback

  1. gatsby-plugin-playground

You can use a nice UI for running graphql queries. Lot better than the default graphql UI.

  1. gatsby-plugin-react-helmet

SEO. Create special meta for your root html website that helps BOTs detect your website and understand its purpose.

  1. gatsby-plugin-offline, gatsby-plugin-manifest

2 Steps for making your website Progressive Web App:

  • gatsby-plugin-manifest:

https://www.gatsbyjs.org/docs/progressive-web-app/#it-must-include-a-web-app-manifest Gatsby provides a plugin interface to add support for shipping a manifest with your site.

  • gatsby-plugin-offline:

https://www.gatsbyjs.org/docs/progressive-web-app/#it-must-implement-a-service-worker Gatsby also provides a plugin interface to create and load a service worker into your site

๐Ÿ’ฏ Lighthouse Score

Lighthouse Score

๐Ÿ–ผ Screenshot and Design

๐ŸŽจ Theming

Themes

Syntax highlighting with Code copy

SyntaxHighlight

Filter by Post Tags

Filter

๐Ÿ’„ Styles

  1. Mostly are Styled Components
  2. Filterbox: react-select, Theme Toggle: react-switch, Icons: react-icons
  3. Some pure css styles

๐Ÿš€ Deploy

Deploy to Netlify