Создание статичного целевого сайта портфолио фотографий с помощью HydePHP


Введение

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

В этой статье блога мы воссоздадим простой сайт портфолио фотографии с помощью HydePHP и Markdown. Никакого кодирования не требуется!

Вы можете найти исходный код на GitHub, а демонстрационную версию здесь.

Предварительные условия

Этот пост предназначен для новичков и расскажет вам об установке и базовом использовании HydePHP. Для начала работы вам не нужно знать PHP, хотя он должен быть установлен в вашей системе, так как Composer необходим для загрузки и запуска HydePHP.

HydePHP — это приложение командной строки, однако оно очень простое в использовании, если вы хоть раз в жизни видели терминал, вы сможете работать с ним!

Установка

HydePHP устанавливается для каждого проекта с помощью Composer, менеджера пакетов PHP. Если у вас не установлен Composer, вы можете скачать его с getcomposer.org.

После установки Composer вы можете создать новый проект HydePHP, выполнив следующую команду в терминале или командной строке:

composer create-project hyde/hyde --stability dev
Войти в полноэкранный режим Выйти из полноэкранного режима

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

После выполнения команды Composer загрузит HydePHP и все его зависимости. Это может занять от нескольких секунд до нескольких минут в зависимости от вашего интернет-соединения. После этого в каталоге, в котором была запущена команда, появится новый каталог hyde.

Теперь вы можете перейти в каталог hyde с помощью командной строки с помощью команды cd (change-directory):

cd hyde
Вход в полноэкранный режим Выйдите из полноэкранного режима

Теперь, когда вы находитесь в директории hyde, у вас есть полностью функциональный проект HydePHP. Мы взаимодействуем с программой через HydeCLI, доступ к которому осуществляется путем выполнения команды php hyde, за которой следует имя команды. Убедитесь, что эта команда выполняется из каталога hyde, в который мы только что перешли.

Чтобы показать экран приветствия со списком доступных команд, выполните следующую команду:

php hyde list
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы не знаете, что делает та или иная команда, вы всегда можете добавить флаг --help к любой команде, чтобы получить дополнительную информацию о ней. Например:

php hyde new --help
Войти в полноэкранный режим Выйти из полноэкранного режима

Вы также всегда можете обратиться к онлайн-документации HydePHP CLI для получения дополнительной информации.

Запуск сервера разработки

HydePHP поставляется со встроенным сервером разработки, который вы можете использовать для предварительного просмотра вашего сайта в процессе работы над ним. Чтобы запустить сервер разработки, выполните следующую команду:

php hyde serve
Войти в полноэкранный режим Выйти из полноэкранного режима

Это запустит локальный веб-сервер, который будет компилировать ваш сайт на лету. Вы можете получить доступ к сайту, перейдя по ссылке http://localhost:8080 в вашем браузере. После перехода по этой ссылке вы увидите экран приветствия HydePHP.

Стандартная страница приветствия скомпилирована из файла Blade, который вы можете узнать в Laravel. Исходная страница хранится в каталоге _pages/ под именем index.blade.php. Когда мы позже скомпилируем наш сайт, этот файл будет скомпилирован в index.html в директории _site/.

Создание нашей первой страницы

Приветственная страница — это хорошо и все такое, но я обещал, что мы будем создавать сайт портфолио фотографии, так что давайте приступим к этому! Поскольку это простой сайт, мы будем использовать Markdown для создания наших страниц. Markdown — это простой язык разметки, который легко читать и писать. Он также полностью поддерживается HydePHP, что делает его идеальным для того, что мы хотим сделать. Если вам нужно что-то более сложное или динамичное, Laravel Blade также поддерживается.

Поскольку мы будем заменять страницу по умолчанию, давайте сначала удалим ее. Вы можете удалить файл напрямую с помощью выбранного вами приложения, например Finder или Windows Explorer. Но поскольку мы уже находимся в терминале, давайте воспользуемся командой rm (remove) для удаления файла:

rm _pages/index.blade.php
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь перейдем к созданию нашей страницы. Поскольку все в HydePHP основано на файлах, мы можем просто создать новый файл в каталоге _pages/ и назвать его index.md. Но Hyde предлагает изящную команду для создания новых страниц, поэтому давайте воспользуемся ею:

php hyde make:page index
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда создаст для нас файл _pages/index.md. Теперь давайте откроем этот файл в вашем любимом текстовом редакторе и посмотрим!

---
title: "index"
---

# index
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы видите, специальная секция в верхней части файла, называемая «front-matter», используется для определения заголовка страницы. Основная часть написана на YAML, простом языке разметки, который используется HydePHP для определения метаданных.

За титульным листом следует содержимое страницы, которое пишется в формате Markdown. Использование лицевой части необязательно, поскольку HydePHP может выводить многие типы метаданных, например, заголовки страниц, из других источников, таких как заголовки и имена файлов. Но если вы хотите переопределить эти значения, вы можете сделать это, определив их в front matter, как показано здесь.

Теперь, когда у нас есть страница, давайте добавим на нее содержимое. Я уже написал некоторое содержание для этого сайта, поэтому я просто скопирую и вставлю его в файл. Если вы сами следите за развитием событий, просто скопируйте в файл следующее:

## Hey there, I'm Jane Doe!

# Freelance photographer

![Jane Doe](media/photographer.jpg)

## About

This is a demo website built with [HydePHP](https://hydephp.com/), a free and open-source static site generator. This entire site is built using just Markdown text that is transformed into a fast and secure website that can be published anywhere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur consectetur, nisi nisl aliquet nisi, euismod consectetur nisi nisi euismod nisi.

## Gallery

![Austria](media/austria.jpg)
![Boat](media/boat.jpg)
![Croatia](media/croatia.jpg)
![Fireworks](media/fireworks.jpg)
![Hallstatt](media/hallstatt.jpg)
![Lemonade](media/lemonade.jpg)
{.gallery}


## Contact

- Phone: +1 (123) 456-7890
- Email: jane.doe@example.com
- Address: 123 Main St, Anytown, CA 12345
Войти в полноэкранный режим Выйти из полноэкранного режима

Как вы можете видеть, я убрал передний план, позволив Hyde сделать автоматический вывод из заголовка. Я также добавил несколько изображений на страницу, а также CSS-класс, который мы можем использовать для добавления стилей к изображениям позже.

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

Добавление изображений

Добавлять изображения на сайты HydePHP очень просто. Просто поместите их в каталог _media/. Когда вы компилируете свой сайт, HydePHP автоматически скопирует все файлы из этого каталога в каталог _site/media/. Это означает, что вы можете ссылаться на свои изображения, используя относительные пути, как media/photographer.jpg в примере выше.

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

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

Добавление основных стилей

Ранее мы добавили CSS-класс .gallery, поэтому давайте добавим несколько стилей к этому классу.

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

HydePHP поставляется с полным фронтендом с компонентами для создания всего — от постов в блоге до сайтов документации. Эти шаблоны построены с помощью TailwindCSS. Чтобы облегчить вам работу, в базовую установку включена предварительно скомпилированная и минифицированная версия всех классов Tailwind, необходимых для встроенных шаблонов. Вы найдете их в файле app.css в каталоге _media/.

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

После этого откройте файл в вашем любимом текстовом редакторе и добавьте следующее в нижнюю часть файла:

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.gallery img {
    max-width: 65vw;
    width: 44ch;
    margin: 3ch 2ch;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь, если вы обновите страницу в браузере, вы увидите, что изображения стали меньше и хорошо помещаются на странице.

Компиляция сайта

Теперь, когда у нас есть наш сайт, давайте скомпилируем его. Для этого выполните команду hyde build:

php hyde build
Войти в полноэкранный режим Выйти из полноэкранного режима

В результате мы получим все исходное содержимое и скомпилируем его в статический сайт, который можно опубликовать в любом месте. Скомпилированный сайт будет помещен в каталог _site/.

Публикация сайта

Статические сайты очень легко публиковать. Вы можете опубликовать их в любом месте, где можно разместить сайт, например, на GitHub Pages, Netlify или традиционном виртуальном хостинге. Это одна из причин, почему я так люблю статические сайты! Однако это выходит за рамки данного руководства, но для получения дополнительной информации ознакомьтесь с документацией по развертыванию.

Короче говоря, просто закиньте содержимое каталога _site/ в корневой/публичный каталог вашего веб-сервера, и готово!

Что дальше?

Теперь, когда у нас есть базовый сайт, мир принадлежит вам! Есть множество настроек, которые мы можем сделать, например, добавить несколько ссылок в навигацию или добавить блог. Но это уже для другого урока. А пока я надеюсь, что вам понравился этот учебник и вы узнали что-то новое.

Если у вас есть вопросы, не стесняйтесь задавать их на сервере HydePHP Discord или открыть проблему на GitHub.

Вы также можете ознакомиться с документацией HydePHP для получения дополнительной информации о том, как использовать HydePHP. Вы также всегда можете связаться со мной в Twitter, @CodeWithCaen.

Оцените статью
devanswers.ru
Добавить комментарий