ສ້າງເວັບ Blog ຟຣີງ່າຍໆ ແບບກະຕຸກຈິດກະຊາກໃຈດ້ວຍ Hugo ແລະ Firebase ep.2
ເອົາລະ ທ່ານຜູ້ຈະເຣີນດ້ວຍສິນ ແລະ ປັນຍາ, ມາຕໍ່ກັນເລີຍໃນບົດຄວາມທີ 2 ຂອງການສ້າງເວັບ Blog ດ້ວຍ Hugo Static Site Generator ແລະ Firebase ກັນຕໍ່ເລີຍເນາະ ໃນບົດຄວາມກ່ອນຫນ້າເຮົາຮູ້ ວິທີການຕິດຕັ້ງແລ້ວ ເຮົາມາຕໍ່ກັນເລີຍໃນການສ້າງໃຫ້ເປັນເວັບ.
📢 ການສ້າງເວັບໄຊທ໌ໃຫມ່
ກ່ອນອື່ນໃຫ້ເປີດ Command Prompt ຂຶ້ນມາ ແລ້ວຍ້າຍ Path Directory ໄປທີ່ໂຟລເດີ ທີ່ຕ້ອງການເຊັ່ນ: D:\Hugo ການສ້າງເວັບໄຊທ໌ໃຫມ່ເຮັດໄດ້ໂດຍການພິມຄຳສັ່ງ hugo new site ຊື່ເວັບໄຊ້ ເຊັ່ນ:
Microsoft Windows [Version 10.0.19042.870]
(c) 2020 Microsoft Corporation. All rights reserved.
C:\Users\salun>d:
D:\>cd hugo
D:\Hugo>
ແລ້ວພິມຄຳສັ່ງດັ່ງນີ້:
hugo new site meonam
ລະບົບມັນຈະທຳການສ້າງໂຟລເດີເວັບໃຫ້ເອງໃນທີ່ນີ້ຈະຊື່ວ່າ meonam ນັ້ນເອງ ໃນນັ້ນຈະປະກອບມີໄຟລລະບົບດັ່ງນີ້:
meonam
├── archetypes
├── content
│ ├── category
│ │ ├── article.md
├── data
├── layouts
├── public
├── resources
├── static
├── themes
│ ├── theme-name
├── config.toml
📢 ການເພີ່ມ Theme
ການເພີ່ມ Theme ສາມາດເຂົ້າໄປເບິ່ງ Theme ຕ່າງໆໄດ້ທີ່ Hugo themes Site ທີ່ມີຜູ້ສ້າງໄວ້ໃຫ້ໄດ້້ໃຊ້ຟຣີ, ໃນທີ່ນີ້ເພື່ອຄວາມໄວແມ່ນຈະເລືອກໃຊ້ Hugo Future Imperfect Slim ເບິ່ງ Demo ສາມາດຕິດຕັ້ງໄດ້ງ່າຍໆຜ່ານ Git ດ້ວຍຄຳສັ່ງ:
cd meonam/themes
git clone https://github.com/pacollins/hugo-future-imperfect-slim.git
ຢູ່ໃນ Theme Hugo Future Imperfect Slim ຈະມີຂໍ້ມູນຕົວຢ່າງໃນໂຟລເດີ exampleSite ໃນໂຟລເດີນີ້ຈະປະກອບໄປດ້ວຍ ໄຟລ໌ຕ່າງໆດັ່ງນີ້:
exampleSite
├── content
│ ├── about
│ │ ├── index.fr.md
│ │ ├── index.md
│ │ ├── index.pl.md
│ │ └── index.pt.md
│ ├── blog
| | ├── _index.md
│ │ ├── emoji-support.fr.md
│ │ ├── emoji-support.md
│ │ ├── markdown-syntax.fr.md
│ │ ├── markdown-syntax.md
│ │ ├── placeholder-text.md
│ │ ├── rich-content.fr.md
│ │ └── rich-content.md
│ └── contact
│ ├── index.fr.md
│ └── index.md
├── data
│ └── comments
│ └── 6354f801456983b22c4b91ce42adfca7
| ├── 7f97ca70-c476-11e9-999e-498e0902dd73.json
│ └── a69c31b0-c476-11e9-999e-498e0902dd73.json
├── resources
│ └── assets
| ├── scss
│ | └── scss
│ │ ├── main.scss_b5a97001882d870cddf46d3bce56b70e.content
│ │ ├── main.scss_b5a97001882d870cddf46d3bce56b70e.json
│ │ ├── main.scss_f300667da4f5b5f84e1a9e0702b2fdde.content
│ │ └── main.scss_f300667da4f5b5f84e1a9e0702b2fdde.json
│ └── images
├── static
│ ├── css
│ │ └── add-on.css
│ ├── img
│ │ ├── 2014
│ │ │ ├── 04
│ │ │ │ ├── pic01.jpg
│ │ │ │ └── pic02.jpg
│ │ │ └── 09
│ │ │ └── pic03.jpg
│ │ ├── 2017
│ │ │ └── 08
│ │ │ └── pic04.jpg
│ │ └── main
│ │ └── logo.jpg
│ └── js
│ └── add-on.js
└── config.toml
└── staticman.yml
ຖ້າຕ້ອງການໃຊ້ງານກໍ່ພຽງແຕ່ທຳການ Copy ເອົາໄຟລ໌ໃນໂຟລເດີ exampleSite ທັງຫມົດໄປໄວ້ໃນໂຟລເດີ content ຂອງເວັບໄຊທ໌ໄດ້້ເລີຍ.
📢 ເພີ່ມບົດຄວາມໃຫມ່
ທ່ານສາມາດສ້າງບົດຄວາມໃຫມ່ໂດຍການສ້າງໄຟລ Markdown ເກັບໄວ້ໃນໂຟລເດີ content ໂດຍໃຊ້ໂປຣແກຣມ VSCode ເຊັ່ນ: content/<CATEGORY>/<FILE>.<FORMAT> ຫລື ສາມາດສ້າງດ້ວຍການໃຊ້ງານ Command ໂດຍພິມ:
hugo new posts/my-first-post.md
ການແກ້ໄຂ ຫລື ການຂຽນບົດຄວາມແມ່ນເຮັດໄດ້ຜ່ານໂປຣແກຣມ VSCode ໂດຍເຂົ້າໄປທີ່ໄຟລ໌ທີ່ທ່ານສ້າງຕາມດ້ານເທິງນັ້ນ ແລ້ວຂຽນໄດ້ໂດຍໃຊ້ພາສາ Markddown ໂດຍໄຟລ໌ຈະມີໂຄງສ້າງເບື້ອງຕົ້ນດັ່ງນີ້:
---
title: "My First Post"
date: 2021-03-29T09:50:11+01:00
draft: true
---
draft: true ບົດຄວາມຈະບໍ່ມີການສະແດງຜົນ ເມື່ອສ້າງແລ້ວໃຫ້ປ່ຽນເປັນ draft:false
📢 ການ run ເວັບໃຫ້ສາມາາດໃຊ້ງານໄດ້ຈິງ
run ເວັບໄຊທ໌ພ້ອມສະແດງບົດຄວາມທັງຫມົດທີ່ໄດ້ສ້າງ ພິມຄຳສັ່ງ:
hugo server -D
ຖ້າເຮັດໄດ້ຖືກຕ້ອງ ແລະ ບໍ່ເກີດ Error ແມ່ນສາາມາດເຂົ້າໄປເບິ່ງເວັບໄດ້້ທີ URL: http://localhost:1313
📢 ການແກ້ໄຂ ປັບປ່ຽນ Theme
ສາມາດເຮັດໄດ້ໂດຍການເຂົ້າໄປແກ້ໄຂໄຟລ໌ config.toml ຜ່ານ Text editor ເຊັ່ນ: URL ຂອງເວັບ, ພາສາ, ຊື່ເວັບ ລວມທັງ Theme ທີ່ເລືອກໃຊ້ງານເຊັ່ນ:
baseURL = "https://example.com/"
languageCode = "lo"
title = "meonam"
theme = "hugo-future-imperfect-slim"
ສຳລັບບົດຄວາມທີ່ 2 ນີ້ຂໍຈົບເທົ່ານີ້ກ່ອນເອົາໄວ້ມາຕໍ່ກັນໃນບົດຄວາມຕໍ່ໄປ, ສາມາດອ່ານບົດຄວາມກ່ອນຫນ້າໃນການສ້າງເວັບດ້ວຍ Hugo ຕາມລິ້ງລຸ່ມນີ້ເລີຍ:
ສ້າງເວັບ Blog ຟຣີງ່າຍໆ ແບບກະຕຸກຈິດກະຊາກໃຈດ້ວຍ Hugo ແລະ Firebase ep.1