sbhaseen.github.io

A Gatsby powered blog based on the basic setup of gatsby-starter-blog.

Prerequisites

Clone the repository and install dependencies.

After cloning the repository, install the dependencies with NPM.
```
npm install
```
Start developing.

Use the develop command of Gatsby CLI to get started.
```
gatsby develop
```
Default development paths.

Main site http://localhost:8000

GraphQL: http://localhost:8000/___graphql

Site Metadata

Important site medata such as title, description, author is configured in gatsby-config.js

siteMetadata: {
  title: `Site Title`,
  description: `A basic description.`,
  author: `An Author`,
},

Plugins

Plugins must also be configured in gatsby-config.js on a per use basis. See Gatsby Config for more details.

Basic styles.

The styles are a mix of Bulma and custom SCSS modules. Bulma is applied at the overall layout level and the custom SCSS modules are applied to each component.

The NPM distribution of Bulma is used and is imported in the layout component styles:
```
@import "../../node_modules/bulma/bulma.sass";
```
Important to note:
- Layout should take only the .scss extension for styling so that it will not be component-scoped and will apply to all children elements. i.e.: layout.scss
- Components should ideally have .module.scss in the file extension, This enables component-scoped styling and prevents mixups on other elements. i.e.: someComponent.module.scss.
Syntax Highlighting.

The library of highlight.js is used to render syntax highlighting of code snippets for blog posts.

The NPM distribution of highlight.js is used.

The styling component of highlight.js is imported in the layout component styles:
```
@import "../../node_modules/highlight.js/styles/github.css";
```
Based on the recommendation for "Custom Initialization" in the documentation, the best approach for React is to select any pre code elements and then apply the highlightBlock method. This is initialized (once) by using React's useEffect hook for the specific functional component (blog-post.js).
```
useEffect(() => {
  document.querySelectorAll("pre code").forEach(block => {
    hljs.highlightBlock(block)
  })
}, [])
```

A Gatsby package called gh-pages is used for ease of deployment to GitHub Pages. See the gh-pages documentation for more details.

Essential commands:

npm run deploy