สร้างบล็อกนักพัฒนาฟรีของคุณโดยใช้ Hugo และ Firebase

ในบทช่วยสอนนี้ ฉันจะสาธิตวิธีสร้างบล็อกของคุณเองโดยใช้ Hugo และปรับใช้บน Firebase ได้ฟรี Hugo เป็นโปรแกรมสร้างไซต์คงที่แบบโอเพนซอร์ส และ Firebase เป็นแพลตฟอร์มของ Google ที่นำเสนอทรัพยากรและบริการที่ใช้ในการเสริมการพัฒนาเว็บและมือถือ หากคุณเป็นนักพัฒนาที่ยังไม่มีบล็อกแต่สนใจที่จะโฮสต์บล็อก บทความนี้จะช่วยคุณสร้างบล็อก เพื่อทำตามขั้นตอนเหล่านี้ คุณจำเป็นต้องรู้วิธีใช้ Git และเทอร์มินัลของคุณ

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

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

การอ่านที่แนะนำ บน SmashingMag:

• การเปลี่ยนจาก WordPress เป็น Hugo
• วิธีสร้างเว็บไซต์ WordPress ที่ไม่มีหัวบน JAMstack
• การแทนที่ jQuery ด้วย Vue.js: ไม่จำเป็นต้องมีขั้นตอนการสร้าง
• การสร้างการเชื่อมต่อของมนุษย์อย่างแท้จริงภายในทีมระยะไกล

ตัวอย่างเช่น Chris Sevilleja เริ่มเขียนบทช่วยสอนในปี 2014 บนบล็อกของเขา scotch.io ซึ่งกลายเป็นธุรกิจที่เข้าร่วม Digital Ocean ในภายหลัง ประโยชน์ที่สำคัญอีกประการของการมีบล็อกทางเทคนิคคือทำให้คุณเป็นนักเขียนที่ดีขึ้นซึ่งอาจเป็นประโยชน์ในงานของคุณเมื่อเขียนการออกแบบซอฟต์แวร์และเอกสารข้อมูลจำเพาะทางเทคนิค นอกจากนี้ยังทำให้คุณเป็นครูและที่ปรึกษาที่ยอดเยี่ยม ตัวอย่างเช่น ฉันมักจะอ่าน research.swtch.com ซึ่งเป็นบล็อกของ Russ Cox ซึ่งเขียนบล็อกเกี่ยวกับภาษา Go และยังทำงานในทีม Google Go ที่สร้างมันขึ้นมา จากนี้ไป ฉันได้เรียนรู้มากมายเกี่ยวกับวิธีการทำงานของภาษาที่อาจไม่ได้รับจากงานหลักของฉัน

บล็อกที่ยอดเยี่ยมอีกบล็อกหนึ่งที่ฉันชอบอ่านและเรียนรู้มากคือ welearncode.com โดย Ali Spittel ซึ่งเคยเขียนว่าส่วนที่ยอดเยี่ยมของบล็อกคือ:

“การช่วยให้คนอื่นเรียนรู้วิธีเขียนโค้ดและทำให้คนที่มาหลังจากฉันง่ายขึ้น”

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

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

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

การตั้งค่า Hugo

หากคุณกำลังใช้งาน macOS หรือ Linux วิธีที่ง่ายที่สุดในการติดตั้ง Hugo คือการใช้ Homebrew ทั้งหมดที่คุณต้องใช้ในการรันบนเทอร์มินัลของคุณคือ:

 brew install hugo

หากคุณกำลังใช้งานบน windows สามารถติดตั้ง Hugo ได้โดยใช้ตัวติดตั้ง scoop หรือตัวจัดการแพ็คเกจช็อคโกแลต สำหรับตัก:

 scoop install hugo

สำหรับช็อกโกแลต:

 choco install hugo -confirm

หากไม่มีตัวเลือกใดที่ตรงกับคุณ ให้ตรวจสอบตัวเลือกเหล่านี้สำหรับการติดตั้ง

การตั้งค่าเครื่องมือ Firebase

ในการติดตั้งเครื่องมือ firebase คุณต้องติดตั้ง Node.js เพื่อเข้าถึง npm ในการติดตั้งเครื่องมือ Firebase ให้เรียกใช้:

 npm install -g firebase-tools

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

 firebase login

สร้างบล็อกของคุณ

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

 hugo new site sm-blog

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

 cd sm-blog git init

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

การเลือกและติดตั้งธีมสำหรับบล็อกของคุณ

สิ่งหนึ่งที่ฉันชอบเกี่ยวกับ Hugo คือชุมชนเบื้องหลังและนักพัฒนาทุกคนที่ส่งธีมให้ชุมชนใช้ มีธีมให้เลือกมากมาย ตั้งแต่เว็บไซต์ธุรกิจขนาดเล็ก พอร์ตโฟลิโอ ไปจนถึงบล็อก หากต้องการเลือกธีมของบล็อก ให้ไปที่ส่วนบล็อกของ themes.gohugo.io ฉันเลือกธีมที่เรียกว่า Cactus Plus เนื่องจากความเรียบง่ายและความเรียบง่าย ในการติดตั้งธีมนี้ ฉันจะต้องเพิ่มธีมนี้เป็นโมดูลย่อยของที่เก็บของฉัน ธีมจำนวนมากแนะนำให้ผู้ใช้ใช้โมดูลย่อยสำหรับการติดตั้ง แต่ถ้าไม่ใช่ ให้ทำตามคำแนะนำที่กำหนดโดยผู้สร้างธีมที่ให้ไว้ในคำอธิบาย ฉันจะเพิ่มธีมลงในโฟลเดอร์ /themes

 git submodule add -b master https://github.com/nodejh/hugo-theme-cactus-plus.git themes/hugo-theme-cactus-plus

ที่รูทของโฟลเดอร์บล็อก มีไฟล์ที่สร้างขึ้น config.toml นี่คือที่ที่คุณระบุการตั้งค่าสำหรับไซต์ของคุณ เราจะต้องเปลี่ยนธีมที่นั่น ชื่อธีมสอดคล้องกับชื่อโฟลเดอร์ของธีมที่เลือกในโฟลเดอร์ /themes นี่คือเนื้อหาของไฟล์ config.toml ในตอนนี้ คุณยังสามารถเปลี่ยนชื่อของบล็อกได้

 baseURL = "https://example.org/" languageCode = "en-us" title = "SM Blog" theme="hugo-theme-cactus-plus"

ตอนนี้เราสามารถเรียกใช้บล็อก จะมีลักษณะเหมือนกับธีม ยกเว้นการเปลี่ยนชื่อ เมื่อคุณเปิดเซิร์ฟเวอร์แล้ว ให้ไปที่ https://localhost:1313 บนเบราว์เซอร์ของคุณ

 hugo server -D

ปรับแต่งบล็อกของคุณ

ประโยชน์อย่างหนึ่งของการปรับใช้บล็อกของคุณเองคือการปรับเปลี่ยนให้เป็นส่วนตัวตามความชอบของคุณในทุกรูปแบบ วิธีหลักในการทำเช่นนี้กับ Hugo คือการเปลี่ยนธีมที่คุณเลือก ธีมจำนวนมากมีตัวเลือกการปรับแต่งเองผ่าน config.toml ผู้สร้างธีมมักจะแสดงรายการตัวเลือกและความหมายทั้งหมดไว้ในคำอธิบายบนหน้าธีม หากไม่เป็นเช่นนั้น ให้ตรวจสอบโฟลเดอร์ /exampleSite ของธีมและคัดลอกเนื้อหาของ config.toml ภายในโฟลเดอร์นั้นไปยังไฟล์ config.toml ของคุณ ตัวอย่างเช่น:

 cp themes/hugo-theme-cactus-plus/exampleSite/config.toml .

เนื่องจากธีมทั้งหมดต่างกัน การเปลี่ยนแปลงที่ฉันทำที่นี่อาจไม่มีผลกับธีมของคุณ แต่หวังว่าคุณจะพอมีไอเดียว่าจะทำอย่างไรกับบล็อกของคุณ

1. ฉันจะเปลี่ยนรูปประจำตัวและไอคอน Fav ของบล็อก ควรเพิ่มไฟล์สแตติกทั้งหมดรวมถึงรูปภาพในโฟลเดอร์ /static ฉันสร้างโฟลเดอร์ /images ภายในส static และเพิ่มรูปภาพที่นั่น
2. ฉันจะเพิ่ม Google Analytics เพื่อติดตามการเข้าชมบล็อกของฉัน
3. ฉันจะเปิดใช้งาน Disqus เพื่อให้ผู้อ่านสามารถแสดงความคิดเห็นในโพสต์ของฉันได้
4. ฉันจะเปิดใช้งาน RSS
5. ฉันจะใส่ลิงก์โซเชียลของฉันไปที่ Twitter และ Github
6. ฉันจะเปิดใช้งานการ์ด Twitter
7. ฉันจะเปิดใช้งานการสรุปภายใต้ชื่อโพสต์ในหน้าแรก

ดังนั้น config.toml ของฉันจะมีลักษณะดังนี้:

 ### Site settings baseurl = "your_firebase_address" languageCode = "en" title = "SM Blog" theme = "hugo-theme-cactus-plus" googleAnalytics = "your_google_analytics_id" [params] # My information author = "Cat Lense" description = "blog about cats" bio = "cat photographer" twitter = "cats" copyright = "Cat Photographer" # Tools enableRSS = true enableDisqus = true disqusShortname = "your_disqus_short_name" enableSummary = true enableGoogleAnalytics = true enableTwitterCard = true [social] twitter = "https://twitter.com/cats" github = "https://github.com/cats"

