Рубрики
Без рубрики

Как построить свой первый сайт Jamstack: Полное руководство

Полное руководство по созданию вашего первого блога Jamstack, от начала до конца. Давайте построим сайт Jamstack вместе!. С тегом JavaScript, WebDev, новичков, учебника.

Вам интересно, что все эта новая ажиотаж за джойста? Что такое сайт Jamstack? Как мне построить? Где я его развернуть?

Если вы задавали какие -либо из этих вопросов за последние пару месяцев, эта статья для вас. Мы узнаем, что такое Jamstack, и как построить наш первый блог Jamstack.

Если у вас уже есть идея, что такое сайт Jamstack, вы можете пропустить этот раздел и перейти прямо к:

  • Jamstack Static Generators
  • Где размещать свой сайт Jamstack
  • Создание вашего первого сайта Jamstack
  • Развертывание вашего сайта

Что такое Jamstack?

Jamstack – это не структура или продукт. Это способ ведения дел, и это не так новое. Но применение этого термина к этому методу построения сайтов помогает увеличить его популярность, поэтому я за него. Jeremymorgan.com является сайтом Jamstack с 2010 года.

Jamstack:

  • JavaScript
  • API
  • Разметка

Но это вам не очень много говорит. Как они работают вместе?

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

Какие веб -сайты были ранее

В прошлом у нас было два типа веб -сайтов. Они были статичными и динамичными.

Статические веб -сайты

A Статический веб -сайт это сайт, который представляет собой лишь кучу текстовых HTML-файлов с CSS и изображениями, выдвинутыми через веб-сервер.

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

Пример: Большинство веб -страниц 90 -х годов

Динамические веб -сайты

A Динамический веб -сайт Запускает приложения в бэкэнде, которые генерируют HTML на лету и доставляют его в браузер. Вот как мы строили веб -сайты уже около 20 лет.

Динамичный веб -сайт не так быстр, как статический, но он интерактивен. HTML отправляется в браузер, но пользователь может взаимодействовать с ним и отправлять сообщения обратно на веб -сервер. Затем он генерирует новый HTML, который будет отправлен обратно.

Пример: WordPress, Drupal, Sitecore и около миллиона других

Джамстак веб -сайты

A Веб -сайт Jamstack лучший из обоих миров. Вы получаете скорость обслуживания статических файлов, но в этих статических файлах JavaScript, который общается с API.

Так что, если эта диаграмма сбивает с толку, позвольте мне объяснить, вернувшись немного.

Вы не пишете статические HTML -файлы, они генерируются для вас со статическим генератором сайта.

Первая часть вашего рабочего процесса – создание и редактирование файлов разметки. Если вы никогда не работали с Marchdown, вот основы, и вот Отличный курс на нем Анкет

После того, как вы закончите, вы запускаете файлы через статический генератор сайтов. Он генерирует все ваши HTML, CSS и JavaScript. Затем вы размещаете их на любом статическом файловом веб -сервере (предпочтительно CDN).

Эти файлы могут быть поданы молниеносной, потому что они просто текст. Файлы JavaScript могут затем общаться с API, чтобы получить динамические данные. Вы даже можете прикрепить его к базе данных.

Таким образом, вместо модели WordPress, например, это служба PHP, подключенная к базе данных и генерации HTML -страниц, HTML уже генерируется. JavaScript может затем общаться с базой данных.

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

Вот почему люди сейчас так много говорят о сайтах Jamstack.

Каковы преимущества?

Статические генераторы веб -сайта и JavaScript, общающиеся с API, были уже некоторое время. Как я уже сказал, Jeremymorgan.com Прошел этот путь в течение 10 лет. Наиболее значительные различия заключаются в моделях инструментов, рабочего процесса и хостинга.

Например, сейчас мой сайт построен с Хьюго Анкет Я совершаю это GitHub Репо, и он автоматически натягивается и построен на NetLify . NetLify недействительным кеш, поэтому сайт является свежим и использует CDN для скорости.

10 лет назад я генерировал сайт с Осьминог (Jekyll Wrapper) Установка на виртуальной машине FreeBSD. Далеко от того места, где мы сейчас находимся.

