github สำหรับคุม version และแบ่งปัน open source
Source code | HTML | JavaScript | Web 2.0 | Responsive Web Design | CanvasJS.com | Bootstrap | Github.io |
กิตฮับ (GitHub) คือ เว็บไซต์ที่ให้บริการพื้นที่ทางอินเทอร์เน็ต (Hosting service) สำหรับควบคุมการปรับปรุงแก้ไขรหัสต้นฉบับ (Source code version control) โดย กิต (Git) คือ เครื่องมือที่ใช้เพื่อสนับสนุนการพัฒนารหัสต้นฉบับ (Source code) ที่กำหนดการอนุญาตเข้าถึงให้ทีมงานได้จัดการพื้นที่เก็บโค้ด ได้ร่วมกันทำงานในรูปของทีมผู้พัฒนา (Contributor) สำหรับแต่ละ Repository นอกจากนี้ github.com ยังมีบริการให้สิทธิควบคุม และการกระจายรุ่นของรหัสต้นฉบับ (Distributed version control) ควบคุมการเข้าถึงรหัสต้นฉบับ (Access control) สามารถกำหนดคุณสมบัติด้านความร่วมมือ (Collaboration) แล้วยังสามารถติดตามข้อบกพร่อง (Bug tracking)
กิตฮับ เสนอแผนการให้บริการใน 2 รูปแบบ คือ แบบส่วนตัว และ แบบบัญชีฟรี โดยอย่างหลังมักจะใช้ในการเก็บตัวแบบซอฟต์แวร์ในโครงการโอเพนซอร์ซ ในเดือนมิถุนายนปี 2018 กิตฮับได้รายงานว่ามีผู้ใช้งานกว่า 28 ล้านราย และได้จัดเก็บรหัสต้นฉบับจำนวน 57 ล้านโครงการ ในจำนวนนี้มีโครงการสาธารณะจำนวน 28 ล้านโครงการ ทำให้กิตฮับกลายเป็นพื้นที่จัดเก็บรหัสต้นฉบับที่ใหญ่ที่สุดในโลก
กิตฮับ ได้รับการพัฒนาขึ้นโดย คริส วานสเตรท, พีเจ ไฮเอท และ ทอม เพรสตัน-เวอร์เนอร์ เขียนขึ้นจากรูบีออนเรลส์ เริ่มกิจการในเดือนกุมภาพันธ์ 2008 บริษัทกิตฮับ อิงค์ ได้ก่อตั้งในปี 2007 อยู่ในซานฟรานซิสโก (San Franscisco) และในเดือนมีนาคม 2008 คริส วานสเตรท ได้โพสต์ในบล็อกส่วนตัว ว่ากิตฮับมีผู้ใช้งานกว่า 2,000 รายแล้ว และเมื่อวันที่ 4 มิถุนายน 2018 ไมโครซอฟท์ได้ประกาศว่าทางบริษัทได้บรรลุข้อตกลง ในการซื้อกิจการกิตฮับเป็นมูลค่ากว่า 7.5 พันล้านเหรียญสหรัฐฯ
ตัวอย่าง webpage 3 หน้า http://thaiall.github.io/www/webmaster/responsive/
index.html
project.htm
aboutme.htm
การใช้บริการของ github.com และ github.io เพื่อฝากแฟ้มของนักศึกษา หัวข้อที่ 1. แนะนำแหล่งอ้างอิง
1.1 เคยเล่าเรื่อง การใช้บริการ github.com
ในส่วนของการสร้าง Github page หรือบริการ homepage กับ github.io
ไว้ที่ http://www.thaiall.com/blog/burin/9598/
ต.ย. https://thaiall.github.io/programming-page/

1.2 เคยเล่าเรื่อง การใช้บริการ github.com
ในการจัดการ source code ที่ใช้ git ทำการ pull และ push กับ github.com
บทเรียนที่ 1 http://www.thaiall.com/blog/burin/8966/
บทเรียนที่ 2 http://www.thaiall.com/blog/burin/8868/
บทเรียนที่ 3 http://www.thaiall.com/blog/burin/8875/
หรือที่ http://www.thaiall.com/git/index.html

1.3 เคยเล่าเรื่อง การใช้บริการ github.com
ในการ push project จาก atom เข้า github.com
http://www.thaiall.com/blog/burin/8857/

