devblog
1.0.0
DevBlog เป็นเทมเพลตบล็อกที่ปรับแต่งได้อย่างเต็มที่ ซึ่งออกแบบมาสำหรับนักพัฒนา (หรือใครก็ตาม) ที่ต้องการเข้าสู่บล็อก พร้อมใช้งานและปรับใช้ (ได้อย่างง่ายดาย) หรือสามารถแก้ไขและขยายได้ตามที่คุณต้องการ บล็อกนี้สร้างขึ้นแบบคงที่อย่างสมบูรณ์ผ่าน GatsbyJS มาพร้อมกับการเน้นไวยากรณ์ (ผ่าน PrismJS) ทันที และมีการเรนเดอร์ฝั่งเซิร์ฟเวอร์ในตัว เหนือสิ่งอื่นใด
หากต้องการดูการสาธิตสด คลิกที่นี่
config.js ขั้นตอนแรกคือติดตั้ง GatsbyJS CLI ในเครื่อง สามารถทำได้โดยการรันคำสั่ง npm install --global gatsby-cli
เมื่อสร้างไซต์ Gatsby ใหม่ CLI อนุญาตให้คุณระบุตัวเริ่มต้น ในกรณีนี้เพียงระบุ URL สำหรับ repo นี้ ซึ่งสามารถทำได้โดยการรันคำสั่ง gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
เมื่อคุณตั้งค่าเรียบร้อยแล้ว คุณสามารถใช้บล็อกหรือแก้ไขได้ตามต้องการ ตัวอย่างเช่น รัน gatsby develop เพื่อเริ่มต้นสภาพแวดล้อมการพัฒนาแบบ hot-reloaded ที่ localhost:8000 หรือรัน gatsby build เพื่อสร้าง build ที่ใช้งานจริงที่ได้รับการปรับให้เหมาะสม หากต้องการดูรายการคำสั่ง CLI ทั้งหมดสำหรับ Gatsby โปรดดูเอกสารประกอบ
หรืออีกทางหนึ่ง หากคุณต้องการแยก repo นี้หรือโคลนมัน คุณเพียงแค่ต้องรัน npm install จากนั้น gatsby develop ในภายหลัง จากนั้นคุณก็จะพร้อมใช้งาน
การกำหนดค่าพื้นฐานสามารถทำได้ผ่านไฟล์ config.js ในรูทของ repo โปรเจ็กต์ คุณสามารถแก้ไขสีหลักของบล็อก เพิ่มผู้เขียนบล็อกและคำอธิบาย และอื่นๆ ได้ด้วยไฟล์นี้ ค่าเริ่มต้นมีดังนี้:
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;หมายเหตุ: ตัวเลือกการกำหนดค่าใดๆ ที่มีป้ายกำกับว่า "จำเป็น" จำเป็นสำหรับวัตถุประสงค์ในการนำเสนอขั้นพื้นฐาน สิ่งใดก็ตามที่ไม่มีความคิดเห็น "จำเป็น" สามารถลบออกได้หากคุณไม่ต้องการใช้
ตัวแปรการกำหนดค่าที่อ้างอิงข้างต้นถูกใช้ดังนี้:
| ตัวแปร | คำอธิบายการใช้งาน |
|---|---|
| ชื่อ | ชื่อเรื่องของบล็อก ใช้สำหรับชื่อหน้าเป็นหลัก |
| ผู้เขียน | ผู้เขียนบล็อก ใช้สำหรับชื่อส่วนหัวและชื่อหน้า |
| คำอธิบาย | คำอธิบายของผู้เขียน ใช้สำหรับส่วนหัวภายใต้ผู้เขียน |
| สีหลัก | สีหลักของบล็อก |
| แสดงภาพส่วนหัว | ตั้งค่าสถานะเพื่อแสดงรูปภาพส่วนหัวหรือไม่ |
| showShareButtons | ตั้งค่าสถานะเพื่อแสดงปุ่มแชร์โซเชียลมีเดียในแต่ละโพสต์บล็อกหรือไม่ |
| โพสต์ต่อเพจ | จำนวนโพสต์ต่อหน้าในหน้าแรกของบล็อก ใช้สำหรับการแบ่งหน้า |
| ทางสังคม | โปรไฟล์โซเชียลมีเดียของผู้เขียนบล็อก ขณะนี้รองรับเฉพาะเว็บไซต์ส่วนตัว, GitHub, Twitter และ LinkedIn เท่านั้น |
หากต้องการเปลี่ยนรูปภาพส่วนหัวเริ่มต้น เพียงแทนที่ไฟล์ main.jpg ในโฟลเดอร์ /src
หากต้องการเปลี่ยน favicon เริ่มต้น เพียงแทนที่ไฟล์ favicon.ico ในโฟลเดอร์ /src
โพสต์ในบล็อกทั้งหมดสามารถพบได้ใน /src/pages และจะถูกสร้างขึ้นแบบคงที่เมื่อรันคำสั่ง gatsby build หากต้องการสร้างโพสต์ใหม่ เพียงสร้างโฟลเดอร์ใหม่ใน /src/pages ด้วยชื่อ URL ที่คุณต้องการ ตัวอย่างเช่น หากคุณต้องการให้ url ปรากฏเป็น myblog.com/hello-world คุณจะต้องสร้างโฟลเดอร์เป็น hello-world เมื่อสร้างโฟลเดอร์แล้ว เพียงสร้างไฟล์ index.md ภายในโฟลเดอร์นั้น
ด้านบนของหน้าทั้งหมดจะต้องมีมาร์กดาวน์เดียวกัน ซึ่งจะบอก Gatsby ถึงข้อมูลที่จำเป็นเกี่ยวกับโพสต์นั้นๆ เทมเพลตพื้นฐานคือ:
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> ในข้อมูลโค้ดข้างต้น สิ่งที่จำเป็นต้องมีคือ ชื่อ และ วันที่ รูปภาพเด่นเป็นทางเลือกและสามารถเพิ่มได้โดยการเพิ่มรูปภาพลงในโฟลเดอร์เพจที่คุณเพิ่งสร้างขึ้นและอ้างอิงตามตัวอย่างข้างต้น ส่วนข้อความที่ตัดตอนมานั้นเป็นทางเลือกเช่นกัน และหากคุณไม่ได้ใช้เครื่องหมาย <!-- end --> บิตแรกของโพสต์จะถูกใช้เป็นข้อความที่ตัดตอนมาโดยอัตโนมัติ
เทมเพลตนี้มาพร้อมกับตัวอย่างโพสต์บล็อก 3 รายการซึ่งมีทุกอย่างตั้งแต่การใช้โค้ดขนาดสั้น การแทรกรูปภาพ การใช้รูปภาพเด่นและข้อความที่ตัดตอนมา และอื่นๆ อีกมากมาย
เมื่อคุณพร้อมที่จะปรับใช้บล็อกและเผยแพร่แล้ว คุณจะมีตัวเลือก 2-3 ตัวเลือกที่พร้อมให้คุณใช้งาน
การปรับใช้บล็อกด้วยตนเองนั้นต้องการให้คุณรัน gatsby build เพื่อสร้าง build ที่ใช้งานจริง หลังจากนั้น คุณสามารถใช้เซิร์ฟเวอร์ใดๆ ก็ตามที่คุณมักจะใช้แอป React เช่น Digital Ocean droplet หรืออินสแตนซ์ AWS สิ่งที่คุณต้องมีคือวิธีการให้บริการไฟล์คงที่
หากคุณไม่คุ้นเคยกับการใช้งานแอปพลิเคชัน React ก็ยังมีตัวเลือกอื่นๆ อีกมากมาย
หากต้องการปรับใช้กับหน้า GitHub คุณต้องตั้งค่าคำนำหน้าเส้นทางใน gatsby-config.js ก่อน ค่าเริ่มต้นคือ pathPrefix: '/devblog' อย่างไรก็ตามควรเปลี่ยนเป็นชื่อ repo ที่คุณเลือก ตัวอย่างเช่น หากคุณมีบล็อกที่อยู่ใน https://github.com/YOURUSERNAME/myblog และต้องการให้ปรับใช้กับ https://YOURUSERNAME.github.io/myblog คุณจะต้องตั้งค่าคำนำหน้าเส้นทางเป็น pathPrefix: '/myblog' .
ถัดไป เพียงเรียกใช้ npm run deploy และบล็อกของคุณจะถูกปรับใช้
หรืออีกทางหนึ่ง หากคุณต้องการปรับใช้กับ https://YOURUSERNAME.github.io (เช่น ไซต์ผู้ใช้ / องค์กรของคุณ ไม่ใช่ไซต์โครงการ) จำเป็นต้องเปลี่ยนแปลงเพิ่มเติมอีกสองสามรายการ เอกสารอย่างเป็นทางการของ Gatsby มีสรุปไว้อย่างดีที่นี่
วิธีที่ง่ายที่สุดวิธีหนึ่งในการติดตั้งบล็อกคือการใช้ Netlify หากต้องการปรับใช้กับ Netlify เพียงคลิกปุ่มด้านล่างแล้วปฏิบัติตามคำแนะนำ
ตัวเลือกที่สรุปไว้ข้างต้นไม่ใช่ตัวเลือกเดียวสำหรับคุณในการปรับใช้บล็อก เอกสารอย่างเป็นทางการของ Gatsby มีรายละเอียดเกี่ยวกับตัวเลือกอื่นๆ มากมาย หากต้องการอ่านเพิ่มเติมเกี่ยวกับตัวเลือกการปรับใช้ คลิกที่นี่
ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดู LICENSE.md สำหรับข้อมูลเพิ่มเติม
