JAMStack

Gatsby

Installation of Node.js

Debian

# as root

curl -sL https://deb.nodesource.com/setup_12.x | bash -

apt install -y nodejs

MX Linux

Copy the content of https://deb.nodesource.com/setup_12.x
Create a new text file and paste the content
Add the following lines:

check_alt "MX" "Continuum" "Debian" "stretch"

check_alt "mx-linux" "Continuum" "Debian" "stretch"

Save the file as setup_12.x and make it ejecutable: chmod +x setup_12.x, then:
sudo ./setup_12.x
sudo apt install -y nodejs

Ubuntu

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

sudo apt install -y nodejs

Fedora

# as root

curl -sL https://rpm.nodesource.com/setup_12.x | bash -

Installation Gatsby

$ sudo npm install --global gatsby-cli

$ sudo gatsby telemetry --disable

$ git config --global user.email "you@example.com"

$ git config --global user.name "Your Name"

$ sudo chown -R $USER:$(id -gn $USER) /home/cheo/.config

Restart the computer

Update Gatsby

$ npm i -g gatsby-cli

Creating a project

There are several ways to create a project in Gatsby:

Gatsby Github repository

The most straight way to create a project is by using a Gatsby template on the github repository:

$ gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

This will create a gatsby-starter-hello-world project into the hello-world directory.

To run the development server, get into the root of the hello-world directory:

cd hello-world

Then issue this command:

$ npm run develop # or gatsby develop

To visit the site, go to http://localhost:8000

Note that if you don't specify the github repository when creating the project, it will automatically download the Gatsby's default starter git repository.

Clone a Github repository

git clone https://github.com/gatsbyjs/gatsby-starter-hello-world hello-world

cd hello-world

rm -rf .git # So you can have your own changes stored in VCS

npm install # or yarn install

npm run develop # or gatsby develop

You can download this .gitignore file and create a git repository in your local machine:

$ git init

$ git add -A

$ git commit -m "my first commit"

If you created a new empty repository in Github, you can now upload your local git repository:

$ git remote add origin https://github.com/mygitaccount/myrepository.git

$ git push -u origin master

Create and serve a production build

In order to test a production site, you must create a production build and serve it locally:

Create a production build

$ gatsby build

Gatsby will perform an optimized production build for your site, generating static HTML and per-route JavaScript code bundles.

Serve the production build locally

$ gatsby serve

Plugins

gatsby-transformer-remark: this transforms blog posts written in markdown .md files on the local disk into HTML for rendering.
gatsby-image: Speedy, optimized images without the work.

Hosting your Gatsby website on Netlify