1.4 การเขียน webpage โดยใช้ tag ของ github.com
ในแฟ้ม README.md แสดงผลเมื่อเปิด Repository ตามปกติ
ต.ย. https://github.com/thaiall/programming-page
หรือใน folder หากมีแฟ้ม README.md ก็จะถูกผลต่อท้ายรายชื่อแฟ้ม
ต.ย. https://github.com/thaiall/programming-page/tree/master/json
แต่ถ้าใช้บริการ GitHub Pages ผ่าน github.io ก็ใช้แฟ้ม index.md
ต.ย. https://github.com/thaiall/blank_repository/blob/master/index.md
มี Syntax และตัวอย่างสำหรับเขียน README.md และ INDEX.md ใน github.com
อ่านที่ https://help.github.com/articles/basic-writing-and-formatting-syntax/

1.5 นิยามของ Github Pages
Github Pages is designed to host your personal, organization
or project pages from a GitHub repository
โดย Repository คือ กรุ หรือ ที่จัดเก็บ
ซึ่งมี Folder ซ้อน Folder ได้ และใน Folder
สามารถมี README.md และ INDEX.md ประจำ Folder ได้
จะใช้พิมพ์ใหม๋ หรือพิมพ์เล็ก ก็ให้ผลไม่ต่างกัน
และ INDEX.md ใน github.io ทำหน้าที่เหมือน index.html
เช่น https://thaiall.github.io/programming-page/css/

