Gatsby este un generator de site static pentru React care a lansat prima sa versiune majoră luna trecută. Este un instrument care nu doar schelează proiecte (sau site-uri web) pentru dvs., ci susține că aceste site-uri au performanțe rapide. Dacă decideți să utilizați Gatsby, vă veți bucura de puterea celor mai noi tehnologii web, cum ar fi React.js, Webpack și așa mai departe.

Există o mulțime de paradigme moderne de care Gatsby are grijă ca dezvoltatorul său din culise să înceapă construirea și lansarea proiectului lor. Un alt lucru interesant despre Gatsby care îmi place este ecosistemul său de date în continuă creștere. Permite unui dezvoltator să aducă date direct într-o aplicație generată de Gatsby folosind GraphQL.

Iată câteva dintre avantajele utilizării Gatsby:

  • Codul HTML este generat pe partea de server
  • Ușor extensibil de ecosistemul plugin
  • Sistem de construcție bazat pe Webpack preconfigurat (nu este nevoie să vă rupeți capul)
  • Optimizat pentru viteză. Gatsby încarcă doar părțile critice, astfel încât site-ul dvs. să se încarce cât mai repede posibil. Odată încărcat, Gatsby prefigurează resursele pentru alte pagini, astfel încât să faceți clic pe site să fie incredibil de rapid.
  • Rutare automată bazată pe structura directorului. (nu este nevoie de o bibliotecă de rutare / navigare separată)

Dacă știți minunatul React, puteți începe cu Gatsbyjs în cel mai scurt timp citind acest tutorial. Nu vă cer să fiți avansați cu React, ci doar familiarizați cu conceptele sale. Dacă doriți să vă reîmprospătați cunoștințele despre acest lucru sau să aflați mai multe despre acesta, vă recomand următoarele linkuri:

Destul cu introducerea. Să începem.

Instalarea Gatsby CLI

Vom folosi npm pentru a instala primul și instrumentul nostru de bază de care avem nevoie pentru a configura orice proiect Gatsby. Poți să folosești yarn de asemenea. În terminalul dvs., vă rugăm să executați această comandă:

npm install --global gatsby-cli

S-ar putea să fie nevoie să adăugați sudo la începutul comenzii dacă dă o eroare pentru permisiuni.

Pentru a începe un nou site, accesați direct proiectul dorit. Selectați un loc din sistem în care s-ar putea să stocați toate locurile de joacă sau aplicațiile în etapa inițială și apoi în terminal:

gatsby new first-gatsby-site

Puteți denumi proiectul dvs. orice doriți, eu l-am numit doar pentru concizie.

Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Finalizați instalarea și configurarea proiectului. Apoi schimbați directorul în folderul nou creat. Alerga gatsby develop din linia de comandă pentru a vedea site-ul dvs. rulând live la http: // localhost: 8000.

1611542348 300 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

În fereastra browserului, aplicația implicită Gatsby.js arată astfel:

1611542348 680 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Lăsați comanda în execuție, deoarece activează Hot Reloading. Acum orice modificare pe care o facem proiectului nostru va fi reflectată direct, fără a actualiza pagina.

În prezent, aplicația noastră conține două pagini. Prin urmare, rutarea minimă este deja realizată pentru noi. Înainte de a ne scufunda în cod și de a aduce modificări la acesta, trebuie să înțelegem structura proiectului. Apoi îl puteți folosi manipulându-l în proiectele viitoare.

Scufundări adânci în structura proiectului

1611542348 706 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Fiecare proiect Gatsby conține cel puțin aceste fișiere. S-ar putea să fiți familiarizați cu unele precum node_modules, public director, care este servit atunci când este implementat. De asemenea, conține package.json, care conține metadatele oricărei aplicații Javascript moderne.

Principalul nostru accent și preocupare sunt în director src și fișier gatsby-config.js.Acestea conțin metadatele și alte informații esențiale despre aplicația noastră actuală.

În interiorul src/ există două subdirectoare: layouts/ și pages/.

layouts/ conține alte două fișiere: index.css și index.js. Acestea servesc drept punct de plecare al aplicației noastre.

import React from "react";
import PropTypes from "prop-types";
import Link from "gatsby-link";
import Helmet from "react-helmet";

import "./index.css";

const Header = () => (
  <div
    style={{
      background: "rebeccapurple",
      marginBottom: "1.45rem"
    }}
  >
    <div
      style={{
        margin: "0 auto",
        maxWidth: 960,
        padding: "1.45rem 1.0875rem"
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: "white",
            textDecoration: "none"
          }}
        >
          Gatsby
        </Link>
      </h1>
    </div>
  </div>
);

const TemplateWrapper = ({ children }) => (
  <div>
    <Helmet
      title="My First Gatsby Site"
      meta={[
        { name: "author", content: "amanhimself" },
        { name: "keywords", content: "sample, something" }
      ]}
    />
    <Header />
    <div
      style={{
        margin: "0 auto",
        maxWidth: 960,
        padding: "0px 1.0875rem 1.45rem",
        paddingTop: 0
      }}
    >
      {children()}
    </div>
  </div>
);

TemplateWrapper.propTypes = {
  children: PropTypes.func
};

export default TemplateWrapper;

Header componenta conține stilurile și marcajul care servește în prezent ca antet al aplicației noastre. Se reflectă în fiecare pagină de TempplateWrapper care este componenta noastră principală de aspect în aplicație. Acest lucru înseamnă cu siguranță că această componentă poate fi utilizată pentru afișarea meniului de navigare (pe care o vom face într-un timp) sau a unui subsol.

