วิธีสร้างเว็บไซต์คงที่อย่างมีสไตล์ด้วย Eleventy (11ty)

ด้วยการเพิ่มขึ้นของเครื่องมือสร้างเว็บไซต์แบบสแตติก (SSG) เช่น Eleventy การสร้างเว็บไซต์แบบสแตติกที่มีสไตล์และมีประสิทธิภาพนั้นง่ายกว่าที่เคย

ในบทความนี้ เราจะสำรวจวิธีใช้ Eleventy เพื่อสร้างเว็บไซต์พอร์ตโฟลิโอที่สวยงามและใช้งานได้จริงโดยไม่จำเป็นต้องใช้ภาษาหรือฐานข้อมูลฝั่งเซิร์ฟเวอร์

คุณจะได้เรียนรู้วิธีการปรับใช้เว็บไซต์แบบสแตติกโดยตรงจากที่เก็บ GitHub ของคุณไปยังแพลตฟอร์มการโฮสต์แอปพลิเคชันของ Kinsta ทำให้เว็บไซต์ของคุณใช้งานได้อย่างรวดเร็วบนโดเมน .kinsta.app ฟรี

นี่คือการสาธิตสดของไซต์พอร์ตโฟลิโอคงที่ที่คุณจะสร้างด้วย Eleventy

คุณสามารถเข้าถึงที่เก็บ GitHub ของโปรเจ็กต์นี้ได้หากต้องการดูอย่างละเอียด

สิบเอ็ดคืออะไร?

Eleventy หรือที่เรียกว่า 11ty เป็นเครื่องมือสร้างเว็บไซต์แบบสแตติกที่สร้างเว็บไซต์ที่ขับเคลื่อนโดย HTML, CSS และ JavaScript โดยไม่จำเป็นต้องใช้ฐานข้อมูลและภาษาโปรแกรมแบ็คเอนด์

Eleventy ขึ้นชื่อเรื่องความเรียบง่ายและความยืดหยุ่น เนื่องจากไม่บังคับให้คุณใช้เทมเพลตหรือเฟรมเวิร์กเพียงภาษาเดียว รองรับภาษาเทมเพลตมากกว่า 10 ภาษาและยังให้คุณใช้งานได้มากเท่าที่คุณต้องการในโครงการเดียว:

สิบเอ็ดเช่นเดียวกับ SSG ส่วนใหญ่ ช่วยให้คุณสร้างเนื้อหาของเว็บไซต์แบบคงที่โดยใช้ส่วนประกอบที่นำมาใช้ซ้ำได้ แทนที่จะสร้างเอกสาร HTML ที่สมบูรณ์สำหรับทุกหน้า

วิธีการติดตั้งสิบเอ็ด

ง่ายต่อการติดตั้ง Eleventy นี่คือวิธี:

1. ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js ไว้ในคอมพิวเตอร์ของคุณแล้ว คุณสามารถตรวจสอบได้โดยใช้คำสั่ง node -v ในเทอร์มินัลของคุณ ไม่สามารถใช้ได้? ต่อไปนี้คือวิธีการติดตั้ง Node.js บนคอมพิวเตอร์ของคุณ
2. สร้างไดเรกทอรีใหม่สำหรับโครงการของคุณ
3. เปิดเทอร์มินัลแล้วเรียกใช้คำสั่ง npm init -y ในไดเร็กทอรีของโปรเจ็กต์เพื่อเริ่มต้นโปรเจ็กต์ Node.js ใหม่ โดยสร้างไฟล์ package.json ด้วยการตั้งค่าเริ่มต้น
4. รันคำสั่ง npm install @11ty/eleventy --save-dev เพื่อติดตั้งแพ็คเกจเป็นการพึ่งพาการพัฒนาในโครงการของคุณ
5. แค่นั้นแหละ! ตอนนี้คุณสามารถเรียกใช้ Eleventy ได้โดยเรียกใช้คำสั่ง npx @11ty/eleventy ในไดเร็กทอรีโปรเจ็กต์ของคุณ สิ่งนี้จะสร้างไฟล์ไซต์ของคุณและส่งออกไปยังไดเร็กทอรี _site (หรือไดเร็กทอรีที่คุณกำหนดค่าไว้) ในโฟลเดอร์โปรเจ็กต์ของคุณ

หมายเหตุ: เมื่อคุณรันคำสั่ง npx @11ty/eleventy คุณจะได้ผลลัพธ์นี้:

 [11ty] Wrote 0 files in 0.01 seconds (v2.0.0)

ที่นี่ 0 ไฟล์ถูกเขียนเนื่องจากไม่มีเทมเพลตในโฟลเดอร์โครงการของคุณ

สิบเอ็ดคำสั่งและการกำหนดค่า

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

สิบเอ็ดคำสั่ง

ต่อไปนี้เป็นคำสั่งหลัก 110 คำสั่งที่คุณควรทราบ:

