Tutorial Gatsby Static Site Generator

Aflați cum să utilizați Gatsby (Versiunea 3) în acest curs complet pentru începători. Gatsby este un generator static de site-uri care face rapidă dezvoltarea site-urilor web. Veți învăța cum să creați un site de rețete.

💻 Cod: https://github.com/john-smilga/gatsby-v3-tutorial-recipes

✏️ Curs de la John Smilga de Coding Addict. Vezi canalul lui: https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA

⭐️ Conținutul cursului ⭐️
⌨️ (0:00:00) Introducere
⌨️ (0:00:56) Gatsby Info
⌨️ (0:02:46) Structura cursului
⌨️ (0:03:28) Cerințe pentru curs
⌨️ (0:05:09) Vs Cod
⌨️ (0:06:02) Introducere modul
⌨️ (0:07:29) Instalați Gatsby-Cli
⌨️ (0:09:29) Configurați noul proiect Gatsby
⌨️ (0:15:07) Structura folderului
⌨️ (0:29:42) Prima pagină
⌨️ (0:38:26) Pagina de eroare
⌨️ (0:41:01) Structură imbricată
⌨️ (0:44:41) Link-uri
⌨️ (0:51:21) Navbar
⌨️ (0:56:26) Componentă de aspect
⌨️ (1:05:44) Introducere pentru modulul CSS
⌨️ (1:06:47) CSS inline
⌨️ (1:08:27) CSS global
⌨️ (1:14:01) Probleme de denumire CSS
⌨️ (1:17:50) Module CSS
⌨️ (1:28:04) Componente cu stil
⌨️ (1:40:51) Curățenie în casă
⌨️ (1:48:33) Stiluri
⌨️ (1:53:05) Subsol
⌨️ (1:56:31) Pagina de eroare
⌨️ (1:57:38) Pagina de contact
⌨️ (2:03:45) Active și icoane
⌨️ (2:10:56) Configurare Navbar
⌨️ (2:20:11) Navbar Logic
⌨️ (2:24:51) Informații despre imaginea lui Gatsby
⌨️ (2:28:30) Configurare Sandbox
⌨️ (2:34:36) Instalați pluginul
⌨️ (2:38:15) Configurare imagine statică
⌨️ (2:45:41) Recuzită și opțiuni partajate
⌨️ (2:50:20) Exemplu de opțiuni
⌨️ (2:58:10) Toate aspectele
⌨️ (3:04:29) Înălțime
⌨️ (3:09:04) Despre pagina
⌨️ (3:18:56) Pagina eroului
⌨️ (3:25:19) Gatsby și GraphQL Introducere
⌨️ (3:28:39) Gatsby DataLayer Pe scurt
⌨️ (3:30:20) Interfață GraphiQL
⌨️ (3:36:35) SiteMetadata
⌨️ (3:42:14) Prima interogare
⌨️ (3:51:27) Explorator
⌨️ (3:53:52) Interogare statică vs interogare pe pagină
⌨️ (3:55:18) UseStaticQuery Hook – Exportator de cod
⌨️ (4:01:34) UseStaticQuery, GraphQL – De la zero
⌨️ (4:12:05) Alias de câmp
⌨️ (4:15:06) Interogare cheie, nume și Gatsby Clean
⌨️ (4:18:19) Interogare pe pagină
⌨️ (4:25:20) Instalați pluginul SOURCE-FILESYSTEM
⌨️ (4:35:33) Câmp AllFile
⌨️ (4:41:50) Argumente de interogare
⌨️ (4:50:03) Remediere cale statică
⌨️ (4:51:26) Fișier – Câmp
⌨️ (4:54:48) SourceInstanceName – Argument
⌨️ (4:56:56) Configurarea galeriei
⌨️ (5:00:47) GatsbyImageData – Câmp
⌨️ (5:08:56) Galerie de randare
⌨️ (5:20:41) GetImage – Funcție de ajutor
⌨️ (5:25:23) Date locale VS externe
⌨️ (5:26:50) CMS fără cap
⌨️ (5:28:49) Mulțumit
⌨️ (5:29:37) Configurați un cont Contentful
⌨️ (5:33:14) Tip de conținut
⌨️ (5:40:07) Conținut
⌨️ (5:47:36) Connect Gatsby – Mulțumit
⌨️ (5:52:36) Variabile ENV
⌨️ (5:58:48) AllContentfulRecipe – Câmp
⌨️ (6:05:57) Componenta AllRecipes
⌨️ (6:15:00) Componenta Listă Rețete
⌨️ (6:26:59) Rețete recomandate
⌨️ (6:37:50) Configurare utilitare
⌨️ (6:42:47) Funcția de ajutor
⌨️ (6:50:27) Lista de etichete
⌨️ (6:54:14) Pagina de etichete
⌨️ (7:00:22) Configurare pagină șablon de rețetă
⌨️ (7:04:57) Descrierea paginii șablon de rețetă
⌨️ (7:14:00) Slugify
⌨️ (7:18:15) Variabile de interogare
⌨️ (7:27:05) Interogare șablon de rețetă
⌨️ (7:34:27) Retur șablon de rețetă
⌨️ (7:46:45) Configurare GATSBY-NODE.JS
⌨️ (7:50:43) Creați pagini de etichete în mod programatic
⌨️ (8:08:36) Retur șablon de etichetă
⌨️ (8:20:07) Posibilă remediere a erorilor
⌨️ (8:26:53) Fonturi
⌨️ (8:32:40) Formular de contact
⌨️ (8:37:16) FAVICON
⌨️ (8:39:23) Configurare SEO
⌨️ (8:45:40) SEO – Recuzită
⌨️ (8:51:34) SEO – Complet
⌨️ (9:01:05) Informații Netlify
⌨️ (9:01:58) Netlify – Trageți și plasați
⌨️ (9:05:32) Desfășurare continuă
⌨️ (9:14:44) Webhooks

🎉 Mulțumim susținătorilor noștri Campion și Sponsor:
👾 Wong Voon Jinq
👾 hexploatare
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite

—

Învățați să codificați gratuit și obțineți un job de dezvoltator: https://www.freecodecamp.org

Citiți sute de articole despre programare: https://freecodecamp.org/news

Cursuri interesante:

Leave a Reply