Jamstack: создавайте более быстрые и эффективные веб-сайты сегодня

Jamstack – это метод создания и обслуживания веб-сайтов с минимальной нагрузкой, необходимой для сервера. Он получил свое название от технологий, используемых в процессе сборки, Javascript, API и разметки. Страницы создаются на языке разметки заранее и используются в качестве статических HTML-файлов по запросу пользователя. Для создания сайта и объединения этих технологий вам нужны правильные инструменты. Обязательно ознакомьтесь с нашей статьей о лучших редакторах кода, которая поможет выбрать лучшую среду разработки для вас.

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

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

01. Скачать необходимые инструменты

Скачать копию Victor Hugo – это один из нескольких стартовых наборов, позволяющих быстро оторваться от земли. Также убедитесь, что у вас установлен узел в вашей среде разработки.
https://gohugo.io/tools/starter-kits/

https://github.com/netlify-templates/victor-hugo

02. Создайте рабочий каталог и установите Hugo

Создайте каталог и назовите его Jamstack, Здесь мы будем работать над нашей машиной для разработки. Распакуйте загруженные файлы для Hugo в этот каталог и откройте его в командной строке. Чтобы установить все зависимости, откройте командную строку или терминал в папке Jamstack и запустите установка npm

npm install

03. Запустите сервер

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Как только зависимости закончатся, запустите npm start. На сервере разработки теперь работает локальная копия Victor Hugo, доступная по умолчанию на localhost: 3000 – при открытии этой ссылки должен появиться экран приветствия, если все прошло успешно. После проверки нажмите Ctrl + С остановить сервер.

04. Добавить страницу и пост

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Измените каталог на папку сайта, затем, используя Хьюго Нью команда, добавить page-one.md и post-one.md, Разработчикам, работающим в Windows, необходимо скачать файл hugo.exe и добавить путь, чтобы заставить его работать, но на веб-сайте hugo есть простая документация.

hugo new page-one.md hugo new post/post-one.md

05. Добавить контент на страницу и опубликовать

В целях тестирования, некоторый контент должен быть добавлен к новому сообщению и странице. Откройте каталог для проекта в файловом браузере и перейдите к Jamstack / Site / Content. В этой папке файл page-one.md теперь должен существовать. Существует также папка с именем после который содержит post-one.md. Откройте оба этих файла и добавьте некоторый контент в markdown ниже — (или в некоторых случаях +++)

# Lorem ipsum dolor sit amet ## Consectetur adipiscing *elit* Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

06. Добавьте тему как субмодуль

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Текст, введенный в предыдущих файлах, нельзя просмотреть без темы. В качестве примера будет использована тема Ananke. Удалить содержимое текущего сайт / макеты папка, оставляя ее пустой. Создайте новый каталог в папке сайта с именем темы, затем перейдите к нему и запустите следующий код, чтобы импортировать тему как подмодуль git. Примечание: обычное клонирование несовместимо с Netlify.

mkdir themes cd themes git submodule add https://github com// https://github.com/budparr/gohugo-theme ananke.git themes/ananke

07. Настройте тему и запустите сервер

Скопируйте содержимое site / themes / gohugo-theme ananke / exampleSite / config.toml более одного в папке сайта. В верхней части страницы замените базовый URL-адрес на ‘и удали строку themesDir = ‘../ ..’ , Сохраните файл конфигурации, откройте терминал и запустите начало вечера команда. Вы также можете изменить название сайта (если хотите), заменив заглавие ценность.

cd site npm start

08. Тест в браузере

открыто HTTP: // локальный: 3000 / страниц один /чтобы увидеть тему, отображающую разметку страницы как полностью стилизованную страницу. Открыв домашнюю страницу, первое сообщение теперь будет видно. Это означает, что генератор статического сайта теперь работает.

09. Настройте меню

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

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

TOML +++ menu = “main” +++ YAML --- menu: “main” ---

10. Вставьте файлы в GitHub

Затем анимируйте круг, чтобы реагировать на клики пользователей. Теперь статический сайт запущен и работает, он должен быть доступен на сервере разработки. Первый шаг – отправить код на GitHub. Создайте новый репозиторий на GitHub, а затем либо используйте командную строку, чтобы вытолкнуть код из папки проекта или настольного приложения GitHub.

git remote add origin https://github.com/(githubusername)/jamstacktutorial.git git push -u origin master

11. Подключитесь к Netlify

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

12. Подключитесь к Github

Для непрерывного развертывания нажмите Github, затем выберите репо, которое было сделано ранее в этом уроке. Netlify должен автоматически определить лучшие варианты сборки для проекта. Следует читать npm run build, Если все хорошо, нажмите кнопку развернуть.

- Jamstack: создавайте более быстрые и эффективные веб-сайты

(Изображение предоставлено Джозефом Фордом)

Как только сайт будет создан, появится сообщение о том, что развернутый , Netlify дал сайту временное доменное имя, которое может не иметь смысла – это можно изменить, просто щелкнув настройки сайта. Измените имя, затем нажмите на ссылку, чтобы увидеть сайт, загруженный через Jamstack.

14. Внесите изменения в тестовое развертывание.

Сайт теперь загружается через JAMStack. это молниеносно, и он автоматически обновляется, когда совершается коммит в github. Чтобы проверить это, вернитесь в локальную среду разработки и запустите Hugo Новая страница- three.mdиз каталога сайта. Затем откройте созданный файл, добавьте контент, нажмите «Сохранить» и передайте файл в репозиторий. Через несколько секунд вы заметите, что обновление доступно по ссылке netlify.

15. Добавьте CMS на ваш статический сайт

Работа в простой разметке и использование командной строки для создания страниц не подойдет большинству клиентов. Чтобы сделать сайт более дружелюбным, установите систему управления контентом. Forestry.io идеально подходит для текущей настройки. Зайдите на сайт и создайте аккаунт с помощью github.

16. Настройка лесного хозяйства

Нажмите добавить новый сайт, затем выберите Hugo в качестве генератора статического сайта, git в качестве поставщика и заполните информацию в следующих формах. Нажмите «отправить», и новая CMS загрузится, готовая к изменениям содержимого. Теперь страницы можно просто редактировать с боковой панели, а также посты и множество других опций.

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

- Jamstack: создавайте более быстрые и эффективные веб-сайты

Узнайте, как создать лучший JavaScript на GenerateJS (Изображение предоставлено Future / Remy Sharp / Phil Hawksworth / Джереми Китом / Nadieh Bremer / Toa Heftiba, Unsplash)

Присоединяйтесь к нам в апреле 2020 года с нашей суперзвездой JavaScript на GenerateJS – конференции, которая поможет вам улучшить JavaScript. Забронировать сейчас на generateconf.com

Do NOT follow this link or you will be banned from the site!
WeCreativez WhatsApp Support
Наша служба поддержки клиентов готова ответить на ваши вопросы.
Привет, чем я могу помочь?