• npx eleventy : คำสั่งนี้ใช้เพื่อสร้างไซต์ของคุณและส่งออกผลลัพธ์ไปยังโฟลเดอร์ _site (หรือโฟลเดอร์ใดก็ตามที่คุณกำหนดค่าเป็นไดเร็กทอรีเอาต์พุตของคุณ)
• npx @11ty/eleventy --serve : คำสั่งนี้จะเริ่มเซิร์ฟเวอร์ภายในเครื่องเพื่อให้คุณสามารถดูตัวอย่างไซต์ของคุณในเบราว์เซอร์ของคุณ เมื่อคุณทำการเปลี่ยนแปลงใดๆ กับไซต์ของคุณ โครงการของคุณจะถูกสร้างขึ้นใหม่โดยอัตโนมัติและอัปเดตในเบราว์เซอร์ของคุณ
• npx @11ty/eleventy --serve --port=8081 : คำสั่งนี้เริ่มเซิร์ฟเวอร์ Eleventy และระบุพอร์ตแบบกำหนดเองที่เซิร์ฟเวอร์จะรับฟัง
• npx @11ty/eleventy --watch : คำสั่งนี้จะดูไฟล์โครงการของคุณสำหรับการเปลี่ยนแปลงและสร้างไซต์ของคุณใหม่โดยอัตโนมัติเมื่อจำเป็น

คุณไม่จำเป็นต้องจำคำสั่งเหล่านี้ เพราะคุณสามารถเพิ่มลงในคำสั่งทั่วไปในอ็อบเจ็กต์สคริปต์ของไฟล์ package.json ได้:

 "scripts": { "start": "npx @11ty/eleventy --serve", "watch": "npx @11ty/eleventy --watch", "build": "npx eleventy" },

ตอนนี้คุณสามารถใช้ npm start เพื่อให้บริการแอปพลิเคชันของคุณแทน npx @11ty/eleventy --serve และคุณยังสามารถเรียกใช้ npm run build แทน npx eleventy

วิธีกำหนดค่าไซต์คงที่ของคุณด้วย Eleventy

Eleventy เป็น "zero-config" ตามค่าเริ่มต้นและมีตัวเลือกการกำหนดค่าที่ยืดหยุ่น ต่อไปนี้คือตัวเลือกการกำหนดค่าคีย์ที่คุณควรทราบ:

• อินพุต: ตัวเลือกนี้ให้คุณระบุไดเร็กทอรีของไฟล์โปรเจ็กต์ของคุณ src เป็นแนวทางปฏิบัติที่ดีที่สุด
• เอาต์พุต: ตัวเลือกนี้ให้คุณระบุไดเร็กทอรีที่ควรส่งออกไซต์ที่สร้างขึ้น ตามค่าเริ่มต้น Eleventy จะส่งเอาต์พุตไปยังโฟลเดอร์ _site (นักพัฒนาหลายคนใช้ สาธารณะ )
• templateFormats: ตัวเลือกนี้ให้คุณระบุนามสกุลไฟล์ที่ควรประมวลผลเป็นเทมเพลต ตามค่าเริ่มต้น Eleventy จะประมวลผลไฟล์ .html , .njk และ .md เป็นเทมเพลต

นี่เป็นเพียงไม่กี่คำสั่งและตัวเลือกการกำหนดค่าที่มีอยู่ใน Eleventy หากต้องการกำหนดค่าโปรเจ็กต์ Eleventy ให้สร้างไฟล์ .eleventy.js ในรูทของโปรเจ็กต์ จากนั้นวางรหัสนี้ลงในไฟล์เพื่อให้โครงการของคุณมีโครงสร้างที่มีไดเร็กทอรีอินพุตและเอาต์พุต:

 module.exports = function (eleventyConfig) { return { dir: { input: 'src', output: 'public', }, }; };

หมายเหตุ: eleventyConfig ถูกส่งผ่านเป็นอาร์กิวเมนต์ ซึ่งให้ตัวเลือกการกำหนดค่าเพิ่มเติมที่จะใช้ในภายหลังในโครงการนี้

วิธีดูตัวอย่างไซต์ที่สิบเอ็ด

ตอนนี้คุณทราบคำสั่งหลักบางคำสั่งที่สามารถใช้เพื่อดูตัวอย่างเว็บไซต์สแตติก Eleventy ของคุณได้ แต่เมื่อคุณเรียกใช้คำสั่ง เช่น npx @11ty/eleventy จะไม่มีการเสิร์ฟอะไรเลย นี่เป็นเพราะคุณไม่มีไฟล์เทมเพลต

คุณสามารถสร้างโฟลเดอร์ src ในโฟลเดอร์รูทของโปรเจ็กต์ จากนั้นสร้างไฟล์เทมเพลต เช่น index.html หรือใช้ภาษาเทมเพลตที่คุณต้องการเพื่อแสดงถึงโฮมเพจ:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Eleventy Static Site</title> </head> <body> Hello World! </body> </html>