Link eticheta pe care o vedeți este modul în care Gatsby a permis vizitatorilor noștri să navigheze de la o pagină la alta. react-helmet bibliotecă care servește scopului de a atașa informații de antet în HTML. În prezent este generat de JSX. Puteți citi despre această bibliotecă utilă, pentru începători, pe site-ul său doc oficial aici.

Observați {children()} recuzită. Aceasta este o funcție care se execută în codul JSX pentru a determina locația exactă pentru componentele secundare de redat.

Pagina principală a aplicației

Al doilea director în cauză pages/ conțin restul paginilor care construiesc aplicația noastră. Sunt componente React simple. Să aruncăm o privire la index.js fișier din acest director care servește în prezent ca pagina principală a aplicației noastre.

import React from "react";
import Link from "gatsby-link";

const IndexPage = () => (
  <div>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
  </div>
);

export default IndexPage;

În mod similar, veți găsi codul în page-2.js. Dacă în fereastra browserului nostru, încercăm să navigăm la a doua pagină, observăm adresa URL a site-ului atunci când se încarcă a doua pagină.

1611542349 925 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Este la fel ca numele fișierului. De asemenea, folosim Link eticheta de la Gatsby pentru a naviga înapoi la pagina de pornire.

Să adăugăm o altă pagină pe site-ul nostru. În interiorul pages director, creați un fișier nou page-3.js.

import React from "react";
import Link from "gatsby-link";

const ThridPage = () => (
  <div>
    <h1>Third Page</h1>
    <p>This is my first Gtasby site</p>
    <Link to="/page-2/">Back to Page 2</Link>
    <br />
    <Link to="/">Go back to the homepage</Link>
  </div>
);

export default ThridPage;

Acum să adăugăm linkul către noua noastră pagină la pagina principală. Deschis index.js fişier:

import React from "react";
import Link from "gatsby-link";

const IndexPage = () => (
  <div>
    <h1>Hi people</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <Link to="/page-2/">Go to page 2</Link>
    <br />
    <Link to="/page-3">New Page!</Link>
  </div>
);

export default IndexPage;
1611542349 358 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Acest lucru apare corect pe pagina noastră. Observați 404.js fișier din director. Acest fișier este redat atunci când nu este găsită nicio adresă URL dorită. Mai multe informații pot fi citite în documente oficiale Gatsby.

Acum, pentru a face lucrurile puțin mai interesante. Să adăugăm un meniu de navigare în Header componentă a aspectului nostru.

Adăugarea meniului de navigare

Deschis layouts/index.js iar în interiorul Header componentă, adăugați următorul cod:

const Header = () => (
  <div
    style={{
      background: "rebeccapurple",
      marginBottom: "1.45rem"
    }}
  >
    <div
      style={{
        margin: "0 auto",
        maxWidth: 960,
        padding: "1.45rem 1.0875rem"
      }}
    >
      <h1 style={{ margin: 0 }}>
        <Link
          to="/"
          style={{
            color: "white",
            textDecoration: "none"
          }}
        >
          Gatsby
        </Link>
        <ul style={{ listStyle: "none", float: "right" }}>
          <li style={{ display: "inline-block", marginRight: "1rem" }}>
            <Link
              style={{
                color: "white",
                textDecoration: "none",
                fontSize: "x-large"
              }}
              to="/"
            >
              Home
            </Link>
          </li>
          <li style={{ display: "inline-block", marginRight: "1rem" }}>
            <Link
              style={{
                color: "white",
                textDecoration: "none",
                fontSize: "x-large"
              }}
              to="/page-2"
            >
              Page 2
            </Link>
          </li>
          <li style={{ display: "inline-block", marginRight: "1rem" }}>
            <Link
              style={{
                color: "white",
                textDecoration: "none",
                fontSize: "x-large"
              }}
              to="/page-3"
            >
              Page 3
            </Link>
          </li>
        </ul>
      </h1>
    </div>
  </div>
);

Dacă salvați fișierul, rezultatele sunt reflectate imediat pe pagina de pornire și pe fiecare pagină.

1611542349 654 Gatsbyjs Cum sa configurati si sa utilizati React Static Site

Fișier de configurare

https://gist.github.com/dfbefb5a09c93f1816198d9db253dd6c

Ultimul dosar important al preocupării noastre este gatsby-config.js în folderul rădăcină. Acest fișier poate conține metadatele site-ului și informații suplimentare, cum ar fi pluginurile pe care le instalăm folosind npm comanda. Cu toate acestea, sfera de utilizare și preocuparea lor se referă doar la un proiect generat folosind Gatsby CLI. În mod implicit, pluginul gatsby-plugin-react-helmet este instalat.

Este listată o listă completă a pluginurilor aici.

Implementarea site-ului nostru static

Până acum am ieșit cu un site static minim care servește scopului acestui parcurs. Ultimul pas pe care vreau să îl concentrez este pe implementare. Voi folosi paginile GitHub pentru implementare.

Pentru a implementa un proiect pe paginile GitHub, asigurați-vă că directorul dvs. de lucru curent este inițializat ca depozit git și găzduit pe GitHub. Dacă este bine, permiteți-ne să adăugăm un modul numit gh-pages ca dependență de dev.

npm install --save-dev gh-pages

Adăugați un script de implementare în package.json:

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

În gatsby.config.js adăugați prefixul de cale pentru repo astfel:

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`
  },
  pathPrefix: `/first-gatsby-site`,
  plugins: [`gatsby-plugin-react-helmet`]
};

Vedea documente oficiale pe prefixarea căii.

Acum, de la terminalul dvs., executați:

npm run deploy

Grozav! Site-ul dvs. este acum activ https://username.github.io/project-name/.

Puteți găsi codul complet al acestui proiect aici GitHub Repo

Pentru mai multe întrebări, contactați-mă pe Stare de nervozitate, sau citiți mai multe despre mine la my site-ul web.