Итак, вот некоторые из преимуществ:

  • Скорость – Обслуживание статических активов над CDN быстро. Действительно быстро. Вы обслуживаете предварительно построенные активы над CDN
  • Безопасность – Существует меньший «след», так как большая часть вашего сайта является статическим активом.
  • Рабочий процесс – После настройки рабочий процесс даже проще, чем WordPress или аналогичные настройки
  • Масштабирование – Если вы внезапно окажетесь на первой странице Hacker News, ваш сайт не умрет. Он увеличит (если вы используете правильные услуги)

Итак, если вы проданы на идее Jamstack, давайте продолжим, чтобы посмотреть, какие инструменты вам понадобятся.

Jamstack Static Generators

Начнем с Jamstack, вам понадобится статический генератор сайтов. Это то, что превращает ваши файлы разметки в HTML. Есть слишком много статических генераторов сайтов, чтобы перечислить их все, но вот некоторые из лучших. Я работал со многими из них в прошлом.

  • Хьюго – Я перечислил это первым, потому что это мой любимый. Он питается Go, но вам не нужно знать, иди, чтобы использовать его. Его преимущество – единственное исполняемое и чрезвычайно быстрое поколение страниц.

  • Гэтсби – Еще один потрясающий генератор. Этот оснащен JavaScript. Его самое большое преимущество – куча удивительных функций и растущее сообщество. ( Вы можете пройти Этот курс на нем и встать на скорость )

  • Jekyll – Этот питается Руби. Я использовал это для jeremymorgan.com в течение многих лет. Это очень просто и настраивается. Просто следите за этим рубиновым зависимостями.

  • Next.js – JavaScript Powered SSG. Он поддерживает статически экспортируемые приложения React, или вы можете отображать его сервер.

  • Пеликан – Этот питается от Python, и он твердый. Он имеет простой CLI и очень настраивается.

  • Hexo – Еще один статический генератор с питанием от JavaScript, этот растет в популярности. С ним очень быстро и легко работать.

Какой бы статический генератор сайтов, который вы выбрали, зависит от вас. Это зависит от вашего уровня квалификации и комфорта. JS -разработчики любят Hexo. Люди питона, такие как Пеликан. Реактируйте разработчики, как Гэтсби. Выберите то, что кажется вам лучше, и делает вас продуктивным. Если вы хотите проверить более статические генераторы сайтов, ознакомьтесь с Staticgen.com Анкет

Какой из них я выбрал?

Я выбрал Хьюго для моего сайта. Это не только потому, что я разработчик Go. На самом деле, я не изменил код GO, чтобы заставить его работать. Тем не менее, я провел много времени на оценку решений и выбрал Хьюго, потому что:

  • Это действительно быстро
  • Один исполняемый файл (меньше зависимостей)
  • Очень настраивается

Вот где я говорю о процесс выбора глубины . Итак, давайте поговорим о том, где мы можем его разместить.

Где размещать сайты Jamstack

Так что теперь вы выбираете статический генератор, и вам нужно где -то, чтобы положить его. Вы можете размещать его на любом статическом хосте. Вы можете Создайте простую виртуальную машину онлайн с Nginx и разместите его там. Тем не менее, лучшие практики с сайтами Jamstack должны поставить его на сервис с CDN.

Вот несколько отличных мест для размещения ваших сайтов Jamstack

  • NetLify – Чрезвычайно быстрый сервис, поддерживаемый CDN, вы можете прикрепить к GitHub. Бесплатно, если вы не хотите, чтобы аналитика или ваш сайт большой.
  • Vercel – Также очень быстрый и подкрепленный CDN, прикрепленный к GitHub. Также бесплатно, пока не вырастет.
  • AWS Amplify – Быстрый, мощный способ развертывания статических сайтов (и многое другое).
  • GitHub Pages – Быстрый и простой способ бесплатно публиковать статические страницы.
  • Azure статические веб -приложения – Новая услуга от Azure для размещения статических страниц. Быстрый, мощный и масштабируемый.

Есть много вариантов, но сейчас они популярны.

Какой из них я выбрал?

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

Все они были очень близки друг к другу в скорости, и все их было легко подключиться к GitHub.

Итак, готовы ли вы построить свой первый сайт Jamstack?

Создание вашего первого веб -сайта Jamstack

Для нашего первого сайта мы будем использовать Лейка . Вам нужно установить:

Обе эти ссылки покрывают Windows, Mac и Linux. Если вы используете POP! _OS (мой предпочтительный выбор), вот Полный учебник для настройки Hugo Анкет

Установите Hugo

Первым шагом является установка Хьюго. Вот полные инструкции с их сайта Анкет

