Разработка для Интернета — это всегда захватывающая перспектива. Это позволяет разработчикам иметь свой путь для создания веб-приложений. Они могут выбрать структуру, технологию, инструменты и философию, которые они хотят использовать.
Одной из таких философий является Jamstack. Он предлагает гибкий подход к решению проблемы веб-разработки.
В этой статье вы узнаете, как создать свое первое приложение Jamstack. Давайте начнем.
Оглавление
Что такое Джемстак?
Jamstack — это одна из новых веб-философий создания вещей для Интернета. Технически он предлагает разработчикам компонуемую веб-архитектуру. Вы можете выбрать свои фреймворки и инструменты для достижения той же цели.
Если вы внимательно посмотрите,
Джем + стопка = JAMstack.
Jamstack состоит из трех основных компонентов:
- J для JavaScript
- A для интерфейса прикладного программирования (API)
- М для разметки
Этот подход отделяет бизнес-логику от данных, отделяя слой веб-интерфейса. Преимущества включают в себя:
- Более быстрое время загрузки (почти мгновенно).
- Гибкий и быстрый рабочий процесс разработки.
- Улучшенная масштабируемость и ремонтопригодность.
Чтобы узнать больше о Jamstack, ознакомьтесь с Jamstack для новичков.
История Джемстака
Jamstack относительно новый. В 2016 году Мэтт Бильманн представил Jamstack на презентации компании, показав миру, как создать веб-сайт, не идя традиционным путем.
Решение отделяет логику приложения от зависимости внутреннего сервера. Таким образом, большая часть контента обслуживается через статические файлы с CDN — динамические функции поддерживаются и доступны через API. И, если какие-либо динамические действия должны быть обработаны сервером, они компилируются и передаются в CDN до того, как конечный пользователь получит к ним доступ.
Чтобы лучше понять историю Jamstack, мы должны взглянуть на статические и динамические веб-сайты.
- Статический веб-сайт: статический веб-сайт размещается на сервере, но не имеет динамических аспектов. В начальный период существования Интернета большинство сайтов представляли собой статические веб-сайты, которые обслуживали HTML, CSS и изображения, хранящиеся на сервере. Подход быстрый, так как серверу не нужно тратить время на обработку запроса пользователя, и у него всегда есть готовые файлы. Однако отсутствие возможности что-либо изменить не приводит к интерактивности.
- Динамический веб-сайт. Динамические сайты предлагают интерактивность, обрабатывая запросы пользователей и генерируя необходимый HTML-код для обслуживания. Подход медленный, но добавляет преимущества интерактивности. Большинство современных сайтов являются динамическими сайтами. Лучшим примером могут быть веб-сайты на базе WordPress.
Кроме того, у нас есть веб-сайты Jamstack. Давайте узнаем, как он решил проблему как статических, так и динамических сайтов.
Сайты Jamstack: как они работают?
Jamstack решает две основные проблемы:
- Медленная загрузка динамического сайта
- Интерактивность статических сайтов
Сайт Jamstack обслуживает статические файлы, что очень быстро. Но он также содержит JavaScript, который может взаимодействовать с API для обслуживания динамического контента.
За кулисами вам понадобится генератор статических сайтов, чтобы выполнить тяжелую работу по созданию статических веб-страниц.
Эти генераторы статических веб-сайтов используют Markdown для обслуживания статических веб-сайтов. Генератор статических сайтов создает статические файлы из доступных файлов HTML, CSS и JavaScript. После разработки статический сайт обслуживается через CDN.
Поскольку вы обслуживаете статические файлы, сайты загружаются практически мгновенно. Однако, чтобы добавить динамичности сайту, вам нужно полагаться на JavaScript. Файлы JavaScript могут подключаться к API и добавлять динамические данные, взаимодействуя с базой данных.
Создание первого веб-сайта Jamstack
Поскольку Jamtack предлагает свободу, вы можете выбрать любой генератор фреймворка/статического сайта Jamstack, включая Hugo, Gatsby, Next.js, Hexo и другие.
Читайте также: Лучшие фреймворки для JamStack
А для развертывания вы можете развернуть его на GitHub Pages, Netlify, Azure Static Web Apps и других.
Мы будем использовать Hugo для разработки Jamstack и Netlify для размещения нашего сайта для этого руководства.
В руководстве предполагается, что у вас есть базовые знания о сети. Вы должны знать, как работает Интернет. Кроме того, вы также должны знать, как использовать Git.
Давайте начнем.
№1. Установка необходимых компонентов: Go и Git
Чтобы установить Hugo, вам нужны две вещи: Git и Go. Нам нужен Git для оптимизации нашего рабочего процесса сборки (вы увидите это позже с Netlify). Требуется Go, так как Hugo построен на нем.
Мы используем Ubuntu, работающую на WSL 2 в Windows 11. Мы обращаемся к ядру Ubuntu напрямую из Windows.
Читайте также: Windows 11 встречает Linux: глубокое погружение в возможности WSL2
Вы можете выбрать операционную систему, Windows, Linux или Mac.
Установка Git
В Ubuntu вы можете установить Git, выполнив следующую команду.
$ sudo apt update $ sudo apt install git
В случае с Windows вам потребуется загрузить бинарные установщики Windows. Ознакомьтесь с нашим полным руководством по установке Git.
Чтобы убедиться, что Git установлен правильно, введите следующую команду.
[email protected]:~$ git --version git version 2.34.1
Установка Go
Теперь пришло время установить Golang. Для этого вам нужно запустить несколько команд в Linux. Итак, давайте делать это по шагам.
Шаг 1: Удалите предыдущую установку Go и создайте локальное дерево Go.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Шаг 2. Настройка переменной среды PATH
экспорт PATH=$PATH:/usr/local/go/bi
Шаг 3: Наконец, проверьте, правильно ли установлен Golang.
$ go version. #output go version go1.18.1 linux/amd64
Отлично, теперь мы готовы установить Hugo!
Установка Хьюго
В зависимости от того, используете ли вы Homebrew или Chocolately, вам потребуется использовать одну из следующих команд.
Для домашнего пивоварения:
$ brew install hugo
Для шоколадного:
$ brew 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 -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/toadmin.ru/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
№ 2. Создание сайта Хьюго
Hugo предлагает простой способ создания сайта. Для этого выполните следующую команду.
$ hugo new site toadmin.ru-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/toadmin.ru-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
№3. Выбор темы Хьюго
Hugo предлагает доступ к множеству тем. Эти темы служат отправной точкой для вашего проекта. И чтобы создать сайт Jamstack с Hugo, вам нужна тема.
№ 4. Создание сайта малого бизнеса с помощью Jamstack
Для урока мы будем использовать тему Hugo Hero. Эта многоцелевая тема предлагает такие функции, как полноразмерные разделы и создание портфолио с помощью Markdown.
Чтобы установить тему, скопируйте ссылку на репозиторий и клонируйте ее. Прежде чем продолжить, убедитесь, что вы находитесь в корневом каталоге.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Копирование содержимого по умолчанию
Чтобы использовать контент по умолчанию на сайте, выполните следующую команду.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Он копирует содержимое папки exampleSite в корень вашего сайта.
Обновление файла Config.toml
Далее нам нужно отредактировать файл Config.toml. Он хранит информацию о конфигурации проекта, и его необходимо правильно настроить для работы вашего сайта Jamstack.
На данный момент вам нужно отредактировать следующую строку.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Примечание. Вам необходимо постоянно обновлять файл Config.toml по мере продвижения вашего проекта. Кроме того, поскольку вы использовали содержимое по умолчанию, ваш файл Config.toml обновляется, чтобы вместить пример содержимого.
Тестирование нашего сайта Jamstack
Чтобы запустить наш сайт, нам нужно снова сгенерировать сайт Hugo с помощью команды Hugo.
$ hugo
Далее раскручиваем сервер. Для этого запустите команду Hugo serve.
$ hugo serve
#output [email protected]:~/toadmin.ru$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/toadmin.ru/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/toadmin.ru/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Примечание. Теперь ваш сайт размещен и доступен по адресу 127.0.0.1. Если по какой-то причине он не открывается, попробуйте открыть альтернативный адрес, указанный рядом. В данном случае это локальный хост: 42973.
Редактирование содержимого темы по умолчанию
Отсюда вы можете редактировать содержимое по умолчанию. Вы можете сделать это, перейдя в папку Content. Давайте отредактируем содержимое индексной страницы. Для этого перейдите в Контент > Работа > Index.md.
Вот так это выглядит после редактирования.
Создание блога
Вы должны выбрать подходящую тему, если хотите создать блог. Для этого воспользуемся темой Hyde.
Подобно тому, как мы настроили наш новый сайт, вам нужно выполнить следующие команды.
$ hugo new site toadmin.ru-jamstack $ cd toadmin.ru-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Затем отредактируйте файл Config.toml, добавив значение theme = ‘hyde’.
Создать новую запись
Вы должны запустить команду Hugo New, чтобы создать новый пост, а затем файл Markdown.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Редактирование сообщения
Чтобы отредактировать только что созданный пост hellogeefklare.md, откройте файл hellogeekflare.md в предпочитаемом вами текстовом редакторе.
Он покажет вам следующий контент.
--- title: "Hello toadmin.ru" date: 2023-05-04T11:39:10+05:30 draft: true ---
Здесь вы можете добавить любой контент в Markdown.
Давайте добавим следующий контент в Markdown.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
После того, как вы поместите вышеуказанное содержимое в файл .md, оно должно выглядеть так, как показано ниже (в зависимости от вашего редактора мы используем Visual Studio Code).
Однако при подаче оно будет выглядеть совершенно по-другому.
Примечание. Обязательно измените значение черновика с «true» на «false».
Потрясающий! Мы создали два веб-сайта Jamstack, один сайт для малого бизнеса и еще один блог.
После редактирования вашего сайта вы можете сгенерировать файлы, выполнив команду Hugo. Он создаст файл и поместит его в папку /public.
$ hugo
№ 5. Развертывание сайта Jamstack в Netlify
Создав наши сайты, давайте развернем их. Для этой цели мы будем использовать Netlify.
Netlify — это служба, поддерживаемая CDN, которая предлагает таким пользователям, как вы, размещать быстрые сайты. Вы можете подключить Netlify к Github и автоматизировать процесс. Это бесплатный сервис с некоторыми функциями за платным доступом.
Наша работа заключается в том, чтобы отправить код в Netlify и позволить Netlify сделать все за нас.
Локальная настройка репозитория Git
Пришло время настроить репозиторий Git.
Чтобы запустить репозиторий Git, выполните следующую команду в корне вашего проекта.
$ git init
Далее нам нужно настроить тему как подмодуль. Это важный шаг. Технически он создает подрепозитории в вашем репозитории. (Помните, вы сделали git-клон темы Hugo?). Это даст вам больше контроля над вашим сайтом Jamstack.
Например, вы можете загружать обновления для своей темы. Вам также необходимо сделать это, потому что Netlify нужны темы в качестве подмодулей для их размещения.
Итак, чтобы добавить тему в качестве подмодуля, выполните следующую команду.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/toadmin.ru-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/toadmin.ru-jamstack$
Создание репозитория на GitHub
После того, как локальная настройка завершена, самое время создать новый репозиторий GitHub.
После создания вам необходимо добавить источник в локальный репозиторий.
$ git remote add origin https://github.com/logan99/toadmin.ru-jamstack-tutorial.git
А теперь потяни.
$ git branch -M main $ git pull origin main
Создать новый коммит
Теперь пришло время создать новый коммит. Выполните следующую команду, чтобы добавить все файлы в основную ветку.
$ git add .
Теперь запустите команду фиксации, чтобы зафиксировать изменения.
$ git commit -m “First commit”
#Output [email protected]:~/toadmin.ru-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Наконец, отправьте изменения на GitHub.
$ git push --set-upstream origin main
Примечание. Для работы необходимо ввести имя пользователя и пароль GitHub.
№ 6. Работа с Нетлифай
Отлично, наш репозиторий создан. Теперь переходим к Netlify. Если у вас уже есть учетная запись, войдите в систему или создайте новую учетную запись.
Для новых учетных записей он мгновенно запустит мастер. В противном случае вы попадете на панель управления своей учетной записи. Если вы попадаете на панель инструментов, нажмите «Добавить новый сайт» в разделе «Сайты».
В разделе «Добавить новый сайт» выберите «Импортировать существующий проект».
Затем вам будет предложено выбрать поставщика Git. Поскольку мы используем GitHub, мы выберем его. Вы также можете выбрать Bitbucket, GitLab и Azure DevOps.
Затем он перечислит все ваши проекты. Отсюда выберите репозиторий GitHub, который вы создали для этого проекта. Для нас это «toadmin.ru-jamstack-tutorial». Вы также можете загрузить другой проект, который мы создали.
Затем вам будет предложено выбрать ветку для развертывания и основные параметры сборки. На данный момент вы можете установить все по умолчанию.
Нажмите «Разместить сайт», чтобы развернуть его.
Теперь вам нужно подождать, пока Netlify сделает свое дело. После развертывания появится сообщение «Ваш сайт развернут».
Теперь нажмите на сайт в левом верхнем углу.
Однако вы заметите, что сайт загружается неправильно. Это связано с тем, что базовый URL-адрес в файле Config.toml задан неправильно. Поскольку Netlify сгенерировал новый URL-адрес проекта, вы должны добавить его в файл Config.toml.
В нашем случае сайт находится по адресу https://animated-beijinho-2baa8b.netlify.app/
Это означает, что нам нужно добавить к нему baseURL.
Для этого перейдите в локальную настройку и измените значение.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Чтобы отправить изменение, вам нужно выполнить следующую команду.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Netlify умный. Когда он обнаруживает новую фиксацию, он автоматически снова развертывает ваш сайт.
Если вы загрузите свой сайт сейчас, он загрузится отлично.
Ууу! Вы сделали это. Я знаю, что есть чему поучиться. Тем не менее, вы обнаружите, что весь процесс интуитивно понятен, если вы сделаете это несколько раз.
Заключительные слова
Jamstack зацепил новую эру разработчиков. Он повышает производительность, а также улучшает развертывание сайтов. Jamstack вырос благодаря отличным участникам экосистемы, таким как Hugo и Netlify. Несомненно, отсюда он будет только расти.
Затем узнайте, как развернуть внешнее приложение в Netlify.