handmade blog

บล็อกทำมือ

อ่านเอกสารนี้ในภาษาอื่น: ?? - - - - - -

Handmade Blog เป็นโปรแกรมสร้างบล็อกแบบคงที่ขนาดเล็กสำหรับผู้ที่ต้องการเริ่มบล็อกอย่างรวดเร็ว รองรับเอกสารประเภทบทความสำหรับการโพสต์บนบล็อก เอกสารประเภทงานสำหรับพอร์ตโฟลิโอ การเน้นโค้ด ไวยากรณ์ KaTeX เชิงอรรถ และอื่นๆ

การสาธิต: ที่นี่

ตู้โชว์

• เบ็ตตี้-grof.github.io: https://github.com/betty-grof/betty-grof.github.io
• parksb.github.io: https://github.com/parksb/parksb.github.io

ผลลัพธ์ประภาคาร

บทความ/0.html บนมือถือ

article/0.html บนเดสก์ท็อป

เริ่มต้นใช้งาน

1. คลิกปุ่ม 'ใช้เทมเพลตนี้' เหนือรายการไฟล์เพื่อสร้างพื้นที่เก็บข้อมูลใหม่ หากคุณต้องการใช้โดเมน github.io ต้องตั้งชื่อที่เก็บ {YOUR_ID}.github.io (เช่น betty-grof.github.io ) อย่าลืมเปิดใช้งานตัวเลือก 'รวมสาขาทั้งหมด'

   

   

2. คลิกแท็บ "การตั้งค่า" ในพื้นที่เก็บข้อมูลของคุณ และตั้งค่าสาขาต้นทางสำหรับเพจ GitHub เป็นสาขา gh-pages GitHub Pages จะโฮสต์เว็บไซต์ของคุณตามสาขา gh-pages คุณจะสามารถเข้าถึงเว็บไซต์ผ่านทาง https://{YOUR_ID}.github.io/ ในไม่กี่นาที

   

   

3. โคลนพื้นที่เก็บข้อมูล และติดตั้งแพ็กเกจโหนด

   $ git clone https://github.com/{YOUR_ID}/{REPOSITORY_NAME}.git # git clone https://github.com/betty-grof/betty-grof.github.io.git
   $ cd {REPOSITORY_NAME} # cd betty-grof.github.io
   $ npm install

4. ปรับแต่งข้อความบางอย่าง เช่น ชื่อของการนำทาง (ใน app/templates/navigations.ejs ) และรัน npm run build

    < nav >
     < a class =" logo-link " href =" / " >
       < h1 > CUSTOMIZED BLOG TITLE </ h1 >
       < span > customized blog subtitle </ span >
     </ a >
     < small >
       < a id =" about " class =" info-link " href =" /about.html " > ?About </ a > /
       < a id =" works " class =" info-link " href =" /works.html " > Works </ a > /
       < a id =" articles " class =" info-link " href =" /articles.html " > Articles </ a >
     </ small >
   </ nav > 

   $ npm run build

5. เรียกใช้สคริปต์ npm start เพื่อเริ่มเซิร์ฟเวอร์ภายในเครื่องที่กำลังฟังบน http://localhost:8080/ เซิร์ฟเวอร์ภายในเครื่องจะขึ้นอยู่กับไดเร็กทอรี dist

   $ npm run build
   $ npm start

   

6. คอมมิตและพุชการเปลี่ยนแปลงในไดเร็กทอรีการทำงานของคุณไปยังที่เก็บระยะไกล

   $ git add ./app/templates/navigations.ejs
   $ git commit -m " Customize the blog title and subtitle "
   $ git push origin master

7. เรียกใช้สคริปต์ deploy หากคุณพร้อมที่จะโฮสต์เว็บไซต์ สคริปต์นี้สร้างไฟล์ในเครื่องไปยังไดเร็กทอรี dist และพุชไปยังสาขา gh-pages ที่มีเฉพาะไฟล์ในไดเร็กทอรี dist GitHub Pages จะโฮสต์เว็บไซต์ของคุณที่ https://{YOUR_ID}.github.io/ ตามสาขา gh-pages โดยอัตโนมัติ

   $ npm run deploy

การใช้งาน

กำลังโหลดซ้ำอยู่

1. เรียกใช้ npm run watch เพื่อติดตามการเปลี่ยนแปลงแบบเรียลไทม์
2. เรียกใช้ npm start เพื่อเริ่มเซิร์ฟเวอร์ภายในเครื่อง ( npm run watch จะต้องยังคงทำงานอยู่ในพื้นหลังหรือแท็บอื่น หรือเซสชันอื่น)
3. ตอนนี้มันจะถูกสร้างขึ้นโดยอัตโนมัติทุกครั้งที่คุณทำการเปลี่ยนแปลงไฟล์ใด ๆ ในไดเรกทอรี app/templates , app/styles และ _articles

การเขียนและเผยแพร่เอกสาร