หากคุณเรียกใช้คำสั่ง npx @11ty/eleventy โฟลเดอร์ สาธารณะ จะถูกสร้างขึ้นด้วยไฟล์สแตติกที่สร้างขึ้น คุณจะต้องการให้สิ่งนี้แสดงบนเบราว์เซอร์ของคุณและเปิดใช้คุณสมบัติการโหลดซ้ำที่ร้อนแรง สิ่งนี้เป็นไปได้โดยการรันคำสั่งต่อไปนี้:

 npx @11ty/eleventy --serve

สิ่งนี้จะให้บริการเว็บไซต์ของคุณบน http://localhost:8080/

คำสั่งเหล่านี้ค่อนข้างยากที่จะจดจำและใช้อยู่เสมอ คุณได้เพิ่มลงในไวยากรณ์ที่คุ้นเคยในไฟล์ package.json ของคุณแล้ว ดังนั้นคุณจึงสามารถใช้ npm start เพื่อให้บริการแอปพลิเคชันของคุณไปยัง http://localhost:8080/

วิธีสร้างเว็บไซต์พอร์ตโฟลิโอคงที่ด้วยสิบเอ็ด

ตอนนี้คุณรู้วิธีสร้างไซต์คงที่ด้วย Eleventy แล้ว มาสร้างโครงการพอร์ตโฟลิโอกันเถอะ

คุณสามารถสร้างโครงการ Eleventy ใหม่ตั้งแต่เริ่มต้น หรือคุณต้องการรูปภาพ, CSS และเนื้อหาจริงสำหรับโครงการของคุณ ดังนั้นเราจึงสร้างเทมเพลตพื้นที่เก็บข้อมูล GitHub เพื่อช่วยให้คุณดำเนินการได้เร็วขึ้น ใน GitHub ให้เลือก ใช้เทมเพลตนี้ > สร้างที่เก็บใหม่ เพื่อคัดลอกเนื้อหาเหล่านี้และไฟล์การกำหนดค่าเริ่มต้นลงในที่เก็บใหม่ของคุณเอง จากนั้นดาวน์โหลดลงในเครื่องของคุณ

โครงการของคุณจะมีโครงสร้างดังต่อไปนี้:

 ├── node_modules/ ├── public/ ├── src/ | ├── _includes | ├── layouts │ ├── assets │ ├── css │ ├── projects │ └── index.njk ├── .eleventy.js ├── .gitignore ├── package.lock.json └── package.json

วิธีใช้เทมเพลตในสิบเอ็ด

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

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

ตอนนี้คุณเข้าใจเทมเพลตแต่ละประเภทแล้ว มาสร้างเทมเพลตสำหรับเว็บไซต์พอร์ตโฟลิโอแบบคงที่กันเถอะ

วิธีสร้างเลย์เอาต์ในสิบเอ็ด

ภายในไดเร็กทอรี src ให้สร้างไดเร็กทอรี _includes ซึ่งจะมีเค้าโครงและบางส่วนทั้งหมดของเรา

จากนั้นคุณสามารถสร้างโฟลเดอร์ เลย์เอาต์ (สำหรับองค์กรที่เหมาะสม) เพื่อเก็บเลย์เอาต์ทั้งหมดของคุณ เค้าโครงเหล่านี้เป็นเทมเพลตและสามารถใช้ภาษาเทมเพลตที่คุณต้องการ เช่น Nunjucks ซึ่งเรากำลังใช้ที่นี่

มาสร้างไฟล์ base.njk เพื่อเก็บเลย์เอาต์ทั่วไปสำหรับเพจทั้งหมดของคุณ

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/assets/favicon.jpeg" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/css/global.css" /> <title>J.'s Portfolio</title> </head> <body> <div> {{ content | safe }} </div> </body> </html>

ในโค้ดด้านบน มีการสร้างมาร์กอัป HTML ทั่วไปและรวม Font Awesome จาก CDN เพื่อให้คุณสามารถเข้าถึงไอคอนได้ นอกจากนี้ ตัวแปรเนื้อหาจะถูกส่งผ่านเพื่อให้รวมเนื้อหาทั้งหมดจากเพจใดๆ ที่ใช้เลย์เอาต์นี้

แต่นั่นไม่ใช่เรื่องราวเค้าโครงทั้งหมด เค้าโครงของคุณจะมีบางส่วนที่จะปรากฏในทุกหน้า เช่น แถบนำทางและส่วนท้าย มาสร้างบางส่วนสำหรับแต่ละส่วนเหล่านี้กัน

วิธีใช้ Partials ใน Eleventy

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

นี่คือ Navbar Partials ใน navbar.njk :

 <div class="nav-container"> <div class="logo"> <a href="/"> J. </a> </div> <div class="nav"> <a href="/projects" class="link"> Projects </a> <a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a> </div> </div>

