$ cd Desktop

$ mkdir Proyek

$ cd Proyek

$ npm install -g gatsby-cli@latest

$gatsby -v

$node -v

$gatsby new

What would you like to call your site?

What would you like to name the folder where your site will be created?

Will you be using JavaScript or TypeScript?

Will you be using a CMS?

Would you like to install a styling system?

Would you like to install additional features with other plugins?

Shall we do this? (Y/n) » Yes

Start by going to the directory with

cd my-blog

npm run develop

See all commands at

https://www.gatsbyjs.com/docs/reference/gatsby-cli/

$ cd my-blog
$ npm run dev

$ gatsby develop

You can now view my-blog in the browser.
http://localhost:8000/
View GraphiQL, an in-browser IDE, to explore your site's data and schema
http://localhost:8000/___graphql

$ npm install -D gatsby-plugin-postcss tailwindcss@latest postcss@latest autoprefixer@latest

$ npx tailwindcss init -p 

purge: ['./src/**/*.{js,jsx,ts,tsx}'],

gatsby-plugin-postcss

@tailwind base;
@tailwind components;
@tailwind utilities;

import "./src/styles/global.css"

    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    `gatsby-transformer-remark`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `blog-posts`,
        path: `${__dirname}/src/blog-posts`,
      },
    },

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}'],
  content: [],
  theme: {
    fontFamily: {
      roboto: ['Roboto, sans-serif'],
      karla: ['Karla, sans-serif']
    },
    extend: {},
  },
  plugins: [],
}

---
title: Web Development dengan Framework ReactJS (GatsbyJS) Beserta Contoh Pembuatan Web Modern
slug: web-development-dengan-framework-reactjs-beserta-contoh-kasus
tag: Web
image: ../images/web-dev.jpg
---

# Apa itu Gatsby?
Gatsby adalah kerangka kerja sumber terbuka untuk membangun situs web dan aplikasi modern yang cepat menggunakan React. Ini memungkinkan pengembang untuk membuat situs web statis yang sangat cepat menggunakan React dan memungkinkan integrasi data dari berbagai sumber seperti CMS tanpa kepala, layanan SaaS, API, basis data, sistem file, dan lainnya. 

Gatsby menghasilkan halaman HTML statis pada waktu pembangunan, sehingga situs memuat dengan sangat cepat. Ini menggunakan teknik kinerja web modern seperti prefetching sumber daya, pemisahan kode, dan lazy loading, optimasi gambar, dan inlining CSS kritis. Halaman HTML yang dibangun secara statis juga berarti Gatsby pada tahun 2024 memiliki kemampuan SEO yang sangat baik secara otomatis.

import React from "react"
import { Link } from "gatsby"

const Layout = ({children}) => {
    const linkStyle = `
    Hover:opacity-70 
    text-sm
    sm:text-lg
    `
    const logoStyle = `
    text-white
    font-roboto
    sm:text-base
    text-sm
    `
return (
        <div>
            <nav className="flex sm:justify-between justify-around items-center bg-blue-950 lg:px-20 sm:px-6 py-8 text-gray-100">
                <h3 className={logoStyle}>My Blog</h3>
                <ul className="flex space-x-4">
                    <li className={linkStyle}>
                        <Link to="/">Home</Link>
                    </li>
                    <li className={linkStyle}>
                        <Link to="/contact">Contact</Link>
                    </li>
                    <li className={linkStyle}>
                        <Link to="/about">About</Link>
                    </li>
                </ul>
            </nav>
            <main>{children}</main>

            <footer className="text-center py-8 bg-blue-950 text-gray-100">
                <p>
                    Copyright 2024 My Blog
                </p>
            </footer>
        </div>
    )
}

export default Layout 

import React from "react"

const Header = () => {
    return (
        <header className="bg-blue-950 text-gray-100 pt-16 pb-10 text-center">
            <h1 className="font-semibold font-roboto lg:text-5xl sm:text-4xl text-2xl pb-4">
                Welcome to My Blog
            </h1>
            <p className="lg:text-2xl sm:text-lg text-sm font-light">
                Berbagi pengalaman dan pengetahuan dibidang IT dan Digital Marketing
            </p>
        </header>
    )
}

export default Header

import React from "react"
import { Link } from "gatsby"
import { GatsbyImage } from "gatsby-plugin-image"
import exp from "constants"

