Изградња за веб је увек узбудљива перспектива. Омогућава програмерима да имају свој пут за прављење веб апликација. Они могу да бирају оквир, технологију, алате и филозофију коју желе да користе.
Једна таква филозофија је Јамстацк. Нуди флексибилан приступ решавању проблема веб развоја.
У овом чланку ћете научити како да направите своју прву Јамстацк апликацију. Хајде да почнемо.
Преглед садржаја
Шта је Јамстацк?
Јамстацк је једна од нових веб филозофија за прављење ствари за веб. Технички, нуди програмерима веб архитектуру која се може саставити. Можете одабрати своје оквире и алате да бисте постигли исти циљ.
Ако погледате изблиза,
Јам + стацк = ЈАМстацк.
Јамстацк се састоји од три главне компоненте:
- Ј за ЈаваСцрипт
- А за програмски интерфејс апликације (АПИ)
- М за маркуп
Овај приступ одваја пословну логику од података, раздвајајући слој веб искуства. Предности укључују:
- Брже време учитавања (скоро тренутно).
- Флексибилан и брз развојни ток.
- Побољшана скалабилност и могућност одржавања.
Да бисте прочитали више о Јамстацк-у, погледајте Јамстацк фор Невбиес.
Историја Јамстацка
Јамстацк је релативно нов. У 2016. години, Матт Биилманн је представио Јамстацк у презентацији компаније, показујући свету како да направи веб страницу без да се иде традиционалним путем.
Решење одваја логику апликације од зависности од позадинског сервера. Дакле, већина садржаја се сервира преко статичких датотека са ЦДН-овима — динамичким функцијама које су подржане и којима се приступа преко АПИ-ја. И, ако сервер треба да обради било коју динамичку радњу, она се компајлира и гура у ЦДН-ове, пре него што јој приступи крајњи корисник.
Да бисмо боље разумели историју Јамстацк-а, морамо погледати статичне и динамичке веб локације.
- Статичка веб локација: Статичка веб локација се налази на серверу, али нема динамичке аспекте. Током почетне ере Интернета, већина сајтова су биле статичне веб локације које су служиле ХТМЛ, ЦСС и слике ускладиштене на серверу. Приступ је брз јер сервер не мора да троши време на обраду захтева корисника и увек има спремне датотеке. Међутим, никаква могућност да се било шта промени не води ни до интерактивности.
- Динамички веб сајт: Динамички сајтови нуде интерактивност тако што обрађују захтеве корисника и генеришу потребан ХТМЛ за приказивање. Приступ је спор, али додаје предности интерактивности. Већина модерних сајтова су динамички сајтови. Најбољи пример би биле веб локације које покреће ВордПресс.
И, онда, имамо Јамстацк веб локације. Хајде да научимо како је решио проблем и статичких и динамичких сајтова.
Јамстацк веб локације: како раде?
Јамстацк решава два кључна проблема:
- Споро време учитавања динамичког сајта
- Статична интерактивност сајтова
Јамстацк локација служи статичним датотекама, што је брзо. Али такође садржи ЈаваСцрипт, који може да ступи у интеракцију са АПИ-јима за послуживање динамичког садржаја.
Иза кулиса, биће вам потребан генератор статичког сајта да бисте извршили тежак посао креирања статичних веб страница.
Ови генератори статичких веб локација користе Маркдовн за опслуживање статичких веб локација. Генератор статичког сајта генерише статичке датотеке из доступних ХТМЛ, ЦСС и ЈаваСцрипт датотека. Када се једном развије, статичка локација се затим опслужује преко ЦДН-ова.
Док сервирате статичне датотеке, сајтови се учитавају скоро тренутно. Међутим, да бисте додали динамички аспект сајту, морате се ослонити на ЈаваСцрипт. ЈаваСцрипт датотеке могу да се повежу на АПИ-је и додају динамичке податке комуницирањем са базом података.
Изградња прве веб странице Јамстацк
Пошто Јамтацк нуди слободу, можете одабрати било који Јамстацк фрамеворк/генератор статичких локација, укључујући Хуго, Гатсби, Нект.јс, Хеко и друге.
Такође прочитајте: Најбољи оквири за ЈамСтацк
А за примену, можете да га примените на ГитХуб Пагес, Нетлифи, Азуре статичне веб апликације и друге.
Користићемо Хуго за развој Јамстацк-а и Нетлифи за хостовање нашег сајта за овај водич.
Водич претпоставља да имате основно разумевање веба. Морате знати како веб функционише. Поред тога, требало би да знате и како да користите Гит.
Хајде да почнемо.
#1. Инсталирање предуслова: Го и Гит
Да бисте инсталирали Хуго, потребне су вам две ствари: Гит и Го. Потребан нам је Гит да поједноставимо наш ток израде (видећете то касније са Нетлифи). Го је неопходан јер је Хуго изграђен на њему.
Користимо Убунту који ради на ВСЛ 2 на Виндовс 11. Приступамо Убунту кернелу директно из Виндовс-а.
Такође прочитајте: Виндовс 11 сусреће се са Линуком: Дубоко уроњење у ВСЛ2 могућности
Можете одабрати оперативни систем, Виндовс, Линук или Мац.
Инсталирање Гит-а
У Убунту-у можете инсталирати Гит тако што ћете покренути следећу команду.
$ sudo apt update $ sudo apt install git
У случају Виндовс-а, мораћете да преузмете Виндовс бинарне инсталационе програме. Погледајте наш комплетан водич за инсталацију Гита.
Да бисте проверили да ли је Гит исправно инсталиран, откуцајте следећу команду.
[email protected]:~$ git --version git version 2.34.1
Инсталирање Го
Сада је време да инсталирате Голанг. Да бисте то урадили, потребно је да покренете неколико команди на Линук-у. Дакле, урадимо то у корацима.
Корак 1: Уклоните претходну Го инсталацију и креирајте локално Го стабло.
$ rm -rf /usr/local/go && tar -C /usr/local -xzf go1.20.4.linux-amd64.tar.gz
Корак 2: Прилагођавање ПАТХ променљиве окружења
екпорт ПАТХ=$ПАТХ:/уср/лоцал/го/би
Корак 3: На крају, проверите да ли је Голанг исправно инсталиран.
$ go version. #output go version go1.18.1 linux/amd64
Сјајно, сада смо спремни да инсталирамо Хуго!
Инсталирање Хуга
У зависности од тога да ли користите Хомебрев или Цхоцолатели, мораћете да користите једну од следећих команди.
За Хомебрев:
$ brew install hugo
За чоколаду:
$ brew install hugo -confirm
И, ако не користите ниједну од њих, можете их инсталирати директно из извора.
$ mkdir $HOME/src cd $HOME/src git clone https://github.com/gohugoio/hugo.git cd hugo go install --tags extended
Да бисте проверили да ли је Хуго успешно инсталиран, покрените следећу команду.
$ hugo -version
Start building sites …
hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1
INFO 2023/05/05 12:20:38 syncing static files to /home/nitt/techblog.co.rs/public/
| EN
-------------------+-----
Pages | 35
Paginator pages | 0
Non-page files | 0
Static files | 23
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 117 ms
#2. Креирање Хуго сајта
Хуго нуди једноставан начин за креирање сајта. Да бисте то урадили, покрените следећу команду.
$ hugo new site techblog.co.rs-jamstack
Congratulations! Your new Hugo site is created in /home/nitt/techblog.co.rs-jamstack. Just a few more steps and you're ready to go: 1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/ or create your own with the "hugo new theme <THEMENAME>" command. 2. Perhaps you want to add some content. You can add single files with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>". 3. Start the built-in live server via "hugo server". Visit https://gohugo.io/ for quickstart guide and full documentation.
#3. Одабир Хуго теме
Хуго нуди приступ мноштву тема. Ове теме представљају полазну тачку за ваш пројекат. А да бисте направили Јамстацк сајт са Хугом, потребна вам је тема.
#4. Прављење сајта за мала предузећа помоћу Јамстацк-а
За туторијал ћемо користити тему Хуго Херо. Ова вишенаменска тема нуди функције као што су секције пуне ширине и креирање портфеља преко Маркдовн-а.
Да бисте инсталирали тему, копирајте њен репо линк и клонирајте је. Пре него што наставите, уверите се да сте у основном директоријуму.
git clone https://github.com/zerostaticthemes/hugo-hero-theme.git themes/hugo-hero-theme
#output Cloning into 'themes/hugo-hero-theme'... remote: Enumerating objects: 1141, done. remote: Total 1141 (delta 0), reused 0 (delta 0), pack-reused 1141 Receiving objects: 100% (1141/1141), 28.17 MiB | 58.00 KiB/s, done. Resolving deltas: 100% (489/489), done.
Копирање подразумеваног садржаја
Да бисте користили подразумевани садржај са сајтом, покрените следећу команду.
$ cp -a themes/hugo-hero-theme/exampleSite/. .
Копира садржај фолдера екамплеСите у корен ваше веб локације.
Ажурирање датотеке Цонфиг.томл
Затим морамо да уредимо датотеку Цонфиг.томл. У њему се чувају информације о конфигурацији пројекта и потребно га је исправно подесити да би ваша Јамстацк локација радила.
За сада, морате да уредите следећи ред у њему.
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Напомена: Морате наставити да ажурирате датотеку Цонфиг.томл како ваш пројекат напредује. Такође, пошто сте користили подразумевани садржај, ваш Цонфиг.томл се ажурира да би се прилагодио садржају примера.
Тестирамо нашу Јамстацк локацију
Да бисмо покренули наш сајт, морамо поново да генеришемо Хуго локацију помоћу команде хуго.
$ hugo
Затим покрећемо сервер. Да бисте то урадили, покрените команду хуго серве.
$ hugo serve
#output [email protected]:~/techblog.co.rs$ hugo server port 1313 already in use, attempting to use an available port Start building sites … hugo v0.92.2+extended linux/amd64 BuildDate=2023-01-31T11:11:57Z VendorInfo=ubuntu:0.92.2-1ubuntu0.1 | EN -------------------+----- Pages | 35 Paginator pages | 0 Non-page files | 0 Static files | 23 Processed images | 0 Aliases | 0 Sitemaps | 1 Cleaned | 0 Built in 71 ms Watching for changes in /home/nitt/techblog.co.rs/{archetypes,content,data,layouts,static,themes} Watching for config changes in /home/nitt/techblog.co.rs/config.toml Environment: "development" Serving pages from memory Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender Web Server is available at //localhost:42229/ (bind address 127.0.0.1) Press Ctrl+C to stop
Напомена: Ваш сајт је сада хостован и доступан на 127.0.0.1. Ако се из неког разлога не отвара, покушајте да отворите алтернативну адресу која је наведена поред. У овом случају, то је локални хост:42973
Уређивање тема Подразумевани садржај
Одавде можете слободно да уређујете подразумевани садржај. То можете учинити тако што ћете отићи у фасциклу Садржај. Уредимо садржај индексне странице. Да бисте то урадили, идите на Садржај > Посао > Индек.мд
Овако изгледа након уређивања.
Креирање блог сајта
Морате одабрати одговарајућу тему ако само желите да направите блог. У ту сврху користимо Хиде тему.
Слично као што смо поставили нашу нову локацију, потребно је да покренете следеће команде.
$ hugo new site techblog.co.rs-jamstack $ cd techblog.co.rs-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Затим уредите датотеку Цонфиг.томл да додате вредност тхеме = ‘хиде’.
Креирајте нову објаву
Морате покренути команду хуго нев да бисте креирали нову објаву, након чега следи Маркдовн датотека.
$ hugo new hellogeekflare.md
#output [email protected]:~/geefklare-jamstack$ hugo new hellogeekflare.md Content "/home/nitt/geefklare-jamstack/content/hellogeekflare.md" created [email protected]:~/geefklare-jamstack$
Уређивање поста
Да бисте уредили новостворену хеллогеефкларе.мд пост, отворите датотеку хеллогеекфларе.мд у жељеном уређивачу текста.
Показаће вам следећи садржај.
--- title: "Hello techblog.co.rs" date: 2023-05-04T11:39:10+05:30 draft: true ---
Овде можете додати било који садржај у Маркдовн.
Хајде да додамо следећи садржај у Маркдовн.
### Hello, World! This is a new post created to show how easy it is to create **Jamstack website**. We’re using Hugo and Netlify to create our *basic Jamstack site*.
Када ставите горњи садржај у .мд датотеку, требало би да изгледа овако (у зависности од вашег уређивача, користимо Висуал Студио Цоде).
Међутим, изгледаће потпуно другачије када га послужимо.
Напомена: Обавезно промените вредност нацрта из „тачно“ у „нетачно“
Сјајно! Направили смо две Јамстацк веб локације, једну локацију за мала предузећа и другу блог.
Након што уредите своју веб локацију, можете генерисати датотеке покретањем команде хуго. То ће креирати датотеку и ставити је у /публиц фолдер.
$ hugo
#5. Примена Јамстацк сајта на Нетлифи
Са креираним нашим сајтовима, хајде да их применимо. У ту сврху користићемо Нетлифи.
Нетлифи је услуга подржана од ЦДН-а која корисницима попут вас нуди хостовање брзих сајтова. Можете повезати Нетлифи са Гитхуб-ом и аутоматизовати процес. То је бесплатна услуга са неким функцијама иза паивалл-а.
Наш посао је да гурнемо код у Нетлифи и пустимо Нетлифи да све ради уместо нас.
Локално подешавање Гит спремишта
Сада је време да поставимо Гит спремиште.
Да бисте покренули Гит спремиште, покрените следећу команду у корену вашег пројекта.
$ git init
Затим морамо да поставимо тему као подмодул. Ово је важан корак. Технички, он ствара подрепозиторије унутар вашег спремишта. (Сећате се, урадили сте гит клон теме Хуго?). То ће вам дати већу контролу над вашим Јамстацк сајтом.
На пример, можете преузети ажурирања своје теме. Такође морате то да урадите јер су Нетлифи-у потребне теме као подмодули да их угости.
Дакле, да бисте додали тему као подмодул, покрените следећу команду.
$ git rim --cached themes/hyde $ git submodule add https://github.com/spf13/hyde themes/hyde
#output [email protected]:~/techblog.co.rs-jamstack$ git submodule add https://github.com/spf13/hyde themes/hyde Adding existing repo at 'themes/hyde' to the index [email protected]:~/techblog.co.rs-jamstack$
Креирање спремишта на ГитХуб-у
Када се заврши локално подешавање, време је за креирање новог ГитХуб спремишта.
Након креирања, потребно је да додате порекло у своје локално спремиште.
$ git remote add origin https://github.com/logan99/techblog.co.rs-jamstack-tutorial.git
Сада, повуци.
$ git branch -M main $ git pull origin main
Направите ново урезивање
Сада је време да направите нову урезивање. Покрените следећу команду да додате све датотеке у главну грану.
$ git add .
Сада покрените команду за урезивање да бисте урезали промене.
$ git commit -m “First commit”
#Output [email protected]:~/techblog.co.rs-jamstack$ git commit -m "First commit" [main (root-commit) fa69ab2] First commit 21 files changed, 1135 insertions(+) create mode 100644 .gitmodules create mode 100644 .hugo_build.lock create mode 100644 archetypes/default.md create mode 100644 config.toml create mode 100644 content/hellogeekflare.md create mode 100644 public/404.html create mode 100644 public/apple-touch-icon-144-precomposed.png create mode 100644 public/categories/index.html create mode 100644 public/categories/index.xml create mode 100644 public/css/hyde.css create mode 100644 public/css/poole.css create mode 100644 public/css/print.css create mode 100644 public/css/syntax.css create mode 100644 public/favicon.png create mode 100644 public/hellogeekflare/index.html create mode 100644 public/index.html create mode 100644 public/index.xml create mode 100644 public/sitemap.xml create mode 100644 public/tags/index.html create mode 100644 public/tags/index.xml create mode 160000 themes/hyde
Коначно, гурните промене на ГитХуб.
$ git push --set-upstream origin main
Напомена: Морате да унесете своје ГитХуб корисничко име и лозинку да бисте радили.
#6. Рад са Нетлифајем
Одлично, наше спремиште је сада креирано. Сада прелазимо на Нетлифи. Ако већ имате налог, пријавите се или направите нови налог.
За новије налоге, одмах ће покренути чаробњак за вас. У супротном, доћи ћете на контролну таблу свог налога. Ако дођете на контролну таблу, кликните на опцију „Додај нову локацију“ под Веб локације.
У оквиру Додај нову локацију изаберите „Увези постојећи пројекат“.
Затим ће од вас тражити да изаберете Гит провајдера. Пошто користимо ГитХуб, ми ћемо га изабрати. Такође можете да се одлучите за Битбуцкет, ГитЛаб и Азуре ДевОпс.
Затим ће навести све ваше пројекте. Одавде изаберите ГитХуб спремиште које сте креирали за овај пројекат. За нас је то „вдзвдз-јамстацк-туториал“. Такође можете изабрати да отпремите други пројекат који смо направили.
Затим ће од вас тражити да изаберете грану за примену и одаберете основне поставке изградње. За сада можете све поставити на подразумевано.
Кликните на „Депои Сите“ да бисте га применили.
Сада морате сачекати да Нетлифи уради своје. Када се примени, порука ће бити „Ваша локација је распоређена“.
Сада кликните на сајт у горњем левом углу.
Међутим, приметићете да се сајт не учитава исправно. То је зато што основни УРЛ у датотеци Цонфиг.томл није исправно подешен. Пошто је Нетлифи генерисао нови УРЛ пројекта, морате га додати у датотеку Цонфиг.томл.
У нашем случају, сајт се налази на хттпс://аниматед-беијинхо-2баа8б.нетлифи.апп/
То значи да треба да му додамо басеУРЛ.
Да бисте то урадили, идите на локално подешавање и промените вредност.
baseURL = 'https://animated-beijinho-2baa8b.netlify.app/' languageCode="en-us" title="My new Jamstack site" theme="hyde"
Да бисте извршили промену, потребно је да покренете следећу команду.
$ git add . $ git commit -m “changed baseURL to make it work on Netlify”
Нетлифи је паметан. Када открије ново урезивање, аутоматски поново поставља вашу веб локацију.
Ако сада учитате своју веб локацију, она ће се савршено учитати.
Вооо! Ти си то урадио. Знам да има много тога да се научи. Међутим, видећете да је цео процес интуитиван када то урадите неколико пута.
Завршне речи
Јамстацк је закачио нову еру програмера. Откључава перформансе и такође побољшава начин на који се сајтови постављају. Јамстацк је порастао са одличним члановима екосистема као што су Хуго и Нетлифи. Без сумње, одавде ће само расти.
Затим погледајте како да примените фронтенд апликацију на Нетлифи.