Първи стъпки с Hugo: Как да създадете прост уебсайт

Hugo е статичен генератор на сайтове, който ви позволява да създадете уебсайт с малко или никакъв опит в кодирането. Можете да използвате предварително изградени теми като основа за дизайна на вашия уебсайт. Това ви позволява да се съсредоточите повече върху попълването на сайта с вашето съдържание.

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

Можете лесно да настроите и създадете уебсайт на Hugo, като използвате предварително изградена тема на Hugo. Само с няколко кратки стъпки можете да добавите съдържание и страници към уебсайта си с помощта на Markdown.

Как да инсталирате Hugo

Трябва да инсталирате генераторът на статичен сайт Hugo за създаване, стартиране и тестване на уебсайт на Hugo. Според Документация на Hugo, има много начини да го инсталирате. По-долу са дадени някои от опциите.

Mac

Можете да инсталирате Hugo с помощта на Homebrew.

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

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

3. Инсталирайте Hugo.

   варя Инсталирай хюго

Windows

Ще ви трябва еквивалентен мениджър на пакети за Windows. Например, можете да използвате Мениджър на пакети Scoop.

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

   Комплект-ExecutionPolicy RemoteSigned -обхват Текущия потребител

3. Инсталирайте Scoop:

   iex (нов-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Инсталирайте Hugo:

   лъжичка Инсталирай хюго

Как да създадете проект Hugo

За да създадете нов проект на Hugo, ще трябва да използвате вградения hugo нов сайт команда.

1. Отворете терминала или командния ред. Придвижете се до папката, където искате да създадете своя проект.
2. Изпълнете hugo нов сайт команда:

   хюго нов сайт нов-hugo-сайт

3. Придвижете се до местоположението на вашия проект Hugo във вашия файлов Explorer.
4. Отворете папката на проекта. Ще видите, че вашият нов уебсайт на Hugo има структурата на файловете и папките, необходими за работата на вашия уебсайт.

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

В момента вашият проект съдържа само основните основни папки за проекта Hugo. Стартирането на вашия уебсайт локално в този момент ще покаже само празен екран. Тъй като все още нямате HTML, CSS или UI дизайни, настроени за вашия уебсайт, ще трябва да ги добавите.

Hugo вече предоставя библиотека от вградени Хюго теми създадена от разработчиците.

1. Изберете тема, която харесвате. Всяка тема може да има малко по-различни инструкции за настройка, показани на съответната страница за преглед. Този урок ще използва Тема на приказката като пример.
2. Придвижете се до главната папка на вашия проект в терминал или команден ред.

   cd нов-hugo-сайт

3. Изпълнете командата, за да добавите темата Tale. Можете да добавите темата като подмодул, който ще създаде нова папка, наречена приказка вътре в тема папка.

   git init
   git подмодул добавете https://github.com/EmielH/tale-hugo.git themes/tale

   Като алтернатива можете да клонирате хранилището за приказки на GitHub в папката с теми на вашия проект.

   git клонинг https://github.com/EmielH/tale-hugo.git themes/tale

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!
   Използва се темата Хюго затова сайтът се казва Tale.
   То е много лесен за инсталиране и конфигурирайте.
   # Подзаглавие
   Това е някакво съдържание.
   # Друго подзаглавие
   Това е повече съдържание.

5. Чувствайте се свободни да добавите още файлове за уценяване, за да добавите още страници към уебсайта си.

Как да стартирате и тествате своя уебсайт на Hugo локално

За да стартирате уебсайта си, използвайте hugo service команда.

1. Отворете терминал или команден ред.
2. Придвижете се до главната папка на вашия проект Hugo.
3. Изпълнете hugo service команда:

   hugo service

4. Изчакайте уебсайтът да завърши процеса на стартиране. След като това приключи, терминалът ще отпечата съобщение, което казва от кой локален адрес можете да получите достъп до уебсайта. Обикновено това е http://localhost: 1313/.
5. Отворете уеб браузър и въведете http://localhost: 1313/, или който и да е адрес, който ви е дал терминалът. Ще видите главната страница на вашия уебсайт на Hugo.
6. На страницата ще има списък с публикации за всеки файл с намаление, който имате. В този случай има два файла за маркиране, попълнени със съдържание. Това включва страницата myFirstPost.md, която сте направили по-рано. Той също така включва нова публикация, наречена bananaCakeRecipe.md.
7. Щракнете върху връзката към заглавието в една от визуализациите. Ще ви отведе до цялата страница за тази конкретна публикация.

Хостване на вашия уебсайт на Hugo

Пускането и стартирането на статичен уебсайт е лесно и бързо с Hugo. Можете да използвате и конфигурирате предварително изградени теми и да стартирате вашия уебсайт на Hugo локално за тестване. Можете също да добавите страници със съдържание към уебсайта си с помощта на Markdown.

След като създадете своя уебсайт на Hugo, можете да започнете да научавате повече за това как да го хоствате. Има много безплатни опции за хостинг на уебсайтове, от които можете да избирате, като Dropbox, Google Drive или OneDrive.

Как да получите безплатен хостинг на уебсайтове с Dropbox, Google Drive или OneDrive

Прочетете Следващото