หัวข้อที่ 2. การสร้าง readme.md
มีขั้นตอนการทดสอบ ดังนี้
2.1 เข้า repository
เช่น https://github.com/thaiall/blank_repository
2.2 คลิ๊ก Create new file และพิมพ์ readme.md
2.3 ใต้คำว่า Edit new file ให้พิมพ์
# hello
## This is test
### You can do it
My name is **burin for bold** \
My last name is *rujjanapan for italic* <br/>
>This is the quoting text
>It may be some words from external resource.
>That you must post with the reference address.\
```
// This is Quoting code
echo "hello world";
```
**Link**
[GitHub Pages](https://pages.github.com/)
[Link](http://www.thaiall.com/web2/github.htm)
[Relative links](test/readme.md)
![Image](http://www.thaiall.com/me/picme.jpg) <br/>
**Lists**
- topic1
- topic2
- topic3

or use number to be ol tag \
such as 1. 2. 3. \
http://www.thaiall.com

2.4 พบว่าทั้งหมดมี 24 บรรทัด แล้วกดปุ่ม Commit new file
การ enter ไม่ถือเป็น line break แต่มีหลายวิธี
- two space ท้าย line
- <br/>
- \

2.5 คลิ๊กที่แฟ้มชื่อ readme.md
จะพบผลลัพธ์เป็น preview และคลิ๊กที่ปากกา เพื่อแก้ไขได้
หลังแก้ไข คลิ๊ก Commit changes

2.6 หลังจบการทดสอบแล้วว่าใช้ได้
ก็ลบแฟ้ม readme.md
แล้วใส่เนื้อหาใหม่ ที่สัมพันธ์กับ repository ของท่าน
ซึ่งท่านก็จะไม่พบแฟ้ม readme.md
ใน https://github.com/thaiall/blank_repository

หัวข้อที่ 3. การสร้าง index.md
ใช้ syntax แบบ readme.md ในข้อ 2 ได้ทันที
หรือเขียนเป็นแฟ้ม html ที่เรียก image, css, js
จาก external ผ่าน github.io
เช่น
หน้าแรก https://thaiall.github.io/programming-page/
ต.ย. https://thaiall.github.io/programming-page/aboutme.htm เป็น full html
ต.ย. https://thaiall.github.io/programming-page/php.htm
ต.ย. https://thaiall.github.io/programming-page/css/ เรียก index.md อัตโนมัติ
ต.ย. https://thaiall.github.io/programming-page/test01.php
ไม่รองรับ php หาก link ไป ก็จะกลายเป็น download
และ ตัวอย่างสำคัญ ที่ชวนไปใช้บริการ
คือ https://thaiall.github.io/programming-page/aboutme.htm
ที่อยู่ใน github.io ได้เหมือนกับ Web hosting ทั่วไป ที่บริการ html

หัวข้อที่ 4. การส่ง html เข้า repository และเรียกผ่าน github.io ได้เลย
- ส่งแฟ้มเข้า github.com สามารถเลือกคลิ๊ก Upload files ที่มุมบนขวา
- แฟ้มที่จะส่งเข้าไปควรเป็น UTF8 ตามค่า Default และ charset ก็ต้องเป็น utf-8
คล้ายกับแฟ้ม https://thaiall.github.io/tech100/office/word16.htm (utf-8)
หรือที่ http://www.thaiall.com/office/word16.htm (windows-874)
- การสร้าง folder จะสร้าง folder เปล่าไม่ได้ ต้อง Create new file ที่มุมบนขวา
แล้วพิมพ์ ชื่อ folder ตามด้วยชื่อแฟ้ม เช่น office/readme.md
- สร้าง subfolder ซ้อนกันได้ แต่ก็ต้องมีแฟ้มใน subfolder ผมสร้าง readme.md เสมอ
เช่น https://thaiall.github.io/tech100/office/word16_files/readme.md
หรือ https://thaiall.github.io/tech100/office/word16_files/image001.jpg

หัวข้อที่ 5. นำ 3 แฟ้มที่เก็บไว้ ส่งเข้า github.com
5.1 นำ wordpage ที่เคยสร้างส่งเข้า github.com
เช่น http://www.thainame.net/ntu/burin/
หรือ http://www.thainame.net/home/burin/
5.2 แฟ้มที่มี กำหนด charset เป็น windows-874 ทำให้ต้องแปลงเป็น utf-8 ก่อน
5.3 ใช้ wordpad แก้ไขลิงค์ และแก้ลิงค์ของภาพ
https://thaiall.github.io/tech100/wordpage/ = index.html
https://thaiall.github.io/tech100/wordpage/friends.htm
https://thaiall.github.io/tech100/wordpage/aboutme.htm
5.4 ใช้ notepad save as เป็น utf-8
https://thaiall.github.io/tech100/wordpage/indexo.htm (ยังไม่แก้ไข)
5.5 หากไม่แก้ไข indexo.htm ก่อน upload
ต้องไปกำหนดใน browser เช่น firefox ให้ more, text encoding เป็น thai
แต่สำหรับ chrome พบว่า Chrome 55 has removed the Encoding menu
หากต้องการใช้ต้องติดตั้ง chrome extension
https://chrome.google.com/webstore/detail/set-character-encoding/bpojelgakakmcfmjfilgdlmhefphglae?hl=en

หัวข้อที่ 6. เขียน webpage ด้วย word2016
- Save as , Web Page, Filtered (.htm, .html)
- ใน Tools ตอนสั่ง Save as พบ Web Options
- Encoding = Unicode (UTF-8)
https://thaiall.github.io/tech100/wordpage/hello.htm
การเขียน Markdown

กรณีนี้ ผิดปกติ 3 จุด
#เล่าสู่กันฟัง 62-218
การเขียนเอกสารด้วย markdown ก็เป็นอีกทางเลือกที่ง่ายกว่า เดิมนั้นก็มี html เป็นตัวเลือกเดียว ในการเขียนเอกสารที่มีตัวอักษรแบบหลายมิติ ไปพบว่าใช้เขียนเอกสารชื่อ readme.md ใน github.com หรือ github.io และใน editor อื่น ๆ ก็เริ่มให้การสนับสนุน
The Markdown elements outlined in John Gruber's design document. [markdownguide.org]
การสร้างองค์กรใน github.com
การสร้าง index.html สำหรับ github.io - 651102
การ clone จาก github.com $ git clone https://github.com/mozilla/pdf.js.git
สั่งดาวน์โหลด script ทั้งหมดใน repository จาก github.com
มาไว้ในเครื่องคอมพิวเตอร์ของเรา บน current directory
ระยะเวลาในการ download ขึ้นอยู่ขนาดของ repository และความเร็วในการเชื่อมต่อ
ซึ่งยังนำ package นี้ไปใช้ในทันทีไม่ได้ ต้องมีขั้นตอนต่อไป
หลัง clone ทำให้ห้อง pdf.js มีขนาดรวมถึง 203 MB, 1626 Files, 194 Folders
pdf.js
git
rspsocial
Thaiall.com