นี่คือส่วนท้ายของส่วนท้ายใน footer.njk :

 <hr /> <div class="footer-container"> <p> {% year %} Joel's Portfolio</p> <div class="social_icons"> <a href="https://twitter.com/olawanle_joel" aria-label="Twitter" target="_blank" rel="noopener noreferrer" > <i class="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel" aria-label="GitHub" target="_blank" rel="noopener noreferrer" > <i class="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/" aria-label="LinkedIn" target="_blank" rel="noopener noreferrer" > <i class="fa-brands fa-linkedin"></i> </a> </div> </div>

เพิ่มส่วนเหล่านี้ลงในเพจหรือเทมเพลตเลย์เอาต์ของคุณ สามารถทำได้โดยใช้คำสั่ง {% include %} ต่อไปนี้คือลักษณะของเทมเพลต layouts/base.njk เมื่อคุณรวมเทมเพลตแถบนำทางและส่วนท้าย:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/assets/favicon.jpeg" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/css/global.css" /> <title>J.'s Portfolio</title> </head> <body> <div> {% include "components/navbar.njk" %} {{ content | safe }} {% include "components/footer.njk" %} </div> </body> </html>

เมื่อคุณรันคำสั่ง npm start โครงร่างนี้จะไม่ปรากฏขึ้นเนื่องจากไม่ได้ถูกเพิ่มไปยังเท็มเพลตของเพจ สร้างเทมเพลตเพจและเพิ่มเค้าโครงนี้

วิธีสร้างเทมเพลตเพจในสิบเอ็ด

ในโฟลเดอร์ src ของคุณ ให้สร้างไฟล์ index.njk เพื่อทำหน้าที่เป็นโฮมเพจของเว็บไซต์ผลงานของคุณ หน้านี้จะใช้เค้าโครงพื้นฐาน:

 --- layout: layouts/base.njk title: Home --- <h1> This is the {{title}} Page. </h1>

เมื่อคุณรันคำสั่ง npm start ตอนนี้ ไซต์แบบสแตติกของคุณจะโหลดบน http://localhost:8080/ ผลลัพธ์ที่ได้จะมีลักษณะดังนี้:

วิธีใช้ CSS และรูปภาพในสิบเอ็ด

ตอนนี้คุณทราบเทมเพลตต่างๆ ที่มีอยู่ วิธีการทำงาน และวิธีที่สามารถใช้ร่วมกันได้ แต่คุณจะสังเกตเห็นว่าในไฟล์ layouts/base.njk ไฟล์ CSS เชื่อมโยงกับสไตล์ของหน้าพอร์ตโฟลิโอ แต่เมื่อไซต์โหลด สไตล์ CSS จะไม่ได้รับผลกระทบ เนื่องจากไฟล์ CSS ไม่ได้ถูกเพิ่มลงในโฟลเดอร์ สาธารณะ

ในการแก้ไขปัญหานี้ คุณต้องกำหนดค่าในไฟล์ . eleventy.js โดยใช้พารามิเตอร์ eleventyConfig สิ่งนี้ทำให้ Eleventy รู้ว่ามีไฟล์ CSS อยู่และคอยดูการเปลี่ยนแปลงที่อาจเกิดขึ้นกับไฟล์ CSS

ในโฟลเดอร์ src คุณสามารถสร้างโฟลเดอร์ css เพื่อจัดเก็บไฟล์ CSS ทั้งหมดที่คุณจะใช้ในโปรเจ็กต์ แต่สำหรับบทความนี้ คุณสามารถใช้ไฟล์ CSS หนึ่งไฟล์ — global.css จากนั้นคุณสามารถกำหนดค่าโฟลเดอร์ css เพื่อให้กำหนดค่าไฟล์ทั้งหมดภายในโฟลเดอร์:

 eleventyConfig.addPassthroughCopy('src/css'); eleventyConfig.addWatchTarget('src/css');

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

 eleventyConfig.addPassthroughCopy('src/assets');

นี่คือลักษณะของไฟล์การกำหนดค่าของคุณ:

 module.exports = function (eleventyConfig) { eleventyConfig.addPassthroughCopy('src/assets'); eleventyConfig.addPassthroughCopy('src/css'); eleventyConfig.addWatchTarget('src/css'); return { dir: { input: 'src', output: 'public', }, }; };

เมื่อคุณเรียกใช้ npm start สไตล์ CSS จะทำงาน และหน้าแรกของคุณจะมีลักษณะดังนี้:

การสร้างบางส่วนและเพิ่มในโฮมเพจ

ตอนนี้คุณสร้างเลย์เอาต์และเพิ่มในโฮมเพจของคุณสำเร็จแล้ว ( index.njk ) มาปรับแต่งโฮมเพจเพื่อเก็บข้อมูลบางอย่างเกี่ยวกับตัวคุณ เช่น ข้อมูลเพิ่มเติมเกี่ยวกับตัวคุณ ทักษะของคุณ และข้อมูลติดต่อ

คุณสามารถตัดสินใจเพิ่มรหัสและมาร์กอัปของคุณโดยตรงไปยังเทมเพลต index.njk แต่มาสร้างส่วนย่อยสำหรับหน้าแรก เกี่ยวกับ ทักษะ และข้อมูลติดต่อ