1. เขียนเอกสารในไดเรกทอรี _articles หรือ _works
2. รัน npm run publish article หรือ npm run publish work script เพื่อแปลงเอกสาร markdown เป็น HTML
3. ดูตัวอย่างเอกสารที่แปลงแล้วบนเซิร์ฟเวอร์ภายในเครื่องโดยใช้สคริปต์ npm start
4. คอมมิตและพุชการเปลี่ยนแปลงไปยังที่เก็บ และรัน npm run deploy เพื่อปรับใช้

กำลังแก้ไขเทมเพลต

แก้ไขเทมเพลต ejs เพื่อเปลี่ยนเนื้อหาของเพจที่มีอยู่ ตัวอย่างเช่น หากคุณต้องการใส่รูปภาพในหน้า Landing Page ให้เปิดไฟล์ app/templates/index.ejs และเพิ่มแท็ก img ลงในองค์ประกอบ main-container

 < main id =" main-container " >
  < img src =" ../assets/profile.jpg " alt =" My profile picture " />
  < p > Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ p >
</ main >

จากนั้น เรียกใช้สคริปต์ npm run build เพื่อเผยแพร่หน้า Landing Page ที่แก้ไข และดูตัวอย่างการเปลี่ยนแปลงบนเซิร์ฟเวอร์ภายในเครื่องโดยใช้สคริปต์ npm start

$ npm run build
$ npm start

หากคุณพร้อมที่จะปรับใช้ ให้รันสคริปต์ npm run deploy คุณสามารถเปลี่ยนได้ไม่เพียงแต่หน้า Landing Page แต่หน้าใดๆ ในลักษณะนี้ (คุณอาจต้องเข้าใจโครงสร้างของโครงการ)

การเพิ่มโดเมนที่กำหนดเอง

สร้างไฟล์ CNAME ในไดเรกทอรีราก กระบวนการสร้างจะเลือก CNAME ให้คุณโดยอัตโนมัติ และคุณสามารถให้บริการบล็อกจากโดเมนที่คุณกำหนดเองได้

หากต้องการข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ Github จัดการ CNAME โปรดดูเอกสาร

โครงสร้างโครงการ

• _articles - ไฟล์ Markdown สำหรับการโพสต์ในบล็อก
• _works - ไฟล์ Markdown สำหรับพอร์ตโฟลิโอ
• app
  • assets - ไฟล์ใดๆ ที่จะนำเข้าด้วยไฟล์ HTML เช่น รูปภาพ แบบอักษร ฯลฯ
  • public - ไฟล์ HTML ที่สร้างโดยสคริปต์ publish ไดเร็กทอรี server และ dist ขึ้นอยู่กับไดเร็กทอรีนี้ อย่าเปลี่ยนไฟล์ภายใต้ไดเร็กทอรีนี้โดยตรง
    • article - ไฟล์ HTML ที่แปลงจากไดเรกทอรี _articles
    • work - ไฟล์ HTML ที่แปลงจากไดเรกทอรี _works
  • styles - ซอร์สโค้ด CSS ที่จะนำเข้าโดยไฟล์ HTML
  • static - ไฟล์คงที่ใดๆ ที่ไม่ได้รวบรวมโดยสคริปต์ build ด์ เช่น ไฟล์ robots.txt , sitemap.xml หรือ SEO สคริปต์ build จะคัดลอกไฟล์ทั้งหมดภายใต้ไดเร็กทอรีนี้ไปยังไดเร็กทอรี dist
  • templates - ไฟล์เทมเพลต EJS สคริปต์ publish จะแปลงเทมเพลตภายใต้ไดเร็กทอรีนี้เป็นไฟล์ HTML
• dist - ไฟล์ที่คอมไพล์โดยสคริปต์ build ด์ สคริปต์ start เปิดเซิร์ฟเวอร์ภายในเครื่องตามไดเร็กทอรีนี้ และ deploy สคริปต์ปรับใช้เว็บไซต์กับหน้า GitHub ตามไดเร็กทอรีนี้ อย่าเปลี่ยนไฟล์ภายใต้ไดเร็กทอรีนี้โดยตรง
• services - ซอร์สโค้ดที่ใช้สคริปต์ publish
  • classes
  • models
• tools - ซอร์สโค้ดที่ใช้สคริปต์ npm ต่างๆ

สคริปต์ที่มีอยู่

npm start

เริ่มฟังเซิร์ฟเวอร์การพัฒนาท้องถิ่นบน http://localhost:8080/

npm run publish

แปลงเทมเพลตเป็นไฟล์ HTML

$ npm run publish article

แปลงบทความทั้งหมด

$ npm run publish works

ดัดแปลงงานทั้งหมด

$ npm run publish article 5

แปลงบทความที่มี id เป็น 5

$ npm run publish work 3

แปลงงานที่ id เป็น 3

$ npm run publish page

แปลงหน้าทั้งหมด

npm run watch

สร้างไฟล์เทมเพลตใหม่ในไดเร็กทอรี templates , ไฟล์ css ในไดเร็กทอรี styles และไฟล์ markdown ในไดเร็กทอรี _articles โดยอัตโนมัติทุกครั้งที่ไฟล์ถูกแก้ไข

npm run build

สร้างไฟล์ด้วยตัวรวมพัสดุ

npm run deploy

สร้างและปรับใช้ไฟล์

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูรายละเอียดในไฟล์ใบอนุญาต