Развој веб апликација узбудљива је прилика
Изградња веб апликација представља узбудљиву перспективу за програмере. Омогућава им да самостално креирају веб решења, бирајући технологије, алате и приступе који најбоље одговарају њиховим потребама и визији.
Једна од тих филозофија је и Јамстацк, приступ који нуди велику флексибилност у решавању изазова веб развоја.
У овом чланку, открићете како можете креирати своју прву Јамстацк апликацију. Кренимо!
Шта је Јамстацк?
Јамстацк представља савремену филозофију за изградњу веб решења. Са техничке стране, нуди модуларну веб архитектуру где програмери могу комбиновати различите оквире и алате како би постигли жељени циљ.
Ако пажљиво погледамо назив,
Јам + стацк = ЈАМстацк.
Јамстацк се састоји од три кључна елемента:
- Ј – ЈаваСцрипт
- А – АПИ (програмски интерфејс апликације)
- М – Маркуп (језик за означавање)
Овај приступ раздваја пословну логику од података, чиме се ствара јасна граница између слојева веб искуства. Неке од предности укључују:
- Знатно брже учитавање страница (скоро тренутно).
- Флексибилан и ефикасан развојни процес.
- Побољшана скалабилност и одрживост система.
За више информација о Јамстацку, прочитајте „Јамстацк за почетнике“.
Историја Јамстацк-а
Јамстацк је релативно нов концепт. Мат Билман га је први пут представио 2016. године, показујући другачији начин креирања веб страница, другачији од традиционалних метода.
Овај приступ одваја логику апликације од зависности од позадинског сервера. Већи део садржаја се испоручује преко статичких датотека са ЦДН-а (мреже за дистрибуцију садржаја), док се динамичке функције покрећу и приступају преко АПИ-ја. Ако је серверу потребно да изврши динамичку радњу, та радња се компилира и шаље на ЦДН пре него што јој крајњи корисник приступи.
Да бисмо боље разумели историју Јамстацк-а, треба да размотримо разлику између статичких и динамичких веб локација.
- Статичке веб локације: Статичке веб локације се налазе на серверу и не садрже динамичке елементе. У раним данима интернета, већина веб локација су биле статичне, где су ХТМЛ, ЦСС и слике биле ускладиштене на серверу. Овај приступ је био брз јер сервер није морао да обрађује захтеве корисника, али није било интеракције са корисником.
- Динамичке веб локације: Динамичке веб локације омогућавају интеракцију обрадом захтева корисника и генерисањем ХТМЛ кода за приказ. Овај приступ је спорији, али пружа динамику и интеракцију. Већина савремених веб локација су динамичке, а најбољи пример су веб локације које покреће ВордПресс.
Затим, ту су Јамстацк веб локације, које нуде решење за проблеме и статичких и динамичких сајтова. Погледајмо како.
Јамстацк веб локације: Како раде?
Јамстацк решава два кључна проблема:
- Споро време учитавања динамичких веб локација.
- Недостатак интеракције статичких веб локација.
Јамстацк локација сервира статичне датотеке, што је брзо, а истовремено користи ЈаваСцрипт за интеракцију са АПИ-јима, омогућавајући динамички садржај.
Иза сцене, користи се генератор статичких веб локација који креира статичке веб странице. Ови генератори користе Маркдовн за креирање статичких веб локација. Генератор генерише статичке датотеке из доступних ХТМЛ, ЦСС и ЈаваСцрипт датотека. Након израде, статичка локација се сервира преко ЦДН-а.
Будући да се користе статичне датотеке, време учитавања је готово тренутно. За додавање динамике, ЈаваСцрипт се повезује на АПИ-је и преузима динамичке податке из база података.
Изградња прве Јамстацк веб странице
Једна од предности Јамстацк-а је флексибилност избора. Можете одабрати било који Јамстацк оквир или генератор статичких веб локација, као што су Хуго, Гатсби, Нект.јс, Хеко, и други.
Прочитајте и: Најбољи оквири за ЈамСтацк
За примену, можете користити ГитХуб Пагес, Нетлифи, Азуре статичне веб апликације, и друге платформе.
У овом водичу, користићемо Хуго за развој и Нетлифи за хостовање нашег сајта.
Претпоставља се да имате основно разумевање веб технологија и начина на који веб функционише, као и да сте упознати са коришћењем Гит-а.
Кренимо!
#1. Инсталирање предуслова: Го и Гит
За инсталацију Хуга, потребни су вам Гит и Го. Гит се користи за поједностављење процеса изградње (што ћете касније видети са Нетлифи-јем). Го је неопходан јер је Хуго изграђен на њему.
Користимо Убунту који ради на ВСЛ 2 на Виндовс 11. Убунту кернелу приступамо директно из Виндовс-а.
Прочитајте и: Windows 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: Прилагодите променљиву окружења PATH.
export PATH=$PATH:/usr/local/go/bin
Корак 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/. .
Ова команда копира садржај из фолдера exampleSite у корен ваше веб локације.
Ажурирање config.toml датотеке
Затим, уређујемо config.toml датотеку. Она садржи информације о конфигурацији пројекта и мора бити исправно подешена да би ваша Јамстацк локација функционисала.
За почетак, уредите следеће редове у датотеци:
baseURL = "/" themesDir = "themes" theme = "hugo-hero-theme"
Напомена: Требаћете да наставите са ажурирањем config.toml датотеке како ваш пројекат буде напредовао. Такође, пошто користите подразумевани садржај, config.toml се ажурира да одговара примерном садржају.
Тестирање наше Јамстацк локације
За покретање нашег сајта, потребно је поново генерисати Хуго локацију командом ‘hugo’:
$ hugo
Затим покрећемо сервер командом ‘hugo serve’:
$ 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. Ако се не отвара, покушајте да отворите алтернативну адресу која је наведена поред. У овом случају, то је localhost:42973.
Уређивање подразумеваног садржаја теме
Сада можете уређивати подразумевани садржај тако што ћете отићи у фасциклу Садржај. Уредимо садржај индексне странице. Идите на Садржај > Посао > Индек.мд.
Изглед након уређивања:
Креирање блог сајта
Ако желите да креирате блог, одаберите одговарајућу тему. За ову сврху користимо Хиде тему.
Слично претходном постављању сајта, покрените следеће команде:
$ hugo new site techblog.co.rs-jamstack $ cd techblog.co.rs-jamstack/themes $ git clone https://github.com/spf13/hyde /themes/hyde
Затим, уредите config.toml датотеку и додајте вредност ‘theme = ‘hyde’’.
Креирајте нови пост
Покрените команду ‘hugo new’ за креирање новог поста, након које следи Маркдовн датотека:
$ 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$
Уређивање поста
Отворите новокреирану hellogeekflare.md датотеку у жељеном уређивачу текста.
Садржај датотеке:
--- 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*.
Након додавања садржаја у .md датотеку, изгледаће овако (зависи од уређивача који користите, ми користимо Висуал Студио Код):
Међутим, изглед ће се разликовати након сервирања.
Напомена: Обавезно промените вредност ‘draft’ из „true“ у „false“.
Одлично! Направили смо два Јамстацк веб сајта, један за мала предузећа и један блог.
Након уређивања сајта, можете генерисати датотеке покретањем команде ‘hugo’. Датотеке ће бити креиране у фасцикли /public.
$ hugo
#5. Примена Јамстацк сајта на Нетлифи
Након израде наших сајтова, време је да их применимо. За то ћемо користити Нетлифи.
Нетлифи је услуга са подршком ЦДН-а која нуди брзо хостовање веб локација. Нетлифи се може повезати са ГитХуб-ом и аутоматизовати процес. Услуга је бесплатна, са одређеним функцијама које се плаћају.
Наш задатак је да поставимо код на Нетлифи и препустимо Нетлифи-у остало.
Локално подешавање Гит спремишта
Сада је време за подешавање Гит спремишта.
За покретање Гит спремишта, покрените следећу команду у корену вашег пројекта:
$ git init
Затим, поставите тему као подмодул. Ово је важан корак. Технички, креира подрепозиторије унутар вашег спремишта (сећате се команде ‘git clone’ за преузимање Хуго теме?). Ово вам даје више контроле над вашим Јамстацк сајтом.
На пример, можете преузимати ажурирања теме. Поред тога, Нетлифи-ју су потребне теме као подмодули за хостовање.
За додавање теме као подмодула, покрените следећу команду:
$ 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. Рад са Нетлифајем
Одлично, наше спремиште је креирано. Прелазимо на Нетлифи. Ако имате налог, пријавите се, или креирајте нови налог.
За нове налоге, одмах ће се покренути чаробњак. У супротном, доћи ћете до контролне табле. Ако дођете на контролну таблу, изаберите опцију „Додај нови сајт“ испод Веб сајтови.
У оквиру опције „Додај нови сајт“, изаберите „Увези постојећи пројекат“.
Затим, изаберите Гит провајдера. Пошто користимо ГитХуб, изабраћемо га. Такође, можете одабрати Bitbucket, GitLab и Azure DevOps.
Након тога, биће приказани ваши пројекти. Изаберите ГитХуб спремиште које сте креирали за овај пројекат, у нашем случају „вдзвдз-јамстацк-туториал“. Можете изабрати и други пројекат који сте креирали.
Затим изаберите грану за примену и основне поставке изградње. За сада можете оставити све на подразумеваним вредностима.
Кликните на „Деплој Сајт“ за примену.
Сачекајте да Нетлифи заврши посао. Након примене, видећете поруку „Сајт је распоређен“.
Кликните на сајт у горњем левом углу.
Приметићете да се сајт не учитава правилно. То је зато што основни УРЛ у датотеци config.toml није исправно подешен. Пошто је Нетлифи генериса