ฮีโร่บางส่วน

นี่คือส่วนแรกด้านล่าง Navbar ซึ่งมีวัตถุประสงค์หลักเพื่อให้ผู้ใช้เข้าใจว่าเว็บไซต์เกี่ยวกับอะไร

 <div class="hero-container"> <img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" /> <div class="hero-text"> <h1>Hey, I'm Joe </h1> <p> I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between. </p> <div class="social-icons"> <a href="https://twitter.com/olawanle_joel"> <i class="fa-brands fa-twitter"></i> </a> <a href="https://github.com/olawanlejoel"> <i class="fa-brands fa-github"></i> </a> <a href="https://www.linkedin.com/in/olawanlejoel/"> <i class="fa-brands fa-linkedin"></i> </a> </div> </div> </div>

รายละเอียดเล็กๆ น้อยๆ เกี่ยวกับตัวคุณรวมอยู่ในโค้ดด้านบน พร้อมด้วยไอคอนโซเชียลเพื่อเชื่อมต่อลิงก์ไปยังโปรไฟล์โซเชียลมีเดียของคุณ

ส่วนของฮีโร่ควรมีลักษณะดังนี้:

คุณสามารถเพิ่มเนื้อหาในส่วน Hero เปลี่ยนสไตล์ในไฟล์ css/globals.css หรือแม้แต่สร้างเวอร์ชันของคุณเองในส่วนนี้

เกี่ยวกับ Partials

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

 <div class="about-container"> <h2>About Me</h2> <div class="flex-about"> <div class="about-text"> <p> As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality. </p> <p>Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.</p> </div> <div class="about-img"> <Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" /> </div> </div> </div>

รหัสประกอบด้วยข้อมูลเกี่ยวกับคุณ (รูปภาพและข้อความบางส่วน) นี่คือลักษณะของส่วน About:

ส่วนทักษะ

ส่วนนี้ใช้เพื่อแสดงเทคโนโลยีที่คุณใช้หรือชอบใช้

 <div class="skills-container"> <h2>Skills</h2> <div class="grid-skills"> <div class="skill-card html"> <i class="fa-brands fa-html5 html-icon"></i> <p>HTML</p> </div> <div class="skill-card css"> <i class="fa-brands fa-css3-alt css-icon"></i> <p>CSS</p> </div> <div class="skill-card js"> <i class="fa-brands fa-js-square js-icon"></i> <p>JavaScript</p> </div> <div class="skill-card react"> <i class="fa-brands fa-react react-icon"></i> <p>React</p> </div> <div class="skill-card node"> <i class="fa-brands fa-node-js node-icon"></i> <p>Node</p> </div> <div class="skill-card python"> <i class="fa-brands fa-python python-icon"></i> <p>Python</p> </div> </div> </div>

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

ส่วนติดต่อ

เนื่องจากนี่คือพอร์ตโฟลิโอ คุณควรเพิ่มช่องทางให้ผู้มีโอกาสเป็นลูกค้าเข้าถึงคุณได้ วิธีหนึ่งคือให้ผู้อื่นส่งอีเมลถึงคุณ

 <div class="contact-container"> <h2>Get In Touch</h2> <p>If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!</p> <a href="mailto:[email protected]" class='cta-btn'>Say Hello</a> </div>

แทนที่ที่อยู่อีเมลใน a กด้วยที่อยู่อีเมลของคุณเอง เพื่อให้ปุ่มเปิดใช้แอปพลิเคชันอีเมลเพื่อให้ผู้อื่นส่งข้อความถึงคุณ

ตอนนี้คุณได้สร้าง Partials ทั้งหมดสำหรับโฮมเพจของคุณเรียบร้อยแล้ว ถัดไป คุณต้องรวมไว้ในไฟล์ index.njk เพื่อให้สามารถแสดงในหน้าแรก:

 --- layout: layouts/base.njk title: Home --- {% include "components/hero.njk" %} {% include "components/about.njk" %} {% include "components/skills.njk" %} {% include "components/contact.njk" %}

เมื่อคุณรันคำสั่ง start โฮมเพจของคุณจะแสดง Partials ที่เพิ่มเข้ามาทั้งหมดตามลำดับ

วิธีใช้คอลเลกชันในสิบเอ็ด

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

คอลเล็กชันถูกกำหนดไว้ในไฟล์การกำหนดค่า .eleventy.js และสามารถรวมข้อมูลจากแหล่งต่างๆ เช่น ไฟล์มาร์กดาวน์หรือไฟล์ JSON

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

คุณสามารถสร้างไฟล์มาร์กดาวน์ด้วยชื่อของโครงการ ( quotes-generator.md ) และวางโค้ดด้านล่าง:

 --- title: Quotes Generator description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- The quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes. ### Technologies Used The technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user. ### Challenges and Lessons Learned One of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface. Another challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions. Throughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources. Overall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.

