หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

จิ๋วแบบคงที่

logo.png

เครื่องมือสร้างเว็บไซต์คงที่ขนาดเล็กที่ยืดหยุ่นและใช้งานง่าย มีความยืดหยุ่น เนื่องจากไม่ต้องใช้โครงสร้างเว็บไซต์หรือแนวคิดเฉพาะของบล็อก ใช้งานง่าย เนื่องจากเราสามารถเริ่มต้นด้วยไซต์ HTML มาตรฐาน และค่อยๆ แนะนำ Tinystatic

แนวคิดของ Tinystatic นั้นเรียบง่าย: จากทุกไฟล์ในไดเร็กทอรีอินพุต ให้สร้างไฟล์ในไดเร็กทอรีเอาต์พุตซึ่งเราสามารถใช้เป็นไดเร็กทอรีสาธารณะของเว็บเซิร์ฟเวอร์ของเราได้ วิธีสร้างไฟล์เอาต์พุตแบบจิ๋วนั้นขึ้นอยู่กับนามสกุลไฟล์อินพุต: Markdown จะถูกแปลงเป็น HTML ในขณะที่ CSS, JS และรูปภาพจะถูกคัดลอกเพียงอย่างเดียว สำหรับไฟล์มาร์กดาวน์และ HTML คุณสามารถระบุข้อมูลเมตาที่ด้านบนของไฟล์ได้ ด้วยการระบุเทมเพลตในข้อมูลเมตาของไฟล์นี้ และจัดเตรียมเทมเพลตในไดเร็กทอรีที่แยกจากกัน คุณสามารถใช้ประโยชน์จากกลไกการสร้างเทมเพลต HTML ของ Go ได้ นี่คือตัวอย่างของเว็บไซต์บล็อกทั่วไปและสำหรับคำแนะนำในการเริ่มต้นใช้งานฉบับย่อ โปรดดูด้านล่าง

ติดตั้ง

ไบนารีที่สร้างไว้ล่วงหน้า

ดาวน์โหลดไบนารีจิ๋วสำหรับระบบปฏิบัติการของคุณ:

  • ลินุกซ์
  • ระบบปฏิบัติการ macOS

ทางเลือกอื่น เพิ่มไบนารีให้กับพาธของเชลล์ของคุณ โดยวางไบนารีลงในไดเร็กทอรีที่มีอยู่ เช่น /usr/bin หรือโดยการเพิ่มไดเร็กทอรีหลักของไบนารีให้กับตัวแปรพาธของคุณ

หากคุณเพิ่ม Tinystatic ในเส้นทางของคุณ คุณจะสามารถโทรได้ 

tinystatic -help

มิฉะนั้น คุณจะต้องระบุเส้นทางไปยังไบนารี่แบบจิ๋วเมื่อทำการเรียกมัน 

/path/to/tinystatic -help

เรียบเรียงจากแหล่งที่มา

หากคุณไม่ต้องการใช้ไบนารีที่สร้างไว้ล่วงหน้า คุณจะต้องติดตั้งคอมไพเลอร์ Golang เพื่อคอมไพล์ Tinystatic จากนั้นคุณสามารถติดตั้ง Tinystatic ได้โดยการรัน 

go install -u github.com/julvo/tinystatic

หรือโดยการโคลนที่เก็บและรัน go install หรือ go build ในไดเร็กทอรีรากของที่เก็บนี้

เริ่มต้นอย่างรวดเร็ว

นี่คือบทช่วยสอนความยาว 10 นาทีที่เราสร้างบล็อกเล็กๆ โดยเริ่มจากหน้า HTML หน้าเดียว และแนะนำฟีเจอร์ของ Tinystatic ทีละหน้า

ขั้นแรกเราสร้างโฟลเดอร์ชื่อ routes ภายในโฟลเดอร์นี้ เราสร้างไฟล์ HTML ไฟล์เดียว index.html โดยมีเนื้อหาดังต่อไปนี้: 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

ตอนนี้เราสามารถรัน tinystatic ได้เป็นครั้งแรก ตามค่าเริ่มต้น Tinystatic คาดว่าจะถูกเรียกในไดเร็กทอรีที่มีไดเร็กทอรี routes แต่คุณสามารถเปลี่ยนได้โดยใช้พารามิเตอร์ -routes หลังจากรันคำสั่ง คุณจะเห็น output ของโฟลเดอร์ปรากฏขึ้นถัดจากโฟลเดอร์ routes โครงสร้างไฟล์ของเราตอนนี้มีลักษณะดังนี้: 

 my-blog/
    routes/
        index.html
    output/
        index.html