const BlogItem = ({alt, image, slug, title}) => {
    return (
        <div className="hover:opacity-50">
            <Link to={`/${slug}`}>
                <GatsbyImage image={image}
                alt={alt} className="max-h-[2000px]"
                />
                <h3 className="font-semibold text-block max-w-4/5 text-center mt-2 capitalize sm:text-base text-sm">{title}</h3>
            </Link>
        </div>
    )
}

export default BlogItem

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import BlogItem from "./blogItem"

const Blog = () => {
    const articles = useStaticQuery(graphql`
        {
          allMarkdownRemark {
            nodes {
                frontmatter {
                    title
                    tag
                    slug
                    image {
                        childImageSharp {
                            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
                                } 
                            }
                        }
                    html
                }
            }  
        }
    `)

    const allArticles = articles.allMarkdownRemark.node.map(( item, index ) => (
            <BlogItem
            key={index}
            image={item.frontmatter.image.childImageSharp.gatsbyImageData}
            slug={item.frontmatter.slug}
            alt={item.frontmatter.title}
            title={item.frontmatter.title}
            />
        )
    )
    return (
        <div className="px-10 py-12">
            <h3 className="text-2xl font-roboto">Tip dan Trik IT dan Digital Marketing</h3>
            <div className="grid md:grid-cols-3 grid-cols-2 gap-x-4 gap-y-10 mt-8">
            {allArticles}
            </div>            
        </div>
    )
}

export default Blog

import React from "react"
import Layout from "../component/Layout"
import AboutPage from "../components/AboutPage"
const About = () => {
    return (
        <Layout>
            <AboutPage/>
        </Layout>
    )
}

export default About

import React from 'react'
import Layout from "../components/Layout"
import ContactPage from "../components/ContactPage"

const Contact = () => {
    return (
        <Layout>
            <ContactPage/>
        </Layout>
    )
}

export default Contact

import React from "react"
import {graphql} from "gatsby"
import Layout from "../components/Layout"
import { GatsbyImage } from "gatsby-plugin-image"

const Article = ({data}) => {
    const { html } = data.markdownRemark
    const { title, tag, image } = data.markdownRemark.frontmatter
    return(
      <Layout>
        <div className="w-4/5 mx-auto mt-9 article">
            <GatsbyImage image={image.childImageSharp.gatsbyImageData} className=" md:h-96 h-60"/>

            <section className="py-10">
                <span className="bg-gray-200 py-1 px-2 font-semibold">{tag}</span>
                <h2 className="font-semibold md:text-3xl text-xl
 py-4 capitalize">{title}</h2>

                <div dangerouslySetInnerHTML={{ __html: html }}></div>


                <p className="pt-8">Published in the {tag} category</p>
            </section>
        </div>
        </Layout>
    )
}

export default Article

export const query = graphql`
  query ArticleQuery($slug: String) {
    markdownRemark(frontmatter: {slug: {eq: $slug}}) {
      html
      frontmatter {
        title
            tag
            image {
                childImageSharp {
                    gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
                }
            }
      }
    }
  }
`

import React from "react"
import {graphql} from "gatsby"
import Layout from "../components/Layout"
import { GatsbyImage } from "gatsby-plugin-image"

const Article = ({data}) => {
    const { html } = data.markdownRemark
    const { title, tag, image } = data.markdownRemark.frontmatter
    return(
      <Layout>
        <div className="w-4/5 mx-auto mt-9 article">
            <GatsbyImage image={image.childImageSharp.gatsbyImageData} className=" md:h-96 h-60"/>

            <section className="py-10">
                <span className="bg-gray-200 py-1 px-2 font-semibold">{tag}</span>
                <h2 className="font-semibold md:text-3xl text-xl
 py-4 capitalize">{title}</h2>

                <div dangerouslySetInnerHTML={{ __html: html }}></div>


                <p className="pt-8">Published in the {tag} category</p>
            </section>
        </div>
        </Layout>
    )
}

export default Article

export const query = graphql`
  query ArticleQuery($slug: String) {
    markdownRemark(frontmatter: {slug: {eq: $slug}}) {
      html
      frontmatter {
        title
            tag
            image {
                childImageSharp {
                    gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED)
                }
            }
      }
    }
  }
`