You can host your site in Netlify if you have the source code of your site in Github (gatsby*.js files, package*.json files, yarn.lock file and src/ directory. Don't add anything else) . Note that if you have deployed the site as explained in the section below "Hosting your Gatsby website on Github Pages", you won't be able to host in Netlify.

First you have to create the repository on Github
Then move to the root directory of your Gatsby project in your PC and issue these commands:

$ git init

$ git add gatsby*.js package*.json yarn.lock src/

$ git commit -m "first commit"

$ git remote add origin https://github.com/<mygitaccount>/<myrepository>.git

$ git push -u origin master

Next, you have to follow these steps to deploy the Github repository on Netlify:
- Go to Netlify
- Click on 'New site from Git'
- Select 'Github' as repository provider
- Connect and authorize Github
- Choose the repository where your site is
- Click on 'Deploy site'

Updating repository

$ git add -A

$ git commit -m "changed some stuff"

$ git push -u origin master

Note: Netlify will automatically detect the changes on the Github repository and will deploy the changes on your Netlify site. Awesome !!! This is called continuous deployment (Git-triggered builds).

Hosting your Gatsby website on Github Pages

Go to your project root directory and prepare Git:

$ git init

$ git add -A && git commit -m "My first commit"

Install gh-pages:

$ npm install gh-pages --save-dev

Modify package.json file with:

scripts: {

            // ...you'll see build, develop, format, etc above this....

            "deploy": "gatsby build --prefix-paths && gh-pages -d public",

Add a path prefix to the configuration gatsby-config.js to let GatsbyJS know it's not in the root:

  siteMetadata: {

    title: `Your site Name`,

},

  pathPrefix: "/your-repo-name",

Deploy:

$ git remote add origin http://github.com/username/repo-name.git

$ npm run deploy

Visit your site:

https://yourusername.github.io/repo-name/

More info Gatsbyjl.org website

Update site with new commits:

$ git add -A && git commit -m "My second commit"

$ npm run deploy

GraphQL

Query

Case example: How to get all files with extension ".webp" and ".jpeg" from directory "images"

1. Configure gatsby-source-filesystem plugin in order to fetch data from particular directories on gatsby-configure.js, in this case /src/pages/ and /images/:

module.exports = {

  plugins: [

      resolve: `gatsby-source-filesystem`,

      options: {

        name: `pages`,

        path: `${__dirname}/src/pages/`,

},

},

      resolve: `gatsby-source-filesystem`,

      options: {

        name: `images`,

        path: `${__dirname}/images/`,

},

},

],

2. Create the query. Note that in order to filter by directory, we actually use the name you specified in the gatsby-config.js file by using the filter sourceInstanceName in the query:

query MyQuery {

  allFile(filter: {sourceInstanceName: {eq: "images"}, extension: {regex: "/(jpeg)|(webp)/"}}) {

    edges {

      node {

        relativePath

Note that relativePath will yield the actual name of the file.

Full gatsby-image in an element (like a header background image)

In order to use a full image in an element, like the full images used in a header element, we can use this code:

[...]

const data = useStaticQuery(graphql`

        query {

            file(relativePath: { eq: "header-background.jpg" }) {

                childImageSharp {

                    fluid(maxWidth: 1920, quality: 72) {

                        ...GatsbyImageSharpFluid_withWebp

                publicURL

`)

return (

 <header style={{background: `url(${data.file.publicURL})`, backgroundColor: 'rgba(0, 0, 0, .6)', backgroundBlendMode: 'multiply', backgroundSize: 'cover',  paddingBottom: '30px'}}>

[...]

</header>

[...]

Header.js with background image

import React from 'react'

import { Link, graphql, StaticQuery } from 'gatsby'

import styled from 'styled-components'

import BackgroundImage from 'gatsby-background-image'

const BackgroundSection = ({ className }) => (

  <StaticQuery

    query={graphql`

      query {

        site {

          siteMetadata {

              title

        desktop: file(relativePath: { eq: "header.jpg" }) {

          childImageSharp {

            fluid(quality: 72, maxWidth: 1920) {

              ...GatsbyImageSharpFluid_withWebp

`}

    render={data => {

      // Set ImageData.

      const imageData = data.desktop.childImageSharp.fluid

      return (

        <BackgroundImage

          Tag="header"

          className={className}

          fluid={imageData}

          backgroundColor={`#040e18`}

          <nav className="nav main-nav">

                <ul>

                    <li>

                        <Link to="/">HOME</Link>

                    </li>

                    <li>

                        <Link to="/shop">SHOP</Link>

                    </li>

                    <li>

                        <Link to="/blog">BLOG</Link>

                    </li>

                    <li>

                        <Link to="/about">ABOUT</Link>

                    </li>

                    <li>

                        <Link to="/contact">CONTACT</Link>

                    </li>

                </ul>

            </nav>

            <h1 className="title-name title-name-large">{data.site.siteMetadata.title}</h1>

        </BackgroundImage>

}}

/>

const Header = styled(BackgroundSection)`

background-color: rgba(0, 0, 0, .6);

background-blend-mode: multiply;

background-position: top;

background-size: cover;

padding-bottom: 30px;

export default Header

Styling

Inline styling

With variable:

var divStyle = {

  color: 'white',

  marginRight: 10,

  backgroundImage: 'url(' + imgUrl + ')'

};

<div style={divStyle}>Hello World</div>

Without variable:

<div style={{ color: 'white', marginRight: 10, textAlign: 'left' }}>Hello World</div>

Bootstrap

Font Awesome color

<i class="fas fa-coffee" style="color: #ff0000;"></i>

<i class="fas fa-coffee text-danger"></i>

text-danger : red
text-dark : dark grey
text-info : light blue
text-light : light grey
text-muted : grey
text-primary : blue
text-secondary : grey
text-success : green
text-warning : yellow/orange
text-white : white

Hugo

Intall Hugo

$ sudo apt install hugo

Create a new site in adirectory named quickstart

$ hugo new site quickstart

Add a theme

$ cd quickstart

$ git init

$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Edit your config.toml configuration file and add the Ananke theme:

$ echo 'theme = "ananke"' >> config.toml

Add some content

$ hugo new posts/my-first-post.md

Edit content/posts/my-first-post.md

Start the Hugo server with Draft enabled

$ hugo server -D

Google Sites

Report abuse