Статичните уебсайтове са лесни за създаване и невероятно бързи за използване. Ако се научите да използвате Hugo, можете да генерирате базирани на теми статични уебсайтове в Linux. Създаването на уебсайтове отново е забавно!
Съдържание
Генераторът на уебсайтове Hugo
Статичният сайт е този, който не създава или променя уеб страници в движение. Няма фонова база данни, обработка на електронна търговия или PHP. Всички уеб страници са изцяло предварително изградени и могат да бъдат обслужвани на посетителите много бързо.
Но това не означава, че статичният сайт трябва да е скучен. Те могат да използват всичко, което HTML предоставя, плюс каскадни стилови таблици (CSS) и JavaScript. Те също така могат лесно да имат неща като въртележки с изображения и уеб страници, плъзгащи се върху фонови изображения.
Генераторът на сайтове Hugo работи с шаблон и всяко съдържание, което сте създали, за да генерира завършен уебсайт. След това можете да го поставите на хостинг платформа и веднага да имате уебсайт на живо.
Хюго използва намаление за страниците и записите в блога, които създавате. Markdown е почти най-простият език за маркиране, който има, което прави поддръжката на вашия сайт лесна.
Конфигурационните файлове на Hugo са в Очевидният, минимален език на Том (TOML) и YAML не е език за маркиране (YAML), които са също толкова лесни. Друг бонус е, че Hugo е невероятно бърз – някои сайтове се зареждат за по-малко от секунда. Има много шаблони, от които можете да избирате, и непрекъснато се добавят още, така че е лесно да започнете. Просто изберете шаблон и добавете съдържание, което го прави ваш.
Hugo също действа като малък уеб сървър направо на вашия компютър. Можете да видите версия на уебсайта си на живо, докато го проектирате и създавате и всеки път, когато добавяте нова публикация. Той също така автоматично се актуализира всеки път, когато „Запишете“ в редактора, така че можете незабавно да видите ефекта от промените си в браузъра си.
Хостинг на вашия сайт
Когато става въпрос за хостване на вашия статичен уебсайт, вие сте разглезени за избор. Повечето компании предлага безплатен хостинг за лична употреба или използване с отворен код. Разбира се, можете да изберете и обикновена компания за уеб хостинг, като някое от следните:
Висш пилотаж
Amazon S3
лазурен
CloudFront
DreamHost
Firebase
Страници на GitHub
GoDaddy
Google Cloud Storage
Хероку
Страници на GitLab
Netlify
Rackspace
Пренапрежение
Инсталиране на Hugo
Заедно с Hugo, трябва да имате инсталиран Git. Git вече беше инсталиран на Fedora 32 и Manjaro 20.0.1. В Ubuntu 20.04 (Focal Fossa,) той беше добавен автоматично като зависим от Hugo.
За да инсталирате Hugo на Ubuntu, използвайте тази команда:
sudo apt-get install hugo
Във Fedora трябва да напишете:
sudo dnf install hugo
Командата за Manjaro е:
sudo pacman -Syu hugo
Създаване на уебсайт с Hugo
Когато помолим Hugo да направи нов сайт, той създава набор от директории за нас. Те ще съдържат различните елементи на нашия уебсайт. Това обаче не е последният уебсайт, който ще бъде качен на вашата хостинг платформа. Тези директории ще съдържат темата, конфигурационните файлове, съдържанието и изображенията, които Hugo ще използва като вход, когато го помолим да изгради действителния уебсайт.
Това е като разликата между изходния код и компилираната програма. Изходният код е нещата, които компилаторът използва за генериране на крайния продукт. По подобен начин Hugo взема съдържанието на тези директории и генерира работещ уебсайт.
Командата, която ще изпълним, ще създаде директория със същото име като сайта, който искате да създадете. Тази директория ще бъде създадена в директорията, в която изпълнявате командата.
Така че, преминете към директорията, в която искате да бъде създаден вашият уебсайт. Използваме нашата домашна директория, така че въвеждаме следното:
hugo new site geek-demo
Това създава директория „geek-demo“. Въведем следното, за да превключим в тази директория и стартираме ls:
cd geek-demo/
ls
Виждаме конфигурационния файл “config.toml” и директориите, които са създадени. Те обаче са почти празни, тъй като това е само скелето за уебсайта.
Инициализиране на Git и добавяне на тема
Трябва да добавим тема, така че Хюго да знае как искаме да изглежда готовият сайт. За да направим това, трябва да инициализираме Git. В основната папка на вашия сайт (тази, която съдържа файла “config.toml”), изпълнете тази команда:
git init
Има стотици теми можете да избирате и всеки от тях има уеб страница, която го описва. Можете да стартирате демонстрация на тема и да разберете каква е командата, за да я изтеглите. Ще използваме един на име Мегна.
За да включим тази тема в нашия уебсайт, трябва да преминем към нашата папка „Теми“ и да изпълним командата git clone:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git показва някои съобщения, докато напредва. Когато приключи, използваме ls, за да видим директорията, съдържаща темата:
ls
Темите на Hugo включват работещ примерен уебсайт. Трябва да копирате този сайт по подразбиране в директориите на вашия уебсайт.
Първо се върнете към главната директория на вашия уебсайт. Използваме опцията -r (рекурсивна) cp, за да включим поддиректории, и опцията -f (принудително), за да презапишем всички съществуващи файлове:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Стартиране на вашия сайт локално
Направихме достатъчно, за да стартираме нов уебсайт локално. Той все още ще съдържа текст и изображения, но това са само козметични промени. Нека първо проверим работата на техническите елементи.
Казваме на Hugo да стартира своя уеб сървър и да използва опцията -D (чернова), за да се увери, че всички файлове, които може да бъдат маркирани с „чернова“, са включени в уебсайта:
hugo server -D
Изображението по-долу показва изхода от нашата команда hugo.
Казват ни, че Хюго е построил сайта за 142 милисекунди (казахме, че е бърз, нали?). Също така ни казва да натиснем Ctrl+C, за да спрем сървъра, но да го оставим да работи засега.
Отворете браузъра си и се насочете към localhost:1313, за да видите уебсайта си.
Промяна на съдържанието на сайта по подразбиране
Докато работи по този начин, Hugo обслужва уеб страниците от памет. Той не е създал уебсайта на твърдия диск, а по-скоро работно копие в RAM. Той обаче следи файловете и изображенията на твърдия диск. Ако някой от тях бъде променен, той обновява сайта в браузъра ви – дори не е нужно да натискате Ctrl+F5.
Отворете друг прозорец на терминала и отидете до главната директория на вашия уебсайт. Отворете файла “config.toml” в редактор. Променете „baseURL“ на домейна, на който ще бъде хостван уебсайтът ви, и променете „заглавието“ на името на вашия уебсайт. Запазете промените си, но оставете редактора отворен.
Hugo открива, че е имало промени във файла „config.toml“, така че ги чете, възстановява сайта и обновява браузъра.
Сега трябва да видите името, което сте избрали за вашия сайт, в раздела на браузъра. Получаването на незабавна визуална обратна връзка за запазените промени значително ускорява процеса на персонализиране на уебсайт.
Всички теми са различни, но открихме тези, които преди бяха доста лесни за следване. Различните раздели на уебсайта имат очевидни имена, както и настройките във всеки раздел, така че винаги е очевидно какво променяте.
И отново, веднага щом запазите промяна, виждате какво сте променили в браузъра си. Ако не ви харесва, просто отменете промяната и запазете отново.
Различните конфигурационни файлове, които контролират уебсайта, са посветени на една задача и са обозначени по смислен начин. Проследяването им не е трудно, тъй като няма твърде много места, където могат да бъдат в директорията. Обикновено те са в папката „Данни“.
Тъй като използваме двуезичен шаблон, нашите английски конфигурационни файлове са в поддиректорията „En“.
Ако отворите файла Data > En > banner.yml в редактор, ще видите колекцията от настройки, които управляват областта на банера на уебсайта.
Когато промените настройките „Заглавие“ и „Съдържание“, вие променяте текста на страницата с банера.
Също така променихме настройката „Етикет“, така че текстът на бутона казва „Научете повече“. За вашия сайт вероятно ще искате да промените и изображението.
Веднага след като запазите промените си, ще ги видите в браузъра си.
Промяна на други елементи на уебсайт
Можете да промените всички останали елементи по подобен начин. Просто проследете подходящия конфигурационен файл и променете настройките и текста, за да отговарят на вашите нужди.
Вие също ще искате да промените изображенията. Изображението по подразбиране ще бъде посочено в конфигурационния файл. Можете лесно да намерите и разгледате оригиналното изображение, за да видите какви са неговите размери.
Изображенията се поставят в директорията „Статични > Изображения“ с поддиректории за различните секции на уебсайта. Поставете всички фавикони и лога директно в директорията „Статични > Изображения“.
Добавяне на ново съдържание в блога
Досега гледахме как да променим това, което вече има. Но как да добавим нова публикация в блога? Hugo използва концепция, наречена „архетипи“, за създаване на ново съдържание. Ако не създадем архетип за записите в нашия блог, файл по подразбиране ще бъде създаден за нас всеки път, когато помолим Hugo да създаде нов запис в блога.
Това е добре, но с архетип можем да си спестим малко усилия и да се уверим, че колкото е възможно повече от предната материя е въведена за нас предварително.
В тази тема записите в блога се намират в Съдържание > Английски > Блог. Ако отворим съществуващ запис в блог в редактор – като “simple-blog-post-1.md” – можем да видим предната част.
Трябва да копираме този раздел, да редактираме текущите записи, така че да може да се използва като шаблон за архетип и след това да го запишем в папката „Архетипи“. Ако го наречем „blog.md“, той автоматично ще се използва като шаблон за нови записи в блога.
В gedit можем да направим това, както следва:
gedit content/english/blog/simple-blog-post-1.md
Маркирайте горната част, включително двете пунктирани линии, и след това натиснете Ctrl+C, за да я копирате. Натиснете Ctrl+N, за да започнете нов файл, и след това Ctrl+V, за да поставите това, което сте копирали.
Сега направете следните промени и не забравяйте да оставите интервал след двоеточие (:) във всеки ред:
Заглавие: Променете това на „{{ replace .Name “-” ” ” | заглавие }}” (включете кавичките). Заглавие за всяка нова публикация в блога ще се вмъква автоматично. Той се формира от името на файла, което предавате на командата hugo new, както ще видим.
Дата: Променете това на {{ .Date }}. Датата и часът на създаване на блога ще бъдат въведени автоматично.
Image_webp: Това е пътят към заглавното изображение на блога във формат webp. Ако темата не може да намери такава, тя ще използва изображението от следващия ред.
изображение: Това е пътят към заглавното изображение на блога във формат JPEG. Можете също така да ги оставите да сочат към изображенията по подразбиране. След това всички публикации в блога ще имат временно изображение, дори преди да намерите, преоразмерите или запишете персонализирано такова. След като направите това, можете лесно да редактирате името на файла, за да съответства на това на вашето персонализирано изображение.
Автор: Променете това на вашето име.
Описание: Тук въвеждате кратко описание на всяка публикация. Ако промените това на празен низ (“”), можете да въведете описание за всеки нов блог, без да се налага да редактирате стария текст.
Запазете този нов файл като „archetypes/blog.md“ и след това затворете gedit. Hugo вече ще използва този нов архетип, когато искате да създадете нов запис в блога.
Обърнете внимание, че нашият файл трябва да има разширение „.md“, защото ще използваме markdown, за да напишем нашия запис в блога:
hugo new blog/first-new-blog-post-on-this-site.md
Сега искаме да отворим нашия нов запис в блога в редактор:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Новата ни публикация в блога се отваря в gedit.
Всички от следните части от предната част са добавени за нас:
Заглавие: Това е изведено от името на файла. Ако има нужда от промяна, можете да го редактирате тук.
Час и дата: Те се добавят автоматично.
Изображение по подразбиране: Вероятно ще искате да намерите подходящо изображение без възнаграждения. Пуснете го в Статично > Изображения > Блог. Тук ще трябва да въведете действителното име на файла на изображението.
Автор: Вашето име се добавя автоматично.
Описание: Това е редактирано.
Напишете блога, като използвате markdown и използвайте стандартното маркиране за заглавия, получер, курсив, изображения, връзки и т.н. Всеки път, когато запазвате файла си, Hugo възстановява уебсайта и го актуализира във вашия браузър.
Изображението по-долу показва как се появява новият ни запис в блога на началната страница.
Изображението по-долу показва как изглежда новият запис в блога на собствената му страница.
След като приключите с писането на публикацията си в блога, запазете промените и след това затворете редактора. Можете също да затворите браузъра си, защото ще спрем сървъра на Hugo.
В прозореца на терминала, в който работи сървърът Hugo, натиснете Ctrl+C.
Изграждане на уебсайта
В главната директория на вашия уебсайт издайте следната команда, за да създадете уебсайта си:
hugo
Hugo изгражда уебсайта и изброява броя на страниците и другите компоненти, които е създал. Създаването на нашия отне 134 милисекунди.
Hugo създава нова директория, наречена „Public“ в основната директория на вашия уебсайт. В директорията “Public” ще намерите всички файлове, които трябва да прехвърлите към вашата хостинг платформа.
Имайте предвид, че трябва да качите файловете и директориите в директорията „Public“ на вашата хостинг платформа, а не в самата директория „Public“.
Сега знаете основите
Всяка тема ще изисква малко проучване, за да разберете как можете да я накарате да изглежда така, както искате, но това е забавната част! Като се има предвид способността на Hugo да изобразява промените незабавно в прозореца на браузъра, нищо не отнема твърде много време.
Вероятно ще откриете, че писането на вашия текст и намирането и подрязването на изображения са частите от процеса, които отнемат най-дълго.
Хюго сайтът за документи също е полезен, но обширна. Надяваме се, че това основно ръководство ще бъде достатъчно, за да започнете.
Ако използвате Git и Github, GitLab, или BitBucket, има и налични интеграции за тези платформи. Те гледат вашето отдалечено хранилище на Hugo и възстановяват вашия сайт на живо всеки път, когато натискате промени в него.