ສ້າງເວັບ Blog ຟຣີງ່າຍໆ ແບບກະຕຸກຈິດກະຊາກໃຈດ້ວຍ Hugo ແລະ Firebase ep.1

2021-03-27 code tutorials Meonam

ສະບາຍດີທ່ານຜູ້ຈະເຣີນດ້ວຍສິນ ແລະ ປັນຍາ, ຫ່າງຫາຍໄປດົນເກືອບປີມື້ນີ້ຫວ່າງຈາກຄວາມຂີ້ຄ້ານເລີຍຢາກມາແຊປະສົບການເຮັດເວັບ Blog ແບບງ່າຍໆ ແລະ ຟຣີດ້ວຍ Hugo ແລະ Firebase ເຊິ່ງເວັບຂອງຜູ້ຂ້າທີ່ທ່ານເຂົ້າຢູ່ນີ້ ກໍ່ແມ່ນສ້າງຈາກ Hugo ເຊັ່ນດຽວກັນ, ກ່ອນອື່ນນັ້ນຜູ້ຂຽນຂໍອະທິບາຍເຄື່ອງມືໂດຍຫຍໍ້ດັ່ງນີ້:

ເຄື່ອງມືທີ່ຈຳເປັນທີ່ໃຊ້ໃນການຂຽນເວັບ Blog ໃນຄັ້ງນີ້ມີຫລັກໆຢູ່ 3 ຢ່າງຄື: ໂປຣແກຣມຂຽນໂຄດ ຫລື Text editor ໃນທີ່ນີ້ໃຊ້ VSCode, Hugo Static Site Generator ເພື່ອແປງໂຄດເປັນໄຟລ໌ HTML ໃຫ້ເປັນຫນ້າເວັບ ແລະ ຝາກໄວ້ກັບ Hosting Firebase ຂອງ Google ອະທິບາຍໂດຍຫຍໍ້:

📢 Hugo ຄືຫຍັງ?

Hugo Static Site Generator ເປັນ Framework ແບບ open-source ທີ່ຊ່ວຍໃຫ້ເຮົາສ້າງ Static Web ໄດ້ໂດຍງ່າຍ ຈາກການຂຽນຂໍ້ມູນ ຫລື ເນື້ອຫາແບບພາສາ Markdown ເຊິ່ງໂຕ Hugo ມັນຈະເຮັດຫນ້າທີ່ Convert ໄປເປັນໄຟລ HTML ໃຫ້ສາມາດກາຍເປັນເວັບໄຊທ໌ໄດ້ຕາມ Template ທີ່ກຳນົດ, ມີຫລັກການເຮັດວຽກດັ່ງນີ້:

ແຫລ່ງທີ່ມາ: netlify

ເຊິ່ງຂໍ້ດີຂອງເວັບແບບ Static ມີຄື:

ບໍ່ຈຳເປັນຕ້ອງຕໍ່ກັບຖານຂໍ້ມູນ ຫລື ມີລະບົບ Back-end ແບບພວກ CMS ເຊັັ່ນ: Wordpress, Joomla, Drupal…
ໂຫລດຫນ້າໄດ້ໄວຫລາຍເນື່ອງຈາກເປັນພຽງໄຟລ໌ HTML+CSS ທຳມະດາ.
ເຫມາະແກ່ການເຮັດເປັນເວັບ Blog ຫລື ເວັບແບບນຳສະເຫນີຂໍ້ມູນທົ່ວໄປ.

📢 Google Firebase

Firebase ຄື Platform ທີ່ໃຫ້ບໍລິການເຄື່ອງມືທາງຝັ່ງຂອງ Server side ຫລື Back-end ເພື່ອຊ່ວຍໃຫ້ເຮົາສາມາດພັດທະນາ Realtime App ໄດ້ເຊິ່ງຮອງຮັບຫລາຍ Platform ເຊັ່ນ: Web app, iOS app, Android app. Firebase ມີບໍລິການຫລາຍຢ່າງເຊັ່ນ: Firestore Database, Authentication, Hosting… ໃນທີ່ນີ້ເຮົາຈະໃຊ້ພຽງ Hosting ເພື່ອຝາກເວັບເພາະສ່ວນອື່ນໆ ຜູ້ຂຽນກາໃຊ້ບໍ່ເປັນຄືກັນ ຮະຮະຮະ.

🏷️ ເລີ່ມຕິດຕັ້ງ ແລະ ໃຊ້ງານ Hugo

ກໍລະນີນີ້, ຈະອະທິບາຍການຕິດຕັ້ງເທິງລະບົບປະຕິບັດການ Windows ສ່ວນລະບົບປະຕິບັດການອື່ນແມ່ນເຂົ້າເບິ່ງລາຍລະອຽດທັງຫມົດທີ່ Installing Hugo.

ເຂົ້າໄປໂຫລດໄຟລ໌ຕິດຕັ້ງທີ່ Hugo releases ເລືອກໃຫ້ກົງກັບລະບົບຂອງຕົວເອງເຊັ່ນ: 32bit ຫລື 64bit
ແຕກໄຟລ໌ທີ່ດາວໂຫລດມາທັງຫມົດໄວ້ໃນໂຟລເດີເຊັ່ນ: ຊ່ອງ C:\Hugo\bin ຈະສັງເກດເຫັນໄຟລ໌ດັ່ງນີ້:
ເພີ່ມ Hugo ລົງໃນ Path ເພື່ອໃຫ້ສາມາດສັ່ງໃຊ້ງານໄດ້ຜ່ານ Command Prompt ຫລື cmd ໂດຍເຂົ້າໄປເພີ່ມທີ່: System Environment ເຂົ້າໄປທີ່ Environment Variable… ເລືອກເມນູ Path ແລ້ວກົດ Edit>ກົດ New ເພີ່ມ Path ລົງໄປ ອ້າງອີງຈາກໂຟລເດີທີ່ແຕກໄຟລ໌ໄວ້ ໃນທີ່ນີ້ແມ່ນ C:\Hugo\bin ຫລັງຈາກນັ້ນກົດປຸ່ມ Ok ເປັນອັນສຳເລັດ.
ທົດສອບກການຕິດຕັ້ງວ່າສຳເລັດຫລືບໍ່ ແມ່ນໃຫ້ເຂົ້າໄປທີ່ cmd ແລ້ວ ພິມຄຳສັ່ງ echo %PATH% ຈະປະກົດດັ່ງນີ້: ລອງພິມຄຳສັ່ງ hugo verson ຈະປະກົດ

C:\Users\salun>hugo version
hugo v0.81.0-59D15C97+extended windows/amd64 BuildDate=2021-02-19T17:07:12Z VendorInfo=gohugoio

ເມື່ອຕິດຕັ້ງ Hugo ສຳເລັດແລ້ວ ແມ່ນໃຫ້ຕິດຕັ້ງເຄື່ອງມືສຳລັບຂຽນເນື້ອຫາເວັບ ແລະ ໂຄດ

ໂດຍເຂົ້າໄປໂຫລດ ແລະ ຕິດຕັ້ງໂປຣແກຣມ VSCode ໄດ້ທີ່ນີ້

ເພື່ອບໍ່ໃຫ້ບົດຄວາມຍາວເກີນໄປ ບົດຄວາມນີ້ຈຶ່ງຂໍຈົບລົງເທົ່ານີ້ກ່ອນ ໄວ້ໄປຕໍ່ກັນທີ່ ep.2 😁

ສ້າງເວັບ Blog ຟຣີງ່າຍໆ ແບບກະຕຸກຈິດກະຊາກໃຈດ້ວຍ Hugo ແລະ Firebase ep.2