Как создать свой первый статический сайт с Gatsby

Думаете о том, чтобы попасть на подножку JAMStack ? Если ваш ответ Да , то Гэтсби , один из самых популярных генераторов статических сайтов, может быть именно тем, что вы ищете.

JAM означает JavaScript, API и разметку. Другими словами, когда JavaScript в клиенте заботится о динамических частях сайта или приложения во время цикла запрос / ответ, все процессы на стороне сервера выполняются с использованием API, доступ к которым осуществляется через HTTPS через JavaScript, и шаблонная разметка предварительно создается в время развертывания часто с использованием статического генератора сайтов, это JAMStack. Он эффективен, недорог в масштабах и обеспечивает лучшую безопасность и удобство работы с разработчиками.

Зачем использовать статический сайт

Статическая модель сайта подходит не для всех видов проектов, но в этом случае она имеет ряд преимуществ. Вот несколько из них.

скорость

Время загрузки веб-сайта в браузере при первом запросе является важным фактором для удобства пользователей. Пользователи очень быстро теряют терпение, и на медленных соединениях ситуация может только ухудшиться. Отсутствие вызовов базы данных и предварительно сгенерированный контент делают статические сайты действительно быстро загружаемыми.

Статический сайт состоит из статических файлов, которые можно легко обслуживать по всему миру, используя сети доставки контента (CDN). Это позволяет использовать центр обработки данных, который находится ближе к месту, откуда сделан запрос.

Упрощенный хостинг

Хостинг для статических сайтов можно настроить в одно мгновение. Поскольку нет базы данных или серверного кода, специальных языков или платформ для поддержки, все, что нужно сделать хостингу, — это обслуживать статические файлы.

Лучшая безопасность

Без серверного кода или базы данных хакерам нечего взламывать. Нет проблем с обновлением системы безопасности с помощью исправлений и исправлений. Все это означает гораздо больше душевного спокойствия, когда речь заходит о безопасности вашего статического сайта.

Лучший опыт разработчиков

Настроить статический веб-сайт с хостинговой компанией, такой как Netlify или Zeit, очень просто, а при постоянном развертывании вы просто вносите изменения в выбранный вами репозиторий кода, и они сразу же отражаются в живой версии.

Что такое Гэтсби?

Gatsby — один из самых популярных генераторов статических сайтов. Он построен с React , а это значит, что все достоинства React у вас под рукой, что позволяет вам использовать его возможности для создания интерактивных компонентов прямо на вашем статическом веб-сайте. Gatsby также построен на основе GraphQL , поэтому вы можете запрашивать данные и отображать их на своем статическом веб-сайте любым удобным для вас способом.

Установка Gatsby и создание вашего проекта

Gatsby собирается с помощью Webpack , но вам не нужно беспокоиться о сложных маневрах по настройке — Gatsby CLI позаботится обо всем.

Я предполагаю, что у вас установлен Node.js локально, что означает, что у вас также есть npm . Вы можете использовать npm , менеджер пакетов Node, для установки пакетов JS для вашего сайта. Вы можете узнать больше об использовании npm здесь .

Первое, что вам нужно сделать, это установить интерфейс командной строки Gatsby. Это пакет npm , который позволяет вам создать сайт Gatsby за несколько секунд. В своем терминале напишите:

 npm install --g gatsby-cli 

С установленным на вашем компьютере интерфейсом Gasby CLI вы можете создать свой веб-сайт. Я назову это sitepoint-demo , но вы можете называть это как хотите. В своем терминале введите:

 gatsby new sitepoint-demo 

После того как Gatsby CLI установит все необходимые файлы и настроит их соответствующим образом, у вас будет полнофункциональный веб-сайт Gatsby, готовый к настройке и настройке. Чтобы получить к нему доступ, перейдите в папку sitepoint-demo :

 cd sitepoint-demo 

 gatsby develop 

 gatsby new [SITE_DIRECTORY_NAME] [URL_OF_STARTER_GITHUB_REPO] 

 gatsby new sitepoint-demo https://github.com/Vagr9K/gatsby-material-starter 

  import React from "react" import { Link } from "gatsby" import Layout from "../components/layout" import Image from "../components/image" import SEO from "../components/seo" const IndexPage = () => ( <Layout> <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} /> <h1>Hi people</h1> <p>Welcome to your new Gatsby site.</p> <p>Now go build something great.</p> <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}> <Image /> </div> <Link to="/page-2/">Go to page 2</Link> </Layout> ) export default IndexPage 

  <p>Welcome to my SitePoint Demo Site!</p> 

  import React from "react" const AboutPage = () => <h1>About Me</h1> export default AboutPage 

  <Link to="/page-2/">Go to page 2</Link> 

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

  body { background-color: yellow; } 

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

  import "./layout.css" 

  body { color: hsla(0, 0%, 0%, 0.8); font-family: georgia, serif; font-weight: normal; word-wrap: break-word; font-kerning: normal; -moz-font-feature-settings: "kern", "liga", "clig", "calt"; -ms-font-feature-settings: "kern", "liga", "clig", "calt"; -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; font-feature-settings: "kern", "liga", "clig", "calt"; } 

  background-color: yellow; 

  import React from "react" import fancyParagraphStyles from "./fancy-paragraph.module.css" const FancyParagraph = (props) => <p className={fancyParagraphStyles.fancy}>{props.paragraphText}</p> export default FancyParagraph 

  .fancy { font-size: 1.5rem; text-align: center; line-height: 1.2; padding: 0.5rem; color: #fff; background-color: rebeccapurple; font-weight: 800; font-style: italic; text-transform: uppercase; } 

  import Layout from "../components/layout" import FancyParagraph from "../components/fancy-paragraph" 

  const AboutPage = () => ( <Layout> <h1>About Me</h1> <FancyParagraph paragraphText="Styled with CSS Modules." /> </Layout> ) 

  <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}> <Image /> </div> 

 gatsby build