หมายเหตุ: หากคุณใช้เทมเพลตเริ่มต้น คุณควรมีอยู่แล้ว มิฉะนั้น คุณสามารถคัดลอกได้จากไดเร็กทอรีโครงการของเทมเพลตเริ่มต้นของเราบน GitHub

ส่วนหน้าที่อยู่ด้านบนสุดของไฟล์เหล่านี้ เช่น เทมเพลต ทำให้สามารถใส่ค่าลงในเทมเพลตของคุณได้

เนื่องจากไฟล์ Markdown เหล่านี้อยู่ในไดเร็กทอรี src ดังนั้น Eleventy จะถือว่าไฟล์เหล่านี้เป็นเทมเพลตและสร้างหน้า HTML สำหรับแต่ละไฟล์ URL ของพวกเขาจะเป็นเช่น /projects/quotes-generator

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

ก่อนอื่นมาสร้างเลย์เอาต์สำหรับเนื้อหานี้ก่อนสร้างคอลเล็กชันและเพิ่มเป็นรายการในหน้าโครงการเฉพาะ

เช่นเดียวกับก่อนหน้านี้ ให้สร้างไฟล์เลย์เอาต์ ( project.njk ) ในโฟลเดอร์ เลย์เอา ต์ เพื่อหลีกเลี่ยงการทำซ้ำ เนื่องจากไฟล์นี้จะใช้มาร์กอัป HTML เริ่มต้น คุณจึงปรับเลย์เอาต์ base.njk โดยสร้างบล็อกเพื่อระบุส่วนของเลย์เอาต์ที่จะเปลี่ยนแปลง

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="icon" href="/assets/favicon.jpeg" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="/css/global.css" /> <title>J.'s Portfolio</title> </head> <body> <div> {% include "components/navbar.njk" %} {% block content %} {{ content | safe }} {% endblock %} {% include "components/footer.njk" %} </div> </body> </html>

บล็อกได้รับชื่อเนื้อหาเนื่องจากคุณสามารถมีบล็อกจำนวนมากภายในเทมเพลตของคุณ ตอนนี้คุณสามารถขยายไปยังเค้าโครง project.njk ของคุณได้ ดังนั้นคุณจะต้องระบุบล็อกเนื้อหาเท่านั้น:

 {% extends "layouts/base.njk" %} {% block content %} <div class="project-layout"> <h2>{{title}}</h2> <img src="{{image}}" alt="image" class="banner-img" /> <a href="{{gitHubURL}}" class="cta-btn pt-btn"> <div class="small-icons"> GitHub <i class="fa-brands fa-github"></i> </div> </a> {{ content | safe }} </div> {% endblock %}

ในโค้ดด้านบน คุณกำลังระบุว่าจะแสดงแต่ละโครงการอย่างไร จะได้รับ ชื่อ รูปภาพ และ gitHubURL จากส่วนหน้า แล้วจึงเพิ่มเนื้อหาอื่นโดยใช้ตัวแปรเนื้อหา ( {{ content | safe }} )

ขั้นตอนต่อไปคือการเพิ่มคีย์เค้าโครงและค่าสำหรับส่วนหน้าของแต่ละโครงการ:

 --- layout: layouts/project.njk title: Quotes Generator description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards." gitHubURL: "https://github.com/olawanlejoel/random-quote-generator" image: "/assets/quotes-banner.jpeg" --- …

เมื่อคุณโหลด URL ของแต่ละโครงการซ้ำ เช่น /projects/quotes-generator คุณจะสังเกตเห็นว่าตอนนี้ใช้เค้าโครงที่สร้างขึ้น:

วิธีใช้คอลเลกชันในเทมเพลต

แต่ละโครงการของคุณแสดงผลอย่างสวยงามด้วยเลย์เอาต์ที่ระบุ แต่ผู้คนจะเข้าถึงโครงการเหล่านี้ได้อย่างไร คุณต้องสร้างรายการที่ผู้คนสามารถคลิกเพื่อนำพวกเขาไปยังแต่ละโครงการได้ นี่คือที่มาของคอลเลกชัน

คุณต้องกำหนดในไฟล์คอนฟิกูเรชัน .eleventy.js โดยใช้เมธอด addCollection()

 module.exports = function (eleventyConfig) { // … eleventyConfig.addCollection('projects', (collection) => { return collection.getFilteredByGlob('src/projects/*.md'); }); return { // ... }; };

ในโค้ดด้านบน เมธอด addCollection() ใช้เพื่อกำหนดคอลเลกชั่นที่เรียกว่าโปรเจ็กต์ ฟังก์ชันการเรียกกลับที่ส่งผ่านไปยัง addCollection() ส่งคืนไฟล์มาร์กดาวน์ทั้งหมดในไดเร็กทอรีโครงการโดยใช้เมธอด getFilteredByGlob()

เมื่อคุณกำหนดคอลเลกชันแล้ว คุณสามารถใช้คอลเลกชันนั้นในเทมเพลตเพื่อสร้างเพจตามเนื้อหานั้น มาสร้างเทมเพลตของหน้า project.njk ซึ่งจะใช้เลย์เอาต์ base.njk แต่เนื้อหาจะเป็นโปรเจ็กต์จากคอลเล็กชันโปรเจ็กต์:

 --- layout: layouts/base.njk title: Projects --- <div class="projects-container"> <h2>Projects</h2> <div class="projects-grid"> {% for project in collections.projects %} <div class="project-card"> <div class="project-header"> <i class="fa-regular fa-folder-open folder-icon"></i> <div class="small-icons"> <a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a> </div> </div> <h3>{{project.data.title}}</h3> <p>{{project.data.description}}</p> <a href="{{project.url}}" class="cta-btn">Read more</a> </div> {% endfor %} </div> </div>

ในโค้ดด้านบน คำสั่ง {% for %} ใช้เพื่อวนซ้ำโครงการทั้งหมดในคอลเลกชันโครงการ และสร้างการ์ดโครงการสำหรับแต่ละโครงการ

คุณจะสามารถเข้าถึงตัวแปรทั้งหมดโดยใช้ project.data.[key] ตัวอย่างเช่น โค้ดด้านบนจะแสดงชื่อโครงการ คำอธิบาย และ URL ของ GitHub คุณยังสามารถเข้าถึง URL ของโครงการโดยใช้ project.url

เมื่อคุณเรียกใช้คำสั่ง start และนำทางไปยังหน้าโครงการ หน้าของคุณจะมีลักษณะดังนี้เมื่อคุณเพิ่มหลายโครงการ:

วิธีใช้รหัสย่อ

รหัสย่อเป็นวิธีกำหนดแท็ก HTML ที่กำหนดเองหรือค่าไดนามิกของ JavaScript ที่คุณสามารถใช้ซ้ำกับเทมเพลตของคุณได้ ตัวอย่างเช่น คุณสามารถกำหนดรหัสย่อเพื่อสร้างปีปัจจุบันและเพิ่มลงในเว็บไซต์ของคุณ

ในไฟล์คอนฟิกูเรชัน .eleventy.js คุณสามารถกำหนดรหัสย่อโดยใช้เมธอด addShortcode() ตัวอย่างเช่น รหัสต่อไปนี้กำหนดรหัสย่อที่เรียกว่าปี:

 module.exports = function (eleventyConfig) { // ... eleventyConfig.addShortcode('year', () => { return `${new Date().getFullYear()}`; }); return { // ... }; };

รหัสย่อปีด้านบนจะส่งกลับปีปัจจุบัน ซึ่งคุณสามารถเพิ่มลงในเทมเพลตใดก็ได้ในโครงการของคุณ ตัวอย่างเช่น แทนที่จะเขียนรหัสตายตัวไว้ที่ส่วนท้ายของเว็บไซต์นี้ คุณสามารถเพิ่มแบบไดนามิกได้โดยใช้ {% year %} ดังนั้นจึงมีการอัปเดตตัวเองทุกปี:

 <hr /> <div class="footer-container"> <p> {% year %} Joel's Portfolio</p> <div class="social_icons"> // ... </div> </div>

เมื่อเพจแสดงผล ผลลัพธ์จะรวมปีปัจจุบันไว้ในแท็ก HTML p

วิธีเพิ่มธีมลงในไซต์สิบเอ็ด

การเพิ่มธีมให้กับไซต์ Eleventy เป็นวิธีที่ยอดเยี่ยมในการปรับแต่งรูปลักษณ์ของไซต์ของคุณอย่างรวดเร็ว อย่างเป็นทางการว่า Eleventy หมายถึงหัวข้อเริ่มต้น แต่เข้าใจว่าพวกเขาหมายถึงสิ่งเดียวกัน เว็บไซต์หลายแห่งให้บริการธีม Eleventy ฟรี เช่น Eleventy starters อย่างเป็นทางการและธีม Jamstack

สิ่งที่คุณต้องทำคือเลือกธีมหรือโปรแกรมเริ่มต้นที่คุณชื่นชอบ จากนั้นเข้าถึงที่เก็บ GitHub เพื่อโคลนลงในเครื่องของคุณ ให้แน่ใจว่าคุณอ่านเอกสารประกอบสำหรับขั้นตอนในการกำหนดค่าและปรับแต่งโครงการ

เรียกใช้ npm install เพื่อติดตั้งแพ็คเกจทั้งหมดที่ใช้ จากนั้นเรียกใช้ npm start เพื่อให้บริการแอปพลิเคชันของคุณแบบโลคัลไปยัง http://localhost:8080/

วิธีการปรับใช้ไซต์สิบเอ็ด

ตอนนี้คุณประสบความสำเร็จในการสร้างเว็บไซต์แบบสแตติกพอร์ตโฟลิโอที่มีสไตล์ด้วย Eleventy การมีเว็บไซต์ประเภทนี้ในเครื่องของคุณไม่เพียงพอ คุณต้องการโฮสต์ออนไลน์เพื่อแบ่งปันกับใครก็ได้

Kinsta เป็นแพลตฟอร์มคลาวด์ที่ให้คุณโฮสต์เว็บไซต์แบบคงที่ รวมถึง Eleventy ซึ่งสามารถทำได้โดยการพุชโค้ดของคุณไปที่ GitHub และปรับใช้กับ Kinsta ในที่สุด

ผลักดันไซต์สิบเอ็ดของคุณไปที่ GitHub

ขั้นแรก สร้างที่เก็บบน GitHub; ซึ่งจะทำให้คุณเข้าถึง URL ของที่เก็บได้ จากนั้นคุณสามารถใช้คำสั่ง git เพื่อพุชโค้ดของคุณ

ก่อนที่จะพุชไฟล์ของคุณไปที่ GitHub ทางที่ดีคุณควรสร้างไฟล์ .gitignore เพื่อระบุไฟล์และโฟลเดอร์บางไฟล์ที่ git ควรเพิกเฉยเมื่อพุชโค้ดของคุณ สร้างไฟล์ .gitignore ในโฟลเดอร์รูทของคุณและเพิ่มสิ่งต่อไปนี้:

 # dependencies /node_modules # run /public

ตอนนี้คุณสามารถเริ่มต้นที่เก็บ Git ในเครื่องของคุณได้โดยเปิดเทอร์มินัล นำทางไปยังไดเร็กทอรีที่มีโปรเจ็กต์ของคุณ และเรียกใช้คำสั่งต่อไปนี้:

 git init

ตอนนี้เพิ่มรหัสของคุณไปยังที่เก็บ Git ในเครื่องโดยใช้คำสั่งต่อไปนี้:

 git add

ตอนนี้คุณสามารถยืนยันการเปลี่ยนแปลงของคุณโดยใช้คำสั่งต่อไปนี้:

 git commit -m "my first commit"

หมายเหตุ: คุณสามารถแทนที่ “การกระทำครั้งแรกของฉัน” ด้วยข้อความสั้น ๆ ที่อธิบายถึงการเปลี่ยนแปลงของคุณ

สุดท้าย พุชโค้ดของคุณไปที่ GitHub โดยใช้คำสั่งต่อไปนี้:

 git remote add origin [repository URL] git push -u origin master

หมายเหตุ: ตรวจสอบให้แน่ใจว่าคุณแทนที่ “[repository URL]” ด้วย URL ที่เก็บ GitHub ของคุณเอง

เมื่อคุณทำตามขั้นตอนเหล่านี้เสร็จแล้ว โค้ดของคุณจะถูกส่งไปที่ GitHub และสามารถเข้าถึงได้ผ่าน URL ของที่เก็บของคุณ

ตอนนี้คุณสามารถปรับใช้กับ Kinsta ได้แล้ว!

ปรับใช้ไซต์สิบเอ็ดของคุณกับ Kinsta

การปรับใช้กับ Kinsta เกิดขึ้นในไม่กี่นาที เริ่มต้นที่แดชบอร์ด My Kinsta เพื่อเข้าสู่ระบบหรือสร้างบัญชีของคุณ ถัดไป คุณจะอนุญาต Kinsta บน GitHub

จากนั้นคุณสามารถคลิก Applications บนแถบด้านข้างซ้าย จากนั้นคลิก Add service และสุดท้าย คลิก Application จากดร็อปดาวน์:

โมดอลจะปรากฏขึ้นซึ่งคุณสามารถเลือกที่เก็บที่คุณต้องการปรับใช้ เลือกสาขาที่คุณต้องการปรับใช้หากคุณมีหลายสาขาในพื้นที่เก็บข้อมูลของคุณ

จากนั้นคุณสามารถกำหนดชื่อให้กับแอปพลิเคชันนี้ได้ เลือกตำแหน่งศูนย์ข้อมูลจาก 25 แห่งที่มีอยู่ จากนั้น Kinsta จะตรวจหาคำสั่งเริ่มต้นโดยอัตโนมัติ

แอปพลิเคชันของคุณจะเริ่มปรับใช้ ภายในไม่กี่นาที จะมีลิงก์สำหรับเข้าถึงเว็บไซต์ของคุณในเวอร์ชันที่ใช้งานจริง ในกรณีนี้คือ https://ty-portfolio-lvjy7.kinsta.app/

สรุป

In this article, you have learned how to craft a stylish website with Eleventy, how to customize an Eleventy static site from the ground up, and how to build a nice portfolio website.

Whether you're building a personal blog, a portfolio site, or an online store, Eleventy can help you achieve your goals with minimal effort and maximum impact. So why not try it today and deploy it to Kinsta for free? We have an Eleventy “Hello World” template you can use to help you get started creating even more quickly.

What is your thought on Eleventy? Have you utilized Eleventy to build anything? Please feel free to share your projects and experiences with us in the comments section below.