Како створити бесплатну статичку страницу са ГитХуб Пагес за 10 минута

Статичне локације постале су бесне и са добрим разлогом - оне су запањујуће брзе и, са све већим бројем подржаних хостинг услуга, прилично лако се постављају.

Нећу улазити у сва ко овде, шта, када, где или зашто статичних локација. Претпостављам да имате барем нејасну представу о томе шта су они или само желите да направите сопствену веб локацију и да вас није брига за остале детаље. У сваком случају овај пост је за вас.

Прво, желим да знате да ово пишем за што ширу публику; не треба вам никакво знање о програмирању да бисте наставили, али добро познавање командне линије и Гит-а ће вам пуно помоћи.

Па како можете да направите статичну страницу помоћу ГитХуб-а за 10 минута?

Радићемо са два специфична алата: ГитХуб Пагес, који је посебно дизајниран да служи статичном садржају, и генератор статичког садржаја под називом Јекилл.

Јекилл је Руби драгуљ за лако стварање статичних страница, тако да ћете морати да инсталирате Руби на свој рачунар ако желите да користите Јекилл. Ако имате ОСКС, највероватније већ имате верзију Руби-а (мада ћете можда морати да је ажурирате). Ако то немате или сте на Виндовс рачунару, овде можете сазнати више о његовом инсталирању: Инсталирање Руби-а.

Отклоните то с пута, отворите нову терминалну удовицу и откуцајте gem install bundler jekyll. Ово ће инсталирати Бундлер (алат за управљање пакетима Руби) и Јекилл.

Једном када се инсталирају они драгуљи (Руби пакети), откуцајте Jekyll new my-static-site(дајте му име како год желите) и који ће покретати Јекилл-ов генератор за креирање вашег пројекта у новом директоријуму. Након што се креира ваша веб локација, ускочите у новостворени директоријум локације тако што ћете откуцати cd my-static-site(или како cdгод назвали пројекат).

Отворите свој пројекат у уређивачу текста и видећете неколико датотека и директоријума које је Јекилл створио за вас. Тренутно се само требате бавити Гемфилеом (а не Гемфиле.лоцк). Гемфиле је Руби датотека која управља свим повезаним Руби пакетима потребним за покретање пројекта.

Датотека ће садржати ред са Јекилл верзијом, коментаришите:

#gem "jekyll", "~> 4.0.0" 

Затим додајте овај ред:

gem "github-pages", group: :jekyll_plugins 

Може бити пуно замерки када инсталирате драгуљ ГитХуб Пагес - понекад су драгуљи од којих зависи застарели или драгуљи које сте локално инсталирали превише су модерни за ГитХуб странице.

Открио сам да ово може отежати локалну изградњу и тестирање моје странице Јекилл. Можда ће бити најлакше само локално тестирати и сачувати изградњу док не будете спремни за примену. Међутим, у време писања овог текста можете одредити ове верзије зависности у свом Гемфилеу и Јекилл ће радити и локално и са ГитХуб страницама:

gem "jekyll", "~> 3.8.5" gem "github-pages","~> 202" , group: :jekyll_plugins group :jekyll_plugins do gem "jekyll-feed", "~> 0.11.0" end 

Хвала Алек Ваибел-у на СтацкОверфлов-у на тој најновијој конфигурацији.

Да бисте видели своју веб локацију на делу, покрените је bundle exec Jekyll serveу командној линији. Ово ће покренути сервер и моћи ћете да видите своју страницу тако што ћете откуцати „лоцалхост: 4000“ у УРЛ траку прегледача.

Воила! Направили сте статичну страницу са Јекилл-ом и налазите се у директоријуму пројекта. Готово сте 50%.

Нека је ово на мрежи