Это довольно легко.

Домашний

brew install hugo

Шоколад

choco install hugo -confirm

или из источника:

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

Создайте сайт Hugo

Теперь вам нужно создать новый сайт Hugo:

hugo new site hellohugo

Теперь вам понадобится тема:

Вы можете найти хороший список Темы Хьюго здесь Анкет

Как только вы найдете тот, который вам нравится, скопируйте ссылку на репо. Я выбираю «hyde» для этого примера:

cd themes
git clone https://github.com/spf13/hyde

Затем вы должны добавить следующее в свой файл config.toml:

theme = "hyde"

Теперь создайте новый пост:

hugo new helloworld.md

Ваш пост будет выглядеть так:

--------
title: "Post"
date: 2020-05-30T13:13:42-07:00
draft: false
--------

Hello! This is the first blog post!

Добавьте немного контента и обязательно измените «черновик» на False, когда вы будете готовы к публикации.

Чтобы проверить это:

hugo serve

И вы готовы просмотреть свой блог на Localhost: 1313:

Все файлы генерируются в/public Поэтому, когда вы будете готовы опубликовать запуск:

hugo

И тогда все файлы в/public будут вашим новым сайтом.

Итак, теперь он построен, давайте развернуть его.

Развертывание вашего сайта Jamstack

Таким образом, мы собираемся развернуть этот сайт для NetLify. Во -первых, нам нужно добавить его в GitHub.

Во -первых, инициализируйте его в папке, в которой вы установили Hugo.

Примечание: Мы не строим артефакты и подталкиваем их к NetLify. Мы подталкиваем исходный код к NetLify, и NetLify будет создавать артефакты и размещать их.

git init

Теперь нам нужно добавить в нашу тему в качестве подмодуля. В моем случае, используя Хайд, выглядит так:

git rm --cached themes/hyde
git submodule add https://github.com/spf13/hyde themes/hyde

Теперь отправляйтесь в GitHub и создайте хранилище.

Теперь давайте добавим происхождение:

git remote add origin https://github.com/JeremyMorgan/HugoTestBlog.git

И потянуть:

git pull origin master

Теперь мы добавим наши новые изменения.

git add .

И совершить их.

git commit -m "initial commit"

Теперь он готов подтолкнуть к GitHub:

git push --set-upstream origin master

Теперь мы пойдем в NetLify. Вы можете создать учетную запись бесплатно, если у вас ее нет.

В NetLify мы хотим создать новый сайт из GIT:

Тогда мы создадим новое непрерывное развертывание от GitHub:

Затем вам необходимо разрешить NetLify установить приложение NetLify для GitHub и предоставить доступ к репозитории, который вы хотите опубликовать.

Отсюда вы можете выбрать основные настройки сборки. У нас есть Хьюго и публика здесь. Вы можете нажать «развернуть сайт», и он будет развернуть.

Теперь вы можете получить свой сгенерированный URL и посетить свой новый сайт!

Тем не менее, в зависимости от выбранной вами темы, у вас может быть стиль, который выглядит так, несущественно. Это потому, что базовый URL установлен на «example.org». Мы не знали, что такое базовый URL.

В моем случае NetLify создал мой сайт по адресу https://awesome-carson-bc7cd2.netlify.app/ Так что я просто добавлю это в свой config.toml:

baseURL = "https://awesome-carson-bc7cd2.netlify.app/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hyde"

И я добавлю это, а потом совержу. Теперь мой сайт выглядит так:

Если вы следили за этим: Поздравляю! Вы только что развернули сайт Jamstack !! .

Теперь, конечно, мы не внедрили часть API в этот пример, но я буду освещать ее в будущих статьях.

Вывод

Я надеюсь, что это помогло вам понять, что такое Jamstack. В этой статье мы рассмотрели

  • Что такое Jamstack
  • Почему это круто
  • Статические генераторы сайтов вы можете использовать
  • Jamstack Hosts
  • Построил наш собственный сайт Jamstack.

Я надеюсь, что это было полезно. Если вы хотите стать суперзвездой Jamstack, вот несколько отличных курсов, которые вы можете пройти, чтобы узнать:

Если вы в конечном итоге создаете сайт Jamstack, поделитесь им со мной! Я хотел бы услышать отзывы и как дела.

Оригинал: “https://dev.to/pluralsight/how-to-build-your-first-jamstack-site-a-complete-guide-1810”

Читайте ещё по теме: