Статичке веб странице су једноставне за креирање и невероватно брзе за коришћење. Ако научите да користите Хуго, можете да генеришете статичке веб странице засноване на темама на Линук-у. Прављење веб страница је поново забавно!
Преглед садржаја
Генератор сајтова Хуго
Статички сајт је онај који не креира или мења веб странице у ходу. Нема позадинске базе података, обраде е-трговине или ПХП. Све веб странице су у потпуности унапред направљене и могу се врло брзо послужити посетиоцима.
Али то не значи да статична локација мора бити досадна. Они могу да користе све што ХТМЛ пружа, плус каскадни стилови (ЦСС), и ЈаваСцрипт. Такође могу лако да имају ствари као што су вртешке са сликама и веб странице које клизе преко позадинских слика.
Хуго генератор сајтова ради са шаблоном и било којим садржајем који сте креирали за генерисање завршене веб странице. Затим га можете поставити на платформу за хостовање и одмах имати веб локацију уживо.
Хуго користи маркдовн за странице и блогове које креирате. Маркдовн је отприлике најједноставнији језик за означавање који постоји, што чини одржавање ваше веб локације једноставним.
Хугове конфигурационе датотеке су унутра Томов очигледан, минималан језик (ТОМЛ) и ИАМЛ није језик за означавање (ИАМЛ), који су исто тако лаки. Још један бонус је да је Хуго невероватно брз — неке веб локације се учитавају за мање од секунде. Има много шаблона које можете изабрати, а све време се додаје још више, тако да је лако започети. Само изаберите шаблон и додајте неки садржај који га чини вашим.
Хуго такође делује као мали веб сервер директно на вашем рачунару. Можете да видите живу верзију своје веб странице док је дизајнирате и креирате, и кад год додате нову објаву. Такође се аутоматски ажурира сваки пут када „Сачувај“ у уређивачу, тако да можете одмах да видите ефекат својих промена у вашем претраживачу.
Хостовање вашег сајта
Када је у питању хостовање ваше статичне веб локације, размажени сте избором. Већина компанија нуде бесплатан хостинг за личну или употребу отвореног кода. Наравно, можете изабрати и обичну компанију за веб хостинг, као што је било шта од следећег:
Акробатски
Амазон С3
Азуре
ЦлоудФронт
ДреамХост
Фиребасе
ГитХуб странице
ГоДадди
Гоогле Цлоуд Стораге
Хероку
ГитЛаб странице
Нетлифи
Рацкспаце
Напредак
Инсталирање Хуга
Уз Хуго, морате имати инсталиран Гит. Гит је већ инсталиран на Федора 32 и Мањаро 20.0.1. На Убунту 20.04 (Фоцал Фосса,) аутоматски је додат као зависно од Хуга.
Да бисте инсталирали Хуго на Убунту, користите ову команду:
sudo apt-get install hugo
На Федори, потребно је да откуцате:
sudo dnf install hugo
Команда за Мањаро је:
sudo pacman -Syu hugo
Креирање веб странице са Хугом
Када замолимо Хугоа да направи нови сајт, он креира скуп директоријума за нас. Они ће садржати различите елементе наше веб странице. Међутим, ово није коначна веб локација која ће бити постављена на вашу платформу за хостинг. Ови директоријуми ће садржати тему, конфигурационе датотеке, садржај и слике које ће Хуго користити као улаз када од њега затражимо да направи стварну веб локацију.
То је као разлика између изворног кода и компајлираног програма. Изворни код је оно што компајлер користи за генерисање коначног производа. Слично, Хуго узима садржај ових директоријума и генерише радну веб страницу.
Команда коју ћемо покренути креираће директоријум са истим именом као и сајт који желите да креирате. Тај директоријум ће бити креиран у директоријуму у којем покрећете команду.
Дакле, пређите на директоријум у коме желите да се креира ваша веб локација. Користимо наш кућни директоријум, па откуцавамо следеће:
hugo new site geek-demo
Ово ствара директоријум „геек-демо“. Укуцавамо следеће да бисмо се пребацили у тај директоријум и покренули лс:
cd geek-demo/
ls
Видимо конфигурациону датотеку „цонфиг.томл“ и директоријуме који су креирани. Међутим, они су практично празни, јер је ово само скела за веб локацију.
Иницијализација Гита и додавање теме
Морамо да додамо тему како би Хуго знао како желимо да готова страница изгледа. Да бисмо то урадили, морамо да иницијализујемо Гит. У основној фасцикли ваше веб локације (оној која садржи датотеку „цонфиг.томл“), покрените ову команду:
git init
Постоје стотине тема можете бирати, а сваки од њих има веб страницу која га описује. Можете покренути демонстрацију теме и сазнати која је команда за преузимање. Користићемо један који се зове Мегхна.
Да бисмо ту тему уградили у нашу веб локацију, морамо да пређемо на нашу фасциклу „Теме“ и покренемо команду гит цлоне:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Гит приказује неке поруке како напредује. Када се заврши, користимо лс да видимо директоријум који садржи тему:
ls
Хуго теме укључују радни пример веб странице. Морате копирати ту подразумевану локацију у директоријуме своје веб локације.
Прво се вратите у основни директоријум ваше веб локације. Користимо -р (рекурзивну) цп опцију да укључимо поддиректорије и опцију -ф (присилно) да препишемо све постојеће датотеке:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Покретање вашег сајта локално
Урадили смо довољно да покренемо нову веб локацију локално. И даље ће садржати текст и слике чувара места, али то су само козметичке промене. Хајде да прво проверимо да технички делови раде.
Кажемо Хугу да покрене свој веб сервер и користи опцију -Д (драфт) да би се уверио да су све датотеке које би могле бити означене са „нацртом“ укључене на веб локацију:
hugo server -D
Слика испод приказује излаз наше хуго команде.
Речено нам је да је Хуго направио локацију за 142 милисекунде (рекли смо да је брзо, зар не?). Такође нам говори да притиснемо Цтрл+Ц да зауставимо сервер, али да га оставимо да ради за сада.
Отворите претраживач и идите на лоцалхост:1313 да бисте видели своју веб локацију.
Измена подразумеваног садржаја сајта
Док ради овако, Хуго сервира веб странице из меморије. Није креирао веб локацију на чврстом диску, већ радну копију у РАМ-у. Ипак, надгледа датотеке и слике на чврстом диску. Ако се било која од њих промени, то освежава веб локацију у вашем претраживачу — не морате чак ни да притиснете Цтрл+Ф5.
Отворите други прозор терминала и идите до основног директоријума ваше веб локације. Отворите датотеку „цонфиг.томл“ у уређивачу. Промените „басеУРЛ“ у домен на којем ће бити хостована ваша веб локација и промените „наслов“ у име ваше веб локације. Сачувајте промене, али оставите уређивач отворен.
Хуго открива да је дошло до промена у датотеци „цонфиг.томл“, па их чита, поново прави сајт и освежава претраживач.
Сада би требало да видите име које сте изабрали за своју веб локацију на картици претраживача. Добијање тренутних визуелних повратних информација о сачуваним променама значајно убрзава процес прилагођавања веб локације.
Све теме су различите, али смо открили да су оне које смо некада биле прилично једноставне за праћење. Различити делови веб-сајта имају очигледна имена, као и подешавања у сваком одељку, тако да је увек очигледно шта мењате.
И опет, чим сачувате промену, видећете шта сте променили у свом претраживачу. Ако вам се не свиђа, само поништите промену и поново сачувајте.
Различите конфигурационе датотеке које контролишу веб локацију посвећене су једном послу и означене на смислен начин. Пронаћи их није тешко, јер нема превише места на којима могу бити у именику. Обично се налазе у фасцикли „Подаци“.
Пошто користимо двојезични шаблон, наше конфигурационе датотеке на енглеском се налазе у поддиректоријуму „Ен“.
Ако отворите датотеку Дата > Ен > баннер.имл у уређивачу, видећете колекцију подешавања која регулишу област банера на веб локацији.
Када промените подешавања „Наслов“ и „Садржај“, мењате текст на страници банера.
Такође смо променили поставку „Ознака“, тако да текст дугмета каже „Сазнај више“. За своју веб локацију, вероватно ћете желети да промените и слику.
Чим сачувате промене, видећете их у свом претраживачу.
Промена других елемената веб локације
Све остале елементе можете променити на сличан начин. Само пронађите одговарајућу конфигурациону датотеку и промените подешавања и текст како би одговарали вашим потребама.
Такође ћете желети да промените слике. Подразумевана слика ће бити референцирана у конфигурационој датотеци. Можете лако пронаћи и погледати оригиналну слику да бисте видели које су њене димензије.
Слике се постављају у директоријум „Статиц > Имагес“ са поддиректоријумима за различите делове веб локације. Поставите све фавиконе и логотипе директно у директоријум „Статиц > Имагес“.
Додавање новог садржаја блога
До сада смо гледали како да променимо оно што већ постоји. Али, како да додамо нови блог пост? Хуго користи концепт под називом „Архетипови“ за креирање новог садржаја. Ако не направимо архетип за наше уносе на блогу, за нас ће бити креирана подразумевана датотека сваки пут када замолимо Хуга да направи нови унос на блогу.
Ово је у реду, али са архетипом можемо да уштедимо мало труда и да се уверимо да је што је могуће више предње материје унето за нас унапред.
У овој теми, уноси у блог се налазе у Цонтент > Енглисх > Блог. Ако отворимо постојећи унос на блогу у уређивачу—као што је „симпле-блог-пост-1.мд“—можемо да видимо главну ствар.
Морамо да копирамо тај одељак, уредимо тренутне уносе тако да се може користити као шаблон за архетип, а затим га сачувати у фасцикли „Архетипови“. Ако га назовемо „блог.мд“, аутоматски ће се користити као шаблон за нове уносе на блогу.
У гедит-у ово можемо да урадимо на следећи начин:
gedit content/english/blog/simple-blog-post-1.md
Означите горњи део укључујући две испрекидане линије, а затим притисните Цтрл+Ц да бисте га копирали. Притисните Цтрл+Н да започнете нову датотеку, а затим Цтрл+В да налепите оно што сте копирали.
Сада направите следеће промене и обавезно оставите размак после двотачка (:) у сваком реду:
Наслов: Промените ово у „{{ реплаце .Наме “-” ” ” | наслов }}” (укључује наводнике). Наслов за сваки нови пост на блогу биће аутоматски уметнут. Формира се од имена датотеке које проследите команди хуго нев, као што ћемо видети.
Датум: Промените ово у {{ .Дате }}. Датум и време када је блог креиран биће аутоматски унети.
Имаге_вебп: Ово је путања до слике заглавља блога у вебп формату. Ако тема не може да је пронађе, користиће слику из следећег реда.
слика: Ово је пут до слике заглавља блога у ЈПЕГ формату. Можете и оставити ове да упућују на подразумеване слике. Тада ће сви постови на блогу имати зауставну слику, чак и пре него што пронађете, промените величину или сачувате прилагођену. Када то урадите, можете лако да уредите име датотеке тако да одговара оном ваше прилагођене слике.
Аутор: Промените ово у своје име.
Опис: Овде уписујете кратак опис сваке објаве. Ако ово промените у празан стринг (“”), можете да унесете опис за сваки нови блог без потребе за уређивањем старог текста.
Сачувајте ову нову датотеку као „арцхетипес/блог.мд“, а затим затворите гедит. Хуго ће сада користити овај нови архетип кад год желите да направите нови унос на блогу.
Имајте на уму да наша датотека треба да има екстензију „.мд“ јер ћемо користити маркдовн за писање нашег уноса у блог:
hugo new blog/first-new-blog-post-on-this-site.md
Сада желимо да отворимо наш нови блог унос у уређивачу:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Наш нови блог пост се отвара у гедит-у.
Сви следећи делови предњег дела су додати за нас:
Наслов: Ово је закључено из назива датотеке. Ако треба било какво подешавање, можете га уредити овде.
Време и датум: додају се аутоматски.
Подразумевана слика: Вероватно ћете желети да пронађете релевантну слику без накнаде. Испустите га у Статиц > Имагес > Блог. Овде ћете морати да унесете стварно име датотеке слике.
Аутор: Ваше име се додаје аутоматски.
Опис: Ово је уређено.
Напишите блог користећи маркдовн и користите стандардне ознаке за наслове, подебљано, курзив, слике, везе итд. Сваки пут када сачувате датотеку, Хуго поново гради веб локацију и ажурира је у вашем претраживачу.
Слика испод показује како се наш нови унос на блогу појављује на почетној страници.
Слика испод показује како нови унос блога изгледа на сопственој страници.
Када завршите са писањем поста на блогу, сачувајте промене, а затим затворите уређивач. Такође можете да затворите претраживач јер ћемо зауставити Хуго сервер.
У прозору терминала у коме ради Хуго сервер, притисните Цтрл+Ц.
Изградња веб странице
У основном директоријуму ваше веб локације, издајте следећу команду да бисте направили веб локацију:
hugo
Хуго прави веб локацију и наводи број страница и других компоненти које је креирао. Било је потребно 134 милисекунде да се створи наш.
Хуго креира нови директоријум под називом „Јавно“ у основном директоријуму ваше веб локације. У директоријуму „Публиц“ пронаћи ћете све датотеке које требате да пренесете на своју платформу за хостовање.
Имајте на уму да морате да отпремите датотеке и директоријуме унутар „Публиц“ директоријума на своју платформу за хостовање, а не сам директоријум „Публиц“.
Сада знате основе
Свака тема ће захтевати мало истраживања да бисте открили како можете да је натерате да изгледа онако како желите, али то је забавни део! С обзиром на Хугову способност да одмах прикаже промене у прозору претраживача, ништа не траје предуго.
Вероватно ћете открити да су писање текста и проналажење и исецање слика делови процеса који трају најдуже.
Хуго страница за документацију је такође од помоћи, али опсежна. Надамо се да ће ово основно упутство бити довољно да започнете.
Ако користите Гит и Гитхуб, ГитЛаб, или БитБуцкет, такође су доступне интеграције за те платформе. Они гледају ваше удаљено Хуго складиште и поново праве вашу веб локацију кад год унесете промене на њој.