$  gatsby new gatsby-starter-default

$ cd gatsby-starter-default

$ gatsby develop

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

$ npx tailwindcss init -p

‘gatsby-plugin-postcss’,

“./src/pages/**/*.{js,jsx,ts,tsx}”,
“./src/components/**/*.{js,jsx,ts,tsx}”,

$ mkdir -p src/styles

$ touch global.css

$ cd src/styles

$ vim global.css

@tailwind base;

@tailwind components;

@tailwind utilities;

$ vim gatsby-browser.js

import ‘./src/styles/global.css’

$ gatsby develop

import * as React from “react”
import { Link } from “gatsby”

import gatsbyLogo from “../images/gatsby-icon.png” // Import gambar logo Gatsby

const Header = ({ siteTitle }) => (

<header className=”flex items-center justify-between mx-auto max-w-screen-lg px-4 py-4″>
  <Link to=”/”
  className=”text-lg font-semibold text-gray-800 hover:text-blue-500 focus:text-blue-500 focus:outline-none”
  >
   {siteTitle}
  </Link>

  /* Menggunakan gambar logo resmi dari Gatsby */
      <img
       alt=”Gatsby logo”
       width={30}
      style={{ margin: 0 }}
      src={gatsbyLogo} // Menggunakan variabel yang berisi path gambar logo Gatsby
      />               

  </header>

)

export default Header

import * as React from “react”
import { useStaticQuery, graphql } from “gatsby”
import Header from “./header”
const Layout = ({ children }) => {

const data = useStaticQuery(graphql`
  query SiteTitleQuery {
   site {
      siteMetadata {
         title
            }
          }
       }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata?.title || `Title`} />
      <div className=”mx-auto max-w-screen-lg px-4″>
        <main>{children}</main>
        <footer className=”mt-5 text-sm”>
          © {new Date().getFullYear()} &middot; Built with
          {` `}
          <a href=”https://www.gatsbyjs.com” className=”text-blue-500 hover:text-blue-700″>Gatsby</a>
        </footer>
      </div>
    </>
  )
}
export default Layout

import * as React from “react”
import { Link } from “gatsby”
import { StaticImage } from “gatsby-plugin-image”
import Layout from “../components/layout”
import Seo from “../components/seo”

const links = [
  {
    text: “Tutorial”,
    url: “https://www.gatsbyjs.com/docs/tutorial”,
    description:
      “A great place to get started if you’re new to web development. Designed to guide you through setting up your first Gatsby site.”,
  },

  {
    text: “Examples”,
    url: “https://github.com/gatsbyjs/gatsby/tree/master/examples”,
    description:
      “A collection of websites ranging from very basic to complex/complete that illustrate how to accomplish specific tasks within your Gatsby sites.”,
  },
  {
    text: “Plugin Library”,
    url: “https://www.gatsbyjs.com/plugins”,
    description:
      “Learn how to add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.”,
  },

  {
    text: “Build and Host”,
    url: “https://www.gatsbyjs.com/cloud”,
    description:
      “Now you’re ready to show the world! Give your Gatsby site superpowers: Build and host on Gatsby Cloud. Get started for free!”,
  },

]
const samplePageLinks = [

  {
    text: “Page 2”,
    url: “/page-2”,
    description:
      “A simple example of linking to another page within a Gatsby site”,
  },
  { text: “TypeScript”, url: “/using-typescript” },
  { text: “Server Side Rendering”, url: “/using-ssr” },
  { text: “Deferred Static Generation”, url: “/using-dsg” },
]

const moreLinks = [
  { text: “Join us on Discord”, url: “https://gatsby.dev/discord” },
  {
    text: “Documentation”,
    url: “https://gatsbyjs.com/docs/”,
  },
  {
    text: “Starters”,
    url: “https://gatsbyjs.com/starters/”,
  },
  {
    text: “Showcase”,
    url: “https://gatsbyjs.com/showcase/”,
  },
  {
    text: “Contributing”,
    url: “https://www.gatsbyjs.com/contributing/”,
  },
  { text: “Issues”, url: “https://github.com/gatsbyjs/gatsby/issues” },
]
const utmParameters = `?utm_source=starter&utm_medium=start-page&utm_campaign=default-starter`

const IndexPage = () => (

  <Layout>
    <Seo title=”Home” />
    <div className=”text-center”>
      <StaticImage
        src=”../images/example.png”
        loading=”eager”
        width={64}
        quality={95}
        formats={[“auto”, “webp”, “avif”]}
        alt=””
        style={{ marginBottom: `var(–space-3)` }}
      />
      <h1>
        Welcome to <b>Gatsby!</b>
      </h1>
      <p className=”mt-4 mb-8″>
        <b>Example pages:</b>{” “}
        {samplePageLinks.map((link, i) => (
          <React.Fragment key={link.url}>
            <Link to={link.url}>{link.text}</Link>
            {i !== samplePageLinks.length – 1 && <> · </>}
          </React.Fragment>
        ))}
        <br />
        Edit <code className=”text-gray-700″>src/pages/index.js</code> to update this page.
      </p>
    </div>
    <ul className=”list-none”>
      {links.map(link => (
        <li key={link.url} className=”mb-8″>
          <a
            className=”text-blue-500 hover:underline”
            href={`${link.url}${utmParameters}`}
          >
            {link.text} ↗
          </a>
          <p className=”mt-2 text-sm”>{link.description}</p>
        </li>
      ))}
    </ul>
    <div className=”mt-8″>
      {moreLinks.map((link, i) => (
        <React.Fragment key={link.url}>
          <a className=”text-blue-500 hover:underline” href={`${link.url}${utmParameters}`}>
            {link.text}
          </a>
          {i !== moreLinks.length – 1 && <> · </>}
        </React.Fragment>
      ))}
    </div>
  </Layout>
)

export default IndexPage