Идите на ГитХуб.цом и пријавите се, или ако већ имате налог, изаберите дугме „ново“ и направите спремиште. Важно је да своје спремиште именујете по вези коју ће ваш ГитХуб Пагес налог служити, а то је ваше_корисничко име.гитхуб.ио. На пример, моје корисничко име за ГитХуб је тфантина, а мој блог је тфантина.гитхуб.ио, тако да је мој ГитХуб репо име назван: "тфантина.гитхуб.ио".

Натраг у прозор терминала, гурните Јекилл страницу са рачунара на ГитХуб покретањем следећих команди:

git init git remote add origin [email protected]:/.git git commit -am “Setting up Jekyll!” git push -u origin master 

(При замени корисничког имена и имена пројекта не требају вам отварање и затварање).

Једном када су ваше промене пребачене у ваше спремиште, требало би да имате исправну статичку страницу. То је зато што користите драгуљ ГитХуб Пагес и именовали сте своје спремиште на такав начин да ГитХуб разуме да желите да га опслужујете са ГитХуб Пагес.

То можете потврдити било посетом вашој веб локацији или одласком на картицу подешавања на ГитХуб-у и помицањем до одјељка страница. Требали бисте видети зелени оквир који показује где је ваша веб локација објављена:

Такође ћете приметити да своју тему можете лако променити и овде. ГитХуб нуди неколико задатих тема за Јекилл, али наравно можете и сами да направите своје.

Ако ваша локација каже да је објављена, али изгледа празно, можда ћете морати да је освежите или покушате да је погледате у приватном прозору. Ово може изгледати очигледно, али ме погађа готово сваки пут када поставим нову Јекилл инстанцу.

Ако се све одвија по плану, ваша страница би требало да изгледа отприлике овако:

Ту сте - за само неколико минута сте креирали и поставили статичну веб страницу са ГитХуб страницама. Али вероватно желите да на своју страницу можете да ставите неки садржај.

Обећао сам да ће ово трајати само десет минута, па нећу залазити у све детаље страница, насловне странице или језика за шаблонирање Ликуид. То је пост за други дан. Али поделићу како да направите свој први пост.

Поново у свом уређивачу текста отворите фасциклу „_постс“. Већ постоји пост који вас поздравља на вашем новом блогу. Направите нову датотеку умањења и сачувајте је са именом у овом формату: ИЕАР-МОНТХ-ДАИ-ТИТЛЕ.маркдовн (погледајте доле):

Јекилл пост садржи два одељка: предњи део и тело.

Наслов даје Јекилл-у конкретна упутства као што ће бити наслов поста, који распоред користити и када је пост написан.

Предња ствар је врло прилагодљива. На пример, желео сам да моји постови имају херојске слике, па сам створио lead_imageознаку и ставио неку синтаксу у свој распоред да бих посебно проверио да ли водеће слике имају насловну страну сваког поста. Језик шаблона Ликуид олакшава увлачење садржаја са предње стране у вашу тему.

Много више можете учинити са предњом материјом, али кренимо од генеричког примера.

Подразумевана предња ствар изгледа овако:

— layout: post title: "Welcome to Jekyll!" date: 2019-11-09 18:07:11 -0600 categories: jekyll update — 
  • Лаиоут говори Јекилл-у на којем распореду желите да се садржај приказује. Можете имати више распореда за различите странице или типове постова.
  • Наслов поста
  • Датум објављивања
  • Категорије, које су у основи ознаке. Можете додати онолико мало или колико год желите раздвојених размацима.

Након почетне теме, ваш пост може бити написан у Маркдовн-у, што вам даје велику флексибилност у писању садржаја поста.

Након што завршите са објавом, спремите је и отворите прозор терминала.

git commit -am “Publishes first post git push

После минута (и можда освежења), моћи ћете да видите свој пост.

Надамо се да сада имате радну статичну страницу на ГитХуб страницама створену са Јекилл-ом! Ако имате било каквих проблема или питања, твитујте на @тфантина или ми пошаљите е-пошту на цонтацт@трависфантина.цом.