ตอนนี้เราสามารถรันเว็บเซิร์ฟเวอร์ในไดเร็กทอรีเอาต์พุตได้ เช่น ใช้เซิร์ฟเวอร์ในตัวของ Python เพื่อเปิดเว็บไซต์ของเราบน http://localhost:8000 : 

 cd output
python3 -m http.server

จนถึงตอนนี้ Tinystatic ทั้งหมดทำคือการคัดลอก index.html จาก routes ไปยัง output - ไม่ใช่ทั้งหมดที่มีประโยชน์ แต่แขวนไว้...

มาเพิ่มไฟล์ HTML ไฟล์ที่สองใน routes เช่น about.html : 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

หลังจากที่เรารัน tinystatic อีกครั้ง และเมื่อเว็บเซิร์ฟเวอร์ของเรายังทำงานอยู่ เราก็สามารถไปที่ http://localhost:8000/about ได้ สังเกตว่าไม่มี .html ในเส้นทางนี้อีกต่อไปแล้ว เนื่องจาก Tinystatic ได้สร้างโฟลเดอร์ about มี index.html เดียวอยู่ในนั้น ดังนี้: 

 output/
    index.html
    about/
        index.html

สิ่งที่เราไม่ชอบเกี่ยวกับหน้าปัจจุบันของเราคือการทำซ้ำโครงสร้าง HTML พื้นฐานทั้งหมด จะดีกว่าไหมถ้าใช้เทมเพลตที่ใช้ร่วมกันสำหรับ index.html และ about.html ในการดำเนินการนี้ เราสร้างโฟลเดอร์ชื่อ templates ถัดจากโฟลเดอร์ routes ของเรา และวางไฟล์ HTML default.html ไว้ข้างใน: 

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

เนื้อหาของ default.html ควรเป็น: 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

นอกจากนี้เรายังเปลี่ยนเนื้อหาของ routes/index.html เป็น 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

และเนื้อหาของ routes/about.html ถึง 

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

เมื่อรัน tinystatic อีกครั้ง เอาต์พุตจะเหมือนกับเอาต์พุตก่อนหน้า แต่เรารวมโครงกระดูก HTML ไว้ในที่เดียว

อย่างที่เห็นในตอนนี้ เราสามารถระบุเทมเพลตเพื่อแสดงเนื้อหาของเราได้โดยการระบุชื่อเทมเพลตในข้อมูลเมตาที่ด้านบนของไฟล์ นอกจากนี้เรายังสามารถรวมเทมเพลตอื่น ๆ ได้ (ดูด้านล่าง) และใช้ไปป์ไลน์เทมเพลตของ Go ในขณะที่เรนเดอร์ เราสามารถเข้าถึงข้อมูลเมตาที่กำหนดไว้ที่ด้านบนของไฟล์ ซึ่งเป็นโครงสร้าง Route ที่มีฟิลด์ Route.Href , Route.FilePath และ Route.Meta ซึ่งเป็นแผนที่ของข้อมูลเมตาที่กำหนดไว้ที่ด้านบนของไฟล์อีกครั้ง ยิ่งไปกว่านั้น เราสามารถเข้าถึง Routes ซึ่งเป็นส่วนย่อย (คิดว่า: อาร์เรย์สำหรับผู้ที่เพิ่งเริ่มต้น) ของเส้นทางทั้งหมด ซึ่งเราจะเรียนรู้เพิ่มเติมเกี่ยวกับรายละเอียดเพิ่มเติมด้านล่าง

ลองใช้ข้อมูลเมตานี้ร่วมกับเทมเพลตดั้งเดิมของ Go เพื่อเปลี่ยนชื่อหน้าตามหน้าปัจจุบัน ด้วยเหตุนี้ เราจึงเปลี่ยนข้อมูลเมตาใน routes/about.html เป็น 

 ---
template: default.html
title: About
---

และสุดท้ายก็เปลี่ยน templates/default.html เป็น 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

หลังจากสร้างเว็บไซต์ใหม่แล้ว เบราว์เซอร์ควรแสดงชื่อหน้าที่แตกต่างกันสำหรับดัชนีและหน้าเกี่ยวกับของเรา

ตอนนี้ เรามาสร้างโพสต์บนบล็อกบางส่วนในโฟลเดอร์เส้นทางของเรา เช่น 

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

วางมาร์กดาวน์บางส่วนไว้ในไฟล์ . .md เหล่านี้โดยมีส่วนข้อมูลเมตาที่ด้านบนโดยระบุเทมเพลตเป็น default.html คล้ายกับวิธีที่เราระบุข้อมูลเมตาใน routes/index.html และ routes/about.html สำหรับ first_post.md อาจมีลักษณะดังนี้: 

 ---
template : default.html
title : First Post
---

# Here could be some fine content

รัน tinystatic อีกครั้งเพื่อสร้างเอาต์พุตใหม่ ตอนนี้เราสามารถไปที่ http://localhost:8000/posts/first_post และ http://localhost:8000/posts/second_post มาร์กดาวน์ได้รับการแปลง HTML และวางไว้ภายในเทมเพลตที่เรียกว่า body สำหรับเรา เพื่อให้แสดงผลเป็นตัวยึดตำแหน่ง {{template "body" .}} ใน templates/default.html โปรดทราบว่าสิ่งนี้แตกต่างจากไฟล์ .html อย่างไร ซึ่งเราต้องเรียกใช้ {{define "body"}} ... {{end}} ด้วยตนเอง

ขั้นต่อไป เรามาสร้างรายการโพสต์ของเราโดยใช้ชิ้นส่วน Routes ที่กล่าวมาข้างต้น เราเปลี่ยนเนื้อหาของ routes/index.html เป็น: 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

หลังจากสร้างใหม่แล้ว เราควรเห็นรายการโพสต์ของเราในหน้าดัชนี ส่วน Routes แสดงรายการเส้นทางทั้งหมดที่เราสามารถกรองได้โดยใช้ฟังก์ชันตัวช่วยที่กำหนดไว้ล่วงหน้า เช่น

  • .Routes | filterFilePath "**/posts/*.md" เพื่อแสดงไฟล์ทั้งหมดที่ลงท้ายด้วย .md ในโฟลเดอร์ใด ๆ ที่เรียกว่าโพสต์
  • .Routes | sortAsc "title" เพื่อจัดเรียงเส้นทางตาม title ฟิลด์ข้อมูลเมตา
  • .Routes | limit 10 เพื่อรับเฉพาะ 10 เส้นทางแรกเท่านั้น
  • .Routes | offset 3 เพื่อข้ามสามเส้นทางแรก
  • .Routes | filter "title" "*Post" เพื่อกรองตาม title ฟิลด์ meta data ที่ตรงกับรูปแบบ *Post
  • .Routes | filterFileName "*.md" เพื่อรับไฟล์ทั้งหมดที่ลงท้ายด้วย *.md
  • .Routes | filterHref "/*" เพื่อรับเส้นทางระดับบนสุดทั้งหมด
  • .Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10 เพื่อรวมบางส่วนข้างต้น

ต่อไป เราต้องการใช้เลย์เอาต์สำหรับโพสต์ที่แตกต่างจากหน้าอื่นๆ โพสต์ควรมีรูปภาพอยู่หน้าข้อความ โดยที่เราต้องการกำหนด URL ของรูปภาพในข้อมูลเมตาของโพสต์ ดังนั้นเราจึงเพิ่มเทมเพลตที่สองที่เรียกว่า templates/post.html โดยมีเนื้อหาดังต่อไปนี้: 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

เราเปลี่ยนข้อมูลเมตาของโพสต์เป็น 

 ---
template: post.html
title: First Post
image: https://some-image.url
---

การสร้างเอาต์พุตใหม่ควรทำให้เรามีภาพที่สวยงามเหนือโพสต์ของเรา อย่างไรก็ตาม เราก็พบโค้ด HTML ที่ซ้ำกันในเทมเพลตของเราอีกครั้ง เพื่อปรับปรุงสิ่งนั้น เราสร้างโฟลเดอร์อื่นถัดจาก routes และ templates ที่เรียกว่า partials ภายใน Partials เราสร้างไฟล์ชื่อ head.html ด้วย 

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

และเราจะแทนที่ <head>...</head> ในเทมเพลตของเราด้วย {{template "head" .}} เช่นนั้น 

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

ตอนนี้เราได้ลดการจำลองโค้ดระหว่างเทมเพลตต่างๆ ให้เหลือน้อยที่สุด เราสามารถใช้ไดเร็กทอรี partials นี้เพื่อจัดเก็บส่วนประกอบที่เกิดซ้ำทุกประเภท เช่น แถบนำทางหรือส่วนท้าย

โปรดทราบว่าเราไม่จำเป็นต้องจัดโครงสร้างโปรเจ็กต์โดยใช้ชื่อโฟลเดอร์ที่เราใช้ในบทช่วยสอนนี้ ชื่อโฟลเดอร์เหล่านี้เป็นเพียงค่าเริ่มต้น แต่สามารถเปลี่ยนแปลงได้โดยใช้อาร์กิวเมนต์บรรทัดคำสั่งที่เกี่ยวข้อง (ดู tinystatic -help สำหรับข้อมูลเพิ่มเติม)

มีตัวอย่างแบบเต็มของบล็อกที่นี่

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด