Создание сайтов с Hugo

(1 оценок)
2
Инструменты разработки
06:54
9 июня 2022 г.
Наставник помогает с обучением
1 499 ₽
Купить сейчас

Анвер Богатов

Действующий инженер-разработчик крупных enterprise решений и cloud native систем на языке программирования Java. Основатель портала https://fullstackguy.anverbogatov.ru. Опыт разработки программных систем более 14 лет.
Профиль преподавателя

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


В этом уникальном курсе, созданном полностью на русском языке, ты найдёшь простую и доступную информацию о том, как с помощью Hugo создать собственный рабочий веб-сайт за один вечер. И не просто веб-сайт с одной страницей! Твой будущий сайт ограничен только твоей фантазией!

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


После изучения всех уроков ты сможешь:

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

А так же, помимо всего этого, ты:

  • сможешь настраивать работу собственных сайтов в разных окружениях
  • научишься интегрировать собственные сайты с Вконтакте и Telegram для лёгкой публикации контента в социальных сетях
  • организуешь работу с обратной связью пользователей сайтов и с их комментариями

Это не просто курс, а ОГРОМНАЯ ЭНЦИКЛОПЕДИЯ знаний по тому, как превратить образ из собственной фантазии в привлекательный продающий веб-сайт.

Ну и наконец, этот курс предназначен для широкого круга людей. Если ты из IT, и хочешь разобраться в Hugo - ты с лёгкостью этого достигнешь. Ну а если, ты с технологиями на "Вы" - не переживай, я постарался сделать этот курс доступным даже для тех, кто не знает, что такое "сайт" :-)

Скорее, включайся в работу! 

Вместе, мы пройдём более 30 уроков, наполненных глубокими знаниями о Hugo, выполним ряд домашних заданий и создадим целых 2 (!) полноценных сайта на Hugo. И один из них, даже опубликуем в Интернете!
Название Дата/Время Длительность
Создание сайтов с Hugo 2 декабря 2023 г. в  Минут(ы)

В первом видео курса "Создание сайтов с Hugo" мы поговорим о том

Как создаются сайты в 21ом веке?Что такое Hugo и какое место в создании сайтов занимает?Для кого этот курс, что из себя представляет и чему именно тебя здесь научат?Кто я такой и почему взялся тебя учить?.. Познакомимся, вообщем :-)

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

Официальный сайт:

https://gohugo.io

В этом уроке, мы поговорим о том, как установить инструмент Hugo на свой компьютер. Установленные инструменты нам понадобятся в остальной части этого курса.

Справка по установке Hugo:

https://gohugo.io/getting-started/installing/

В этом уроке, разбираемся с командной строкой и консольной утилитой "hugo". Консольная утилита "hugo" - это ключевой аспект самого инструмента Hugo. Именно через утилиты мы создаём новые проекты Hugo, или добавляем новый контент в существующие сайты. Поэтому уметь с ней работать равно умению работать с Hugo.


Документация по утилите:

https://gohugo.io/getting-started/usage/

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


Документация по структуре проекта:

https://gohugo.io/getting-started/directory-structure/

Ты проделал большой путь - узнал о том, что такое Hugo, как выглядят его проекты и теперь, пришла пора - запустить твой самый первый сайт на Hugo! Если всё сделаешь правильно, тебя ждём сюрприз!!.. В следующем видео, расскажу как починить!

В этом уроке мы поговорим про каталог тем Hugo. Ты узнаешь где он находится, какие 300+ тем в нём обитают, и где найти ещё бесконечное количество тем для твоего веб сайта.


Официальный каталог тем Hugo:

https://themes.gohugo.io

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


В этом уроке, ты узнаешь как установить новую Hugo тему в свой веб сайт.

В этом уроке ты узнаешь, как добавлять новые страницы к сайту в Hugo.


 Официальная документация по команде "hugo":

https://gohugo.io/commands/hugo/

В этом уроке мы поговорим про Front-Matter. 


А что такое этот "Front-Matter"? Это мощный инструмент Hugo, который позволяет добавлять абсолютно любую мета-информацию к любой странице или разделу сайта Hugo.


Официальная документация по Front-Matter:

https://gohugo.io/content-management/front-matter/

Документация по Front-Matter в YAML:

https://assemble.io/docs/YAML-front-matter.html

В этом уроке ты узнаешь об основном способе оформления текстового контента в Hugo - Markdown. Markdown - это язык разметки, польза от которого выходит далеко за рамки одного лишь Hugo. Markdown - применяется при написании структурированных текстовых файлов, в конфигурационных файлах различных инструментах, и даже, для оформления презентаций! Да-да, тех самых - на манер powerpoint'овских!


Официальный урок по Markdown:

https://www.markdownguide.org/basic-syntax/

Ну что, пришёл тот самый момент, когда мы меняемся местами? 

Теперь ты, что-то делаешь, а смотрю на это я. :-) 


Внимательно просмотри это урок и постарайся выполнить все задачи самостоятельно. Если будет трудно - не спеши подсматривать ответ. Ответ посмотреть всегда успеешь. Вернись к теме, которая вызывает у тебя сложность, и попробуй разобраться в ней ещё раз. 


В любом случае, я верю в то, что у тебя всё получиться! 

В следующем видео, дам ответы.

Я уверен, что у тебя всё получилось! 

В этом уроке посмотри как я выполняю это домашнее задание и... найди 10 отличий, как говорится!

В этом уроке ты научишься делать страницы собственного веб-сайта более живыми и красочными за счёт добавления изображений.


Официальная документация по работе со статическими файлами:

https://gohugo.io/content-management/static-files/


Для самых пытливых, Hugo умеет обрабатывать изображения. Детали тут:

https://gohugo.io/content-management/image-processing/

В этом уроке ты научишься наводить порядок в структуре собственного сайта. И помогут тебе - секции. Что это такое, как использовать и зачем - мы поговорим в этом уроке.


Официальная документация по секциям:

https://gohugo.io/content-management/sections/

Что делает сайт удобным и красивым? Конечно же - меню! 

В этом уроке ты узнаешь о том, как добавлять и изменять меню сайта.


Официальная документация о меню:

https://gohugo.io/content-management/menus/

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


Теперь же, ты узнаешь о том, как навести порядок в собственном проекте за счёт использования - Page Bundles.


Официальная документация по Page Bundle:

https://gohugo.io/content-management/page-bundles/

Повторим веселье? Я тебе конкурсы - ты мне участие!

Внимательно слушай условия задания и выполняй.

Если трудно - обязательно сначала вернись к теме, с которой возникли сложности. Удачи!

Школьные учебники были хороши тем, что к ним всегда шли "решебники". 

Этот "решебник" для тебя. Посмотри как задание выполнил я. Найди для себя что-то новое.

Ты молодец!

В этом уроке, разговариваем о форматах файлов, которые поддерживаются в Hugo. 

В этом уроке ты узнаешь секреты организованного хранения и работы с конфигурацией собственного Hugo сайта. 


Официальная документация:

https://gohugo.io/getting-started/configuration/

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


В этом уроке, ты узнаешь как Hugo поддерживает работу в разных окружениях.

Архетипы - прекрасный инструмент экономии собственного времени при работе с контентом собственного сайта Hugo.


В этом уроке ты знаешь что это такое и когда стоит задуматься об их использовании.


Официальная документация по архетипам:

https://gohugo.io/content-management/archetypes/

Ничего себе! Ты добрался до окончания первого блока этого курса!! Вот это да!

Шучу, я был уверен, мы здесь увидимся! Ты молодец! Преодолел большой путь и теперь ты можешь создавать новые сайты на Hugo, а так же оформлять их и наполнять смыслом. 

Так держать!

Ну а у меня для тебя в этом курсе есть ещё один блок!

Это небольшое вводное видео во второй блок курса "Создание сайтов с Hugo". Из него ты узнаешь, что ещё ты узнаешь из этого курса.

Пристегни ремень покрепче - входим в зону турбулентности!

В этом видео ты узнаешь с каким конкретно проектом нам предстоит работать. 

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

В этом уроке ты узнаешь о том, как добавить в твои сайты Hugo возможность получения обратной связи от твоих клиентов. Ты увидишь, что организовать общение с клиентом на статических сайтах Hugo не сложно, а самое главное поймёшь, что Hugo - это не просто "отображалка" страничек в Интернете, а вполне себе серьёзный инструмент, способный решать настоящие, серьёзные бизнес задачи.

В этом видео, ты узнаешь о том, что такое shortcode в Hugo, какие задачи решает и как их использовать на примере shortcode'а, который ты создашь сам.

Пошла жара! 

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

В этом видео, ты узнаешь как добавить поддержки публикации контента с сайта в Telegram.

Из этого видео, ты узнаешь, как добавить в твой статический Hugo сайт поддержку комментариев. 

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

В этом, заключительном уроке курса "Создание сайтов с Hugo" мы поговорим о том, как сделать доступным миллионам потенциальных пользователей Hugo сайт. И не просто поговорим, а возьмём и выложим наш демонстрационный сайт второго блока прямо в Интернет.

С этим уроком наш уютный ламповый курс подошёл к концу! 

Ты проделал огромный путь, молодчина!

Мне было приятно тебя учить! И, надеюсь, тебе было приятно учиться!

Желаю тебе удачи в сайтостроении вместе с Hugo!

Управление пакетами с Homebrew

Управление пакетами с Homebrew
Пожалуйста, войдите в свою учетную запись, чтобы оставить комментарий.
  • Константин Долгий (Студент) Прекрасный курс! Информация подаётся в очень лёгкой и доступной форме. Даже если вы далеки от IT, то всё равно вам не составит труда во всём разобраться. Пройдя курс я с лёгкостью смог создать свой личный сайт. Абсолютно всем рекомендую!
Поддержка курса доступна только для студентов.