Gatsby

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

Installation

Gatsby can be installed by using either npm or Yarn. npm comes pre-installed with Node.js. If you have not yet installed Node.js, follow the tutorial at Node.js installation.

Gatsby installation

$ sudo npm install --global gatsby-cli

Adding page metadata

In order to add metadata to a page (title, description or viewport metatag), you must follow these steps:

1. Install these packages:

   npm install --save gatsby-plugin-react-helmet react-helmet

2. Add the plugin in gatsby-config.js:

{
  plugins: [`gatsby-plugin-react-helmet`]
}

3. Use React Helmet in your pages:

import React from 'react'
import {Helmet} from 'react-element'
class Application extends React.Component {
  render() {
    return (
      <div>
        <Helmet>
          <meta charSet="utf-8" />
          <title>My Title</title>
          <link rel="canonical" href="http://mysite.com/example" />
        </Helmet>
      </div>
    )
  }
}

Responsive pages

In order to enable responsible pages in HTML, you must add this metatag in your Helmet:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Importing images

<div styles={{backgroundImage: url(${myimage}) }} title='My Image'>

<img src={myimage} alt='My Image' />

Importing vanilla Javascript snippets

Add the javascript snippet under the onClientEntry function at gatsby-browser.js:

exports.onClientEntry = () => {
  window.onscroll = () => {
    if (window.pageYOffset > 150) {
      document.querySelector('nav').style.background = "#333";
      document.querySelector('nav').style.transition = "1s";
    } else {
      document.querySelector('nav').style.background = "transparent";
    }
  }
}

Commenting Gatsby JSX code

{/* Gatsby code comment here */}

Errors

The current limit can be viewed by running:

cat /proc/sys/fs/inotify/max_user_watches

The limit can be increased to its maximum by editing /etc/sysctl.conf and adding this line to the end of the file:

fs.inotify.max_user_watches=524288

BooGi

Prereqs

BooGi is an awesome GatsbyJS documentation 📖 starter. It generates modern documentation pages, which can serve as product docs, tutorials, API docs and, especially, knowledge-bases.

More info at https://boogi.netlify.app/

npm i -g gatsby-cli
npm i -g yarn
npm i -g boogi-cli

First time

mkdir test && cd test
boogi init
[create content]
boogi develop
[check localhost:8000]
[correct content]
[stop development server]
boogi build
git add
git commit
git remote add origin https://github.com/mygitaccount/myrepository.git
git push -u origin master

Rest of the time

cd test
[create and edit content]
boogi develop
[check localhost:8000]
[correct content]
[stop development server]
boogi build
git add
git commit
git push