Начало работы с Hugo: как создать простой веб-сайт

Hugo — это генератор статических сайтов, который позволяет создавать веб-сайты практически без опыта программирования. Вы можете использовать готовые темы в качестве основы для дизайна вашего сайта. Это позволяет вам больше сосредоточиться на наполнении сайта своим контентом.

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

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

Как установить Хьюго

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

Мак

Вы можете установить Hugo с помощью Homebrew.

1. Откройте терминал macOS.
2. Установите менеджер пакетов Homebrew.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

instagram viewer
3. Установите Хьюго.

   заваривать установить Хьюго

Окна

Вам понадобится эквивалентный менеджер пакетов для Windows. Например, вы можете использовать Менеджер пакетов Scoop.

1. Откройте Windows PowerShell, которая уже должна быть частью вашей операционной системы Windows.
2. Если вы устанавливаете Scoop в первый раз, вам может потребоваться настроить политику выполнения.

   Набор-ExecutionPolicy RemoteSigned -объем Текущий пользователь

3. Установить Совок:

   икс (новый-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Установить Хьюго:

   совок установить Хьюго

Как создать проект Хьюго

Чтобы создать новый проект Hugo, вам потребуется использовать встроенный Хьюго новый сайт команда.

1. Откройте терминал или командную строку. Перейдите в папку, в которой вы хотите создать свой проект.
2. Выполнить Хьюго новый сайт команда:

   Хьюго новый сайт новый-hugo-веб-сайт

3. Перейдите к местоположению вашего проекта Hugo в проводнике.
4. Откройте папку проекта. Вы увидите, что ваш новый веб-сайт Hugo имеет структуру файлов и папок, необходимую для работы вашего веб-сайта.

Как добавить тему

На данный момент ваш проект содержит только основные базовые папки для проекта Hugo. Запуск вашего веб-сайта локально в этот момент покажет только пустой экран. Поскольку у вас еще нет макетов HTML, CSS или пользовательского интерфейса для вашего веб-сайта, вам нужно будет добавить их.

Hugo уже предоставляет библиотеку встроенных Хьюго Темы созданные разработчиками.

1. Выберите тему, которая вам нравится. Каждая тема может иметь немного разные инструкции по настройке, показанные на соответствующей странице предварительного просмотра. В этом руководстве будет использоваться Сказочная тема Например.
2. Перейдите в корневую папку вашего проекта в терминале или командной строке.

   компакт диск новый-hugo-веб-сайт

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

   git инициировать
   git подмодуль добавить https://github.com/EmielH/tale-hugo.git темы/сказка

   Кроме того, вы можете клонировать репозиторий историй GitHub в папку тем вашего проекта.

   мерзавец клон https://github.com/EmielH/tale-hugo.git темы/сказка

4. Перейдите в папку вашего проекта. Нажми на темы папку, чтобы открыть ее. Независимо от того, какую команду вы использовали, появится новая сказка папка, в которой хранится только что загруженная тема.
5. в config.toml файл, добавьте тему сказки как часть конфигурации. Это скажет Hugo использовать HTML, CSS и другие стили, которые включает в себя тема Tale.

   тема = "сказка"

Как добавить страницы на свой сайт

Вы можете писать свой контент в любом формате, который принимает Hugo. Затем Hugo автоматически преобразует ваши файлы в файлы HTML при предоставлении их пользователю. Это ускоряет как сборку, так и развертывание. В этом примере будет использоваться Markdown, простой текстовый язык, как формат для вашего контента.

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

Чтобы добавить новую подстраницу или сообщение на свой веб-сайт, вам нужно будет добавить новый файл Markdown в содержание папка. Каждая запись или страница будет иметь свой собственный файл Markdown, связанный с ней.

1. Открыть содержание внутри вашего проекта Hugo. Создайте новый файл Markdown с именем myFirstPost.md.
2. Откройте файл в любом текстовом редакторе, таком как Notepad++ или Visual Studio Code.
3. В верхней части файла добавьте некоторые метаданные. Это будет включать важную информацию о публикации. Используемая вами тема будет определенным образом форматировать эту информацию на странице.

   
   автор: "Твое имя"
   заглавие: "Мой первый пост"
   дата: "2022-05-17"
   

4. После того, как вы добавили метаданные, вы можете начать добавлять свой контент с помощью Markdown.

   Этот является мой самый первый пост на моем сайте Hugo!
   Используется тема Хьюго заэто сайт называется Сказка.
   Это является очень просто установить и настроить.
   # Подзаголовок
   Этот является какой-то контент.
   # Другой подзаголовок
   Этот является больше контента.

5. Не стесняйтесь добавлять больше файлов уценки, чтобы добавить больше страниц на свой сайт.

Как запустить и протестировать ваш сайт Hugo локально

Для запуска вашего веб-сайта используйте Хьюго служить команда.

1. Откройте терминал или командную строку.
2. Перейдите в корневую папку вашего проекта Hugo.
3. Запустите Хьюго служить команда:

   Хьюго служить

4. Подождите, пока веб-сайт завершит процесс запуска. Как только это будет завершено, терминал напечатает сообщение о том, с какого локального адреса вы можете получить доступ к веб-сайту. Обычно это http://localhost: 1313/.
5. Откройте веб-браузер и введите http://localhost: 1313/, или любой другой адрес, который дал вам терминал. Вы увидите главную страницу вашего сайта Hugo.
6. На странице будет список сообщений для каждого файла уценки, который у вас есть. В этом случае есть два файла уценки, заполненные содержимым. Это включает в себя страницу myFirstPost.md, которую вы создали ранее. Он также включает в себя новый пост под названием бананCakeRecipe.md.
7. Нажмите на ссылку заголовка на одном из превью. Это приведет вас к полной странице для этого конкретного сообщения.

Размещение вашего веб-сайта Hugo

Запустить и запустить статический веб-сайт с Hugo просто и быстро. Вы можете использовать и настраивать готовые темы и запускать свой веб-сайт Hugo локально для тестирования. Вы также можете добавлять страницы контента на свой сайт с помощью Markdown.

После того, как вы создали свой веб-сайт Hugo, вы можете начать узнавать больше о том, как его разместить. Существует множество бесплатных вариантов хостинга веб-сайтов, таких как Dropbox, Google Drive или OneDrive.

Как получить бесплатный хостинг веб-сайтов с помощью Dropbox, Google Drive или OneDrive

Читать далее