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

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

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

Измените каталог на папку сайта, затем, используя команду hugo new добавьте 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 которая содержит post-one.md. Откройте оба этих файла и добавьте некоторое содержание в уценку ниже — (или в некоторых случаях +++)

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

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

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

  Темы mkdir Темы компакт-диска git submodule добавить https: // github com /  /  https://github.com/budparr/ gohugo-theme ananke.git themes / ananke  

07. Сконфигурируйте тему и запустите сервер

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

  cd site npm start  

08 , Тестирование в браузере

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

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

  TOML +++ menu = «main» +++ YAML --- menu: «main» ---  

10. Переместите файлы на GitHub

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

  git remote add origin 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 . Если все хорошо, нажмите кнопку развернуть.

13. Сайт сборки и просмотр по ссылке Netlify

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

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

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

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

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

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

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

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

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

Подробнее: