Статик сайтаа hugo-руу шилжүүлэх
Нэлээд дээрээс [bagi.mn]-аа цаашид засвар, өөрчлөлт, нэмэлт оруулахад амар мөн контент, дизайн хоёрыг нь тусад нь гаргаad template engine-аар холбож хийвэл их зүгээр юм байна гэж бодогдоод байсан юм. Харин сүүлд үүнийгээ гүйцэлдүүлэх шалтаг гарч ирээд хийж үзлээ.
Эхлээд frontend framework ашиглана гэж бодоод хайж үзсэн ч нэгт миний жижиг сайтад арай нүсэр санагдаад, хоёрт routing-г нь [github-pages] дээр хэрэглэх боломжгүй байсан тул static site generator-ууд байж болох юм байна гээд жаал хайлт хийгээд [jekyll], [hexo], [hugo] гэсэн 3-с performance-н хувьд бусдаасаа хамаагүй дээр юм болов уу гээд hugo-г ашигласан.
Хэрвээ зөвхөн код-г нь хайж байгаа бол энэ [линк]-с авч болно. Fork хийгээд өөрсдөө засаад ашигласан ч болно.. асуудалгүй.
Github-pages jekyll-г дэмждэг бөгөөд ашиглахад маш хялбар бас маш олон нэмэлтүүдтэй гээд давуу тал ихтэй. Гэсэн хэдий ч миний шинэ зүйлс туршиж үзэх сонирхол давамгайлж байснаас jekyll-г дугаар нэгээр хассан байгаа. Гэхдээ jekyll-г хэрэглэхэд ямар ч асуудал байхгүй бөгөөд маш сайн гэдгийг дурдмаар байна.
Суулгахдаа албан ёсны сайтаас нь заавартай суулгасан. [линк] Элдэв загвар, layout-г мөн л өөрсдийнх нь сайт дээрээс [линк] эсвэл github-с хайж олж болно. Миний хувьд нэгэнтээ сайт, загвар нь байгаа болохоор энэ хэсгийг алгаслаа.
Алхам нэг: Сайтаа зүгээр л тэр чигт нь хуулаад ажиллуулах.
`layouts` фолдер нь сайтын ерөнхий template-г хадгалах зориулалттай. Фолдер дотор index.html файл үүсгээд дотор нь өмнөх статик сайтаа хуулж орууллаа. Static фолдерт js, css, images, fonts гэх мэт файлуудаа хадгалаад hugo serve гээд ажиллуулахад БҮҮМ. Бүх юм нь яг хэвэндээ сайхан ажиллаж байна. Мөн яг л бодож байсан шиг маш хурдан generate хийлээ. Бас маш хурдан дуусчихлаа.
Алхам хоёр: Загвараа задлаж partial болгох.
Бүх юм ажиллаж байгаа болохоор index.html-ээ задалъя. layouts дотор partials гэсэн фолдер үүсгээд дотор нь index-с задалж болох хэсгүүдээр нэрлэсэн файлууд үүсгэнэ. Жишээ нь би дараах байдлаар задалсан head.html, header.html, navigation.html, profile.html, resume.html, portfolio.html, skill.html, footer.html, script.html. Нэрнээс нь хархад дотроо ямархуу мэдээлэл агуулж байгаа нь тодорхой байх.
Үүсгэсэн файлууддаа зохих контент-уудаа хуулаад хархад skill, resume гэсэн 2 файл хамаагүй их хэмжээтэй байсан тул partials фолдер дотроо skill, resume гэсэн 2 фолдер үүсгээд уг 2 файлуудаа дахин задалсан. Ингээд бүх partial-уудаа бэлдээд index.html-ээсээ зөвхөн partial-уудаа дууддаг болсны дараа иймэрхүү цэгцтэй харагдаж байгаа.
<!DOCTYPE html><html lang="en" class="no-js">{{ partial "head" . }}<body> <section id="preloader"></section> {{ partial "header" . }} {{ partial "navigation" . }} {{ partial "profile" . }} {{ partial "resume" . }} {{ partial "portfolio" . }} {{ partial "skill" . }} {{ partial "footer" . }} {{ partial "script" . }}</body></html>
Алхам гурав: Мэдээллээ загвараасаа салгах
Site generator-уудын бас нэг гоё feature нь энэ. Мэдээллээ загвараасаа салгачихлаар дараа мэдээллээ засахдаа загвараа санаандгүй эвдэхгүй мөн эсрэгээрээ загвараа засаж байхдаа мэдээллээ арилгах аюулгүй санаа амар байх боломжтой. Мөн site generator-ууд дээр давтах шалгах функцүүд байдаг болохоор ажлыг бүүр ч хөнгөвчилж өгнө.
`data` гэсэн фолдер дотор сайт дээр хэрэглэх мэдээллээ оруулна. Файлууд нь yaml, toml, json форматтай байж болох ба хувийн зүгээс yaml-г илүүд үзсэн. Нэг том файл дээр хадгалаад явсан ч болно. Эсвэл тус тусдаа агуулгаар нь ч юм уу, хуудсанд хэрэглэгдэх мэдээллээр нь ч юм уу ангилаад олон файл үүсгээд явж болно. Би хувьдаа агуулгаар нь ангилбал ойлгомжтой байх болов уу гэж бодсон.
Ингээд general.yml, socials.yml, education.yml, experience.yml, portfolio.yml, skill.yml файлууд үүсгээд орууллаа. Мэдээллээ оруулаад дууссаны дараа загвар дээрээ дуудахдаа $.Site.Data.general.email гэх байдлаар ашиглана.
Давталт ашиглахдаа нэг анхаарах юм нь мэдээллээ зөв форматтай хадгалах хэрэгтэй юм байна билээ. socials.yml файл дотор миний linkedin, github г.м. мэдээллүүд хадгалж байгаа бөгөөд эхлээд доорх байдлаар хадгалахад давталт хийхэд хүндрэлтэй давтаад дараа нь дата-руугаа хандахад бас асуудал үүсгэж байсан.
linkedin: link: https://linkedin.com/in/batbayar.sugithub: link: https://github.com/batbayar-sustack-overflow: link: http://stackoverflow.com/users/3085470/batbayarmedium: link: https://medium.com/@batbayar.sufacebook: link: https://www.facebook.com/batbayar.su
Тиймээс үүнийг засахдаа мэдээллүүдээ list байдлаар хадгалаад нэрүүдийг нь дотор нь тавьж өгсөн байгаа.
- item: link: https://linkedin.com/in/batbayar.su name: linkedin- item: link: https://github.com/batbayar-su name: github- item: link: http://stackoverflow.com/users/3085470/batbayar name: stack-overflow- item: link: https://medium.com/@batbayar.su name: medium- item: link: https://www.facebook.com/batbayar.su name: facebook
Ийнхүү бэлдсэн дата-г давтахдаа доорх байдлаар ашиглаж болж байна.
{{ range $.Site.Data.socials }} <li> <a href="{{ .item.link }}"> <i class="fa fa-{{ .item.name }}"></i> </a> </li>{{ end }}
Алхам тав: generate хийсэн сайтаа github-pages-тай submodule-р холбох
Github дээрээ github_username.github.io гэсэн repo үүсгээд бэлдэнэ.(batbayar-su.github.io) Дараах git командыг ажиллуулж үүсгэсэн repo-оо public фолдерт submodule болгож оруулж өгч байна.git submodule add git@github.com:batbayar-su/batbayar-su.github.io.git public. Submodule болгохын давуу тал нь дараа pull хийж авахад тус тусад нь аваад байхгүй мөн бүх юм гарын доор байгаа тул давуу талтай.
hugo гэсэн ганцхан команд ашиглаад hugo-г public фолдер дотор generate хийнэ. Ингээд кодуудаа push хийсний дараа batbayar-su.github.io -уу ороход сайт нь харагдаж байх юм.
Hugo-г ашиглахад маш амархан мөн маш хурдтай site generator байна гэж бодож байна. Мөн энгийн статик сайт хийхэд frontend framework шиг нүсэрдэнэ гэж байхгүй. Зөвхөн сайт дээрээ ямар js, css сан ашиглана тэр нь л generate-р гарч ирнэ ямар нэг нэмэгдэл илүү зүйл байхгүй болохоор маш жижигхэн хурдан байж чадаж байнаа.
Adding Google analytic, blogging coming soon…