สร้างโพสต์แรกของคุณ

โพสต์ Hugo เขียนด้วยเครื่องหมาย ดังนั้นคุณจะต้องทำความคุ้นเคยกับมัน เมื่อสร้างโพสต์ คุณกำลังสร้างไฟล์ markdown ที่ Hugo จะแสดงผลเป็น HTML ใช้ชื่อโพสต์ของคุณ ทำให้เป็นตัวพิมพ์เล็ก แทนที่ช่องว่างด้วยยัติภังค์ นั่นจะเป็นชื่อโพสต์ของคุณ Hugo ใช้ชื่อไฟล์ แทนที่ยัติภังค์ด้วยช่องว่าง แปลงเป็นกรณีเริ่มต้น จากนั้นตั้งเป็นชื่อเรื่อง ฉันจะตั้งชื่อไฟล์ของฉัน my-first-post.md ในการสร้างโพสต์แรกของคุณ ให้เรียกใช้:

 hugo new posts/my-first-post.md

โพสต์ถูกสร้างขึ้นในโฟลเดอร์ /content นี่คือเนื้อหาของไฟล์

 --- title: "My First Post" date: 2020-03-18T15:59:53+03:00 draft: true ---

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

การเพิ่มทรัพยากรในโพสต์ของคุณ

ในการเพิ่มแหล่งข้อมูลให้กับโพสต์ของคุณ เช่น รูปภาพ วิดีโอ ไฟล์เสียง ฯลฯ ให้สร้างโฟลเดอร์ภายในโฟลเดอร์ /content/posts โดยใช้ชื่อเดียวกับโพสต์ของคุณโดยไม่รวมส่วนขยาย

ตัวอย่างเช่น ฉันจะสร้างโฟลเดอร์นี้:

 mkdir content/posts/my-first-post

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

 ![A cute cat](cute-cat.png)

การโฮสต์ซอร์สโค้ดของบล็อกของคุณ

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

สร้างที่เก็บบน Github เพื่อโฮสต์ซอร์สโค้ดของบล็อกของคุณ จากนั้นตั้งค่าที่เก็บระยะไกลในเครื่อง

 git remote add origin [remote repository URL]

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

 git add * git commit -m "Add my first post" git push origin master

การปรับใช้บล็อกของคุณกับ Firebase

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

ใส่ชื่อโครงการของคุณ

เปิดใช้งาน Google Analytics หากคุณต้องการใช้ในบล็อกของคุณ

เมื่อคุณสร้างโครงการเสร็จแล้ว ให้กลับไปที่รากของบล็อกและเริ่มต้นโครงการ Firebase ในบล็อก

 firebase init

คุณจะได้รับแจ้งให้ป้อนข้อมูลบางอย่างเมื่อคำสั่งนี้ทำงาน

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

 hugo

หลังจากนี้ สิ่งที่เราต้องทำคือทำให้บล็อกใช้งานได้

 firebase deploy

ตอนนี้บล็อกถูกปรับใช้แล้ว ลองดูที่ URL ของโฮสต์ที่ให้ไว้ในเอาต์พุต

ขั้นตอนถัดไป

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

แพลตฟอร์มของบุคคลที่สามไม่ได้แย่ไปทั้งหมด พวกเขามีผู้อ่านจำนวนมากที่อาจสนใจงานเขียนของคุณ แต่ยังไม่พบบล็อกของคุณ คุณสามารถโพสต์ข้ามไปยังไซต์เหล่านั้นเพื่อนำเสนองานของคุณต่อผู้ชมจำนวนมาก แต่อย่าลืมลิงก์กลับไปยังบล็อกของคุณเอง เพิ่มลิงก์ไปยังบทความของคุณในบล็อกของคุณไปยังแพลตฟอร์มใดก็ตามที่คุณกำลังโพสต์เป็น URL ตามรูปแบบบัญญัติ เพื่อไม่ให้เครื่องมือค้นหาถูกมองว่าเป็นเนื้อหาที่ซ้ำกัน และส่งผลเสียต่อ SEO ของไซต์ของคุณ ไซต์เช่น Medium, dev.to และ Hashnode รองรับ Canonical URL

บทสรุป

การเขียนบล็อกทางเทคนิคของคุณเองมีประโยชน์อย่างมากต่ออาชีพการเป็นนักพัฒนาซอฟต์แวร์ และช่วยให้คุณพัฒนาทักษะและความเชี่ยวชาญได้ ฉันหวังว่าบทช่วยสอนนี้จะเริ่มต้นคุณในการเดินทางครั้งนั้น หรืออย่างน้อยก็สนับสนุนให้คุณสร้างบล็อกของคุณเอง