kaeland.github.io
1.0.0
ที่เก็บนี้ให้รหัสคุณที่คุณจะต้องเริ่มต้นเว็บไซต์ส่วนตัวที่แสดงผลงานของคุณในฐานะนักพัฒนาซอฟต์แวร์ และเมื่อคุณจัดการรหัสในที่เก็บ GitHub มันจะแสดงหน้าเว็บโดยอัตโนมัติด้วยข้อมูลโปรไฟล์ของเจ้าของรวมถึงภาพถ่ายชีวภาพและที่เก็บ
แม้ว่าเว็บไซต์ส่วนตัวของคุณกำลังรอให้เป็นส่วนตัวอยู่ มันมีพื้นที่สำหรับเน้นพื้นที่เฉพาะที่คุณสนใจในการพัฒนาซอฟต์แวร์เช่นภาษาหรืออุตสาหกรรม และกำลังยืนอยู่เพื่อเผยแพร่โพสต์บล็อกที่ยอดเยี่ยมครั้งต่อไปของคุณ
เป็นไปได้ทั้งหมดที่ใช้การรวมกันของ Jekyll (สำหรับการสร้างเว็บไซต์ของคุณ), หน้า GitHub (สำหรับการโฮสต์เว็บไซต์ของคุณ) และ API ของ GitHub (สำหรับการเติมเนื้อหาของเว็บไซต์ของคุณโดยอัตโนมัติ)
github/personal-website repo repo คุณจะทำสำเนาที่เก็บ "เว็บไซต์ส่วนตัว" ของคุณเองเพื่อให้คุณมีโครงการของคุณเองในการปรับแต่ง "ส้อม" เป็นสำเนาของที่เก็บ ดังนั้นเลือก "Fork" บนที่เก็บ github/personal-website
เมื่อคุณพบบ้านสำหรับที่เก็บข้อมูลของคุณแล้วมันเป็นของคุณ คุณเป็นเจ้าของดังนั้นคุณพร้อมที่จะเผยแพร่หากคุณต้องการ
หากคุณต้องการจัดการเว็บไซต์ของคุณในสภาพแวดล้อมการพัฒนาเว็บในท้องถิ่นคุณจะใช้ทับทิม
เมื่อคุณพบบ้านสำหรับที่เก็บข้อมูลของคุณแล้ว ให้โคลนมัน
Jekyll เป็นอัญมณีทับทิมที่สามารถติดตั้งในระบบส่วนใหญ่
gem install jekyll bundler
cd personal-website
bundle install
bundle exec jekyll serve
เมื่อคุณโฮสต์รหัสเว็บไซต์ส่วนตัวของคุณใน GitHub คุณจะได้รับการสนับสนุนจากการโฮสต์ฟรีผ่านหน้า GitHub
วิธีการที่เร็วที่สุด คือการเปลี่ยนชื่อ username.github.io ที่เก็บของคุณชื่อ github.io ซึ่ง username คือชื่อผู้ใช้ GitHub ของคุณ (หรือชื่อองค์กร) จากนั้นในครั้งต่อไปที่คุณผลักดันการเปลี่ยนแปลงใด ๆ ไปยังสาขา master ของที่เก็บของคุณพวกเขาจะสามารถเข้าถึงได้บนเว็บที่ที่อยู่ username.github.io ของคุณ. github.io ที่อยู่
หากคุณต้องการใช้โดเมนที่กำหนดเอง คุณจะต้องเพิ่มลงในการตั้งค่า "โดเมนที่กำหนดเอง" ของที่เก็บของคุณบน github.com จากนั้นลงทะเบียนและ/หรือกำหนดค่าโดเมนของคุณด้วยผู้ให้บริการ DNS
เป็นเว็บไซต์ของคุณและคุณควบคุมซอร์สโค้ด ดังนั้นคุณสามารถปรับแต่งทุกอย่างถ้าคุณต้องการ แต่เราได้ให้การปรับแต่งอย่างรวดเร็วจำนวนหนึ่งเพื่อให้คุณพิจารณาเมื่อคุณนำเว็บไซต์ของคุณออกจากพื้นดิน
การปรับแต่งส่วนใหญ่สามารถทำได้ในเวลาไม่กี่วินาทีโดยการแก้ไขไฟล์ _config.yml ของที่เก็บของคุณ เพียงจำไว้ว่าให้รีสตาร์ทเซิร์ฟเวอร์ท้องถิ่นของคุณทุกครั้งที่คุณบันทึกการเปลี่ยนแปลงใหม่เพื่อให้เว็บไซต์ที่ขับเคลื่อนด้วย Jekyll ของคุณสร้างใหม่ได้อย่างถูกต้อง:
jekyll serve ตามค่าเริ่มต้นเว็บไซต์ของคุณจะแสดงในรูปแบบสองคอลัมน์บนอุปกรณ์หน้าจอขนาดใหญ่พร้อมรูปภาพชื่อและข้อมูลพื้นฐานของคุณที่แสดงใน "แถบด้านข้าง" ด้านซ้าย แต่คุณสามารถเปลี่ยนเป็นเลย์เอาต์คอลัมน์เดี่ยว "ซ้อน" ได้อย่างรวดเร็วโดยการเปลี่ยนบรรทัดในไฟล์ _config.yml ที่อ่าน layout: sidebar เป็น layout: stacked
ตามค่าเริ่มต้นเว็บไซต์ของคุณจะปรากฏขึ้นพร้อมกับพื้นหลังสีขาวและสีเทา "แสง" พร้อมข้อความมืด แต่คุณสามารถเปลี่ยนเป็นพื้นหลัง "มืด" ได้อย่างรวดเร็วด้วยข้อความสีขาวโดยการเปลี่ยนบรรทัดในไฟล์ _config.yml ของคุณที่อ่าน style: light to style: dark
เว็บไซต์ของคุณได้รับการกำหนดค่าล่วงหน้าด้วยสามหัวข้อ (เช่น "การออกแบบเว็บ" และ "Sass") ที่ปรากฏในส่วนที่ชื่อ "ความสนใจของฉัน" สิ่งเหล่านี้จะถูกเก็บไว้ในไฟล์ _config.yml ของที่เก็บของคุณซึ่งคุณสามารถกำหนดชื่อของแต่ละหัวข้อและรายละเอียดเพิ่มเติมอีกสองราย:
web_url : ที่อยู่เว็บที่คุณต้องการในหัวข้อของคุณเพื่อเชื่อมโยงไปยัง (เช่น https://github.com/topics/sass )image_url : ที่อยู่เว็บของภาพ (สี่เหลี่ยมจัตุรัส) ที่คุณต้องการปรากฏในหัวข้อของคุณ หากต้องการ เพิ่มหน้า ลงในเว็บไซต์ของคุณ (เช่นเรซูเม่โดยละเอียด):
.html หรือ .md ใหม่ที่รูทของที่เก็บของคุณhttp://yoursite.dev/filename ) ---
layout: default
---
เพื่อ เพิ่มโพสต์บล็อก ไปยังเว็บไซต์ของคุณ:
.md ใหม่ในที่เก็บ /_posts/ ไดเรกทอรี YEAR-MONTH-DAY-title.MARKUP
---
title: "The title of my blog post"
---
เว็บไซต์ของคุณมาพร้อมกับโพสต์บล็อกตัวยึดที่คุณสามารถอ้างอิงได้ โดยเฉพาะอย่างยิ่งเรื่องด้านหน้าของมันประกาศว่า published เป็น false เพื่อที่จะไม่ปรากฏบนเว็บไซต์ของคุณ
ในขณะที่คุณ สามารถ กำหนด layout ในเรื่องด้านหน้าเว็บไซต์ของคุณได้รับการกำหนดค่าล่วงหน้าเพื่อกำหนดเค้าโครง post ให้กับโพสต์ทั้งหมดใน /_posts/ ไดเรกทอรีของคุณ ดังนั้นคุณไม่ต้องประกาศในโพสต์ของคุณถ้าคุณไม่ต้องการ
การประชุมของ Jekyll สำหรับการเขียนและการจัดการโพสต์บล็อกมีความยืดหยุ่นมาก คุณสามารถเรียนรู้เพิ่มเติมได้ในเอกสารของ Jekyll สำหรับ "โพสต์"
เพื่อให้คุณมีรากฐานที่ดีในการเริ่มต้นเว็บไซต์ส่วนตัวของคุณที่เก็บข้อมูลของคุณรวมถึง "รวม"-ไฟล์ .html แบบไดนามิกที่นำกลับมาใช้ใหม่ทั่วทั้งเว็บไซต์ของคุณ พวกเขาทั้งหมดเก็บไว้ใน /_includes/ ไดเรกทอรี
มีผู้ต้องสงสัยตามปกติเช่น header.html และ footer.html แต่มีการชี้ให้เห็นอีกไม่กี่อย่าง:
interests.html : รายการหัวเรื่องและไดนามิกของ "ความสนใจของฉัน" ซึ่งมีการเติมเต็มหัวข้อที่คุณแสดงไว้ใน _config.yml ของคุณmasthead.html : คอลเลกชันของอวตารชื่อไบโอและข้อมูลเมตาอื่น ๆ ที่แสดงอย่างเด่นชัดบนหน้าเว็บทั้งหมดของคุณเพื่อช่วยระบุว่าเว็บไซต์เกี่ยวกับอะไรpost-card.html : งานนำเสนอที่มีขนาดกะทัดรัดและสรุปของโพสต์บล็อกได้นำกลับมาใช้ใหม่เพื่อแสดงรายการโพสต์บล็อกล่าสุดของคุณprojects.html : รายการหัวเรื่องและไดนามิกของ "โครงการของฉัน" ซึ่งเต็มไปด้วยรายชื่อที่เก็บ GitHub ใหม่ล่าสุดของคุณrepo-card.html : งานนำเสนอที่มีขนาดกะทัดรัดและสรุปของที่เก็บนำกลับมาใช้ใหม่เพื่อแสดงรายชื่อที่เก็บ GitHub ของคุณthoughts.html : รายการหัวเรื่องและไดนามิกของ "ความคิดของฉัน" ซึ่งเต็มไปด้วยรายชื่อโพสต์บล็อกล่าสุดของคุณtopic-card.html : งานนำเสนอที่มีขนาดกะทัดรัดและสรุปของหัวข้อ (กำหนดไว้ใน _config.yml ) ของคุณอีกครั้งเพื่อแสดงรายการความสนใจของคุณพื้นที่เก็บข้อมูลของคุณมาพร้อมกับสามเลย์เอาต์:
index.html หน้าแรกเพื่อแสดงรายชื่อโครงการความสนใจและ (ทางเลือก) โพสต์บล็อกของคุณ/_posts/ ไดเรกทอรีของคุณการประชุมของ Jekyll สำหรับการกำหนดเลย์เอาต์นั้นมีความยืดหยุ่นมาก คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับการปรับแต่งเลย์เอาต์ของคุณในเอกสาร "เลย์เอาต์" ของ Jekyll
เว็บไซต์ของคุณได้รับการกำหนดค่าล่วงหน้าเพื่อใช้กรอบ CSS ที่ยืดหยุ่นมากที่เรียกว่า "Primer" ควบคู่ไปกับสไตล์ที่กำหนดเองที่คุณเขียนใน /assets/styles.scss SASS Stylesheet ปัจจุบันมีการอ้างอิงภายในไฟล์ styles.scss ของคุณโดยใช้ CSS นำเข้าที่กฎ:
@import url('https://unpkg.com/primer/build/build.css');
แน่นอนว่าคุณยินดีต้อนรับที่จะลบหรือแทนที่ด้วยเฟรมเวิร์กอื่น เพียงจำไว้ว่า HTML ที่เว็บไซต์ของคุณได้รับการบรรจุไว้ล่วงหน้าพร้อมการอ้างอิง "คลาสยูทิลิตี้" หลาย ๆ เรื่องเพื่อกำหนดสิ่งต่าง ๆ เช่นความกว้างของคอลัมน์ระยะขอบและสีพื้นหลัง
ชุดรูปแบบมีให้เป็นโอเพ่นซอร์สภายใต้ข้อกำหนดของใบอนุญาต MIT
