react gh pages

การปรับใช้แอพตอบสนอง* ไปยังหน้า gitHub

* สร้างขึ้นโดยใช้ create-react-app

การแนะนำ

ในบทช่วยสอนนี้ฉันจะแสดงให้คุณเห็นว่าคุณสามารถสร้างแอป React และปรับใช้กับหน้า GitHub ได้อย่างไร

ในการสร้างแอพ React ฉันจะใช้ create-react-app ซึ่งเป็นเครื่องมือที่ผู้คนสามารถใช้เพื่อสร้างแอป React ตั้งแต่เริ่มต้น ในการปรับใช้แอพ React ฉันจะใช้ gh-pages ซึ่งเป็นแพ็คเกจ NPM ที่ผู้คนสามารถใช้ในการปรับใช้สิ่งต่าง ๆ กับหน้า GitHub ซึ่งเป็นบริการเว็บโฮสติ้งฟรีที่จัดทำโดย GitHub

หากคุณติดตามพร้อมกับบทช่วยสอนนี้คุณจะจบลงด้วยแอพ React ใหม่ - โฮสต์บนหน้า GitHub - ซึ่งคุณสามารถปรับแต่งได้

การแปล

บทช่วยสอนนี้ได้รับการแปลจากภาษาอังกฤษดั้งเดิมเป็นภาษาต่อไปนี้:

• ภาษาจีนดั้งเดิม (เครดิต: @creaper9487)

การสอน

ข้อกำหนดเบื้องต้น

1. ติดตั้งโหนดและ NPM นี่คือเวอร์ชันที่ฉันจะใช้ในขณะที่ทำบทช่วยสอนนี้:

   $ node --version
   v16.13.2
   
   $ npm --version
   8.1.2

   การติดตั้ง NPM เพิ่มสองคำสั่งให้กับระบบ npm และ npx - ทั้งสองอย่างที่ฉันจะใช้ในขณะที่ทำบทช่วยสอนนี้

2. ติดตั้ง Git นี่คือเวอร์ชันที่ฉันจะใช้ในขณะที่ทำบทช่วยสอนนี้:

   $ git --version
   git version 2.29.1.windows.1

3. บัญชี GitHub

ขั้นตอน

1. สร้างที่เก็บ เปล่า บน GitHub

1. ลงชื่อเข้าใช้บัญชี GitHub ของคุณ
2. เยี่ยมชมสร้างแบบฟอร์มที่เก็บใหม่
3. กรอกแบบฟอร์มดังนี้:

   • ชื่อที่เก็บ: คุณสามารถป้อนชื่อใด ๆ ที่คุณต้องการ*

     * สำหรับเว็บไซต์โครงการคุณสามารถป้อนชื่อที่คุณต้องการ สำหรับเว็บไซต์ผู้ใช้ GitHub ต้องการให้ชื่อที่เก็บมีรูปแบบต่อไปนี้: {username}.github.io (เช่น gitname.github.io )

     ชื่อที่คุณป้อนจะปรากฏขึ้นในไม่กี่สถานที่: (a) ในการอ้างอิงถึงที่เก็บตลอด GitHub, (b) ใน URL ของที่เก็บและ (c) ใน URL ของแอพ React ที่ปรับใช้

     ในบทช่วยสอนนี้ฉันจะปรับใช้แอพ React เป็นเว็บไซต์โครงการ

     ฉันจะป้อน: react-gh-pages

   • ความเป็นส่วนตัวที่เก็บ: เลือก สาธารณะ (หรือ ส่วนตัว *)

     * สำหรับผู้ใช้ฟรี GitHub พื้นที่เก็บข้อมูลประเภทเดียวที่สามารถใช้กับหน้า GitHub นั้นเป็น สาธารณะ สำหรับผู้ใช้ GitHub Pro (และผู้ใช้ที่จ่ายเงินรายอื่น) สามารถใช้ที่เก็บข้อมูลทั้ง ภาครัฐ และ เอกชน กับหน้า GitHub ได้

     ฉันจะเลือก: สาธารณะ

   • เริ่มต้นที่เก็บ: ปล่อยให้ช่องทำเครื่องหมายทั้งหมดว่างเปล่า

     นั่นจะทำให้ GitHub สร้างที่เก็บที่ว่างเปล่าแทนที่จะเติมที่เก็บล่วงหน้าด้วย README.md , .gitignore และ/หรือไฟล์ LICENSE

4. ส่งแบบฟอร์ม

ณ จุดนี้บัญชี GitHub ของคุณมีที่เก็บว่างเปล่ามีชื่อและประเภทความเป็นส่วนตัวที่คุณระบุ

2. สร้างแอป React

1. สร้างแอป React ชื่อ my-app :

   ในกรณีที่คุณต้องการใช้ชื่อที่แตกต่างจาก my-app (เช่น web-ui ) คุณสามารถทำสิ่งนั้นให้สำเร็จโดยการแทนที่ทั้งหมดของ my-app ในบทช่วยสอนนี้ด้วยชื่ออื่นนั้น (เช่น my-app > web-ui > web-ui )

   $ npx create-react-app my-app

   คำสั่งนั้นจะสร้างแอป React ที่เขียนใน JavaScript ในการสร้างหนึ่งใน TypeScript คุณสามารถออกคำสั่งนี้แทน:

   $ npx create-react-app my-app --template typescript

   คำสั่งนั้นจะสร้างโฟลเดอร์ใหม่ชื่อ my-app ซึ่งจะมีซอร์สโค้ดของแอพ React

   นอกเหนือจากการมีซอร์สโค้ดของแอป React แล้วโฟลเดอร์นั้นยังเป็นที่เก็บ Git คุณลักษณะของโฟลเดอร์จะเข้ามาเล่นในขั้นตอนที่ 6

   ชื่อสาขา: master vs. main

   ที่เก็บ Git จะมีหนึ่งสาขาซึ่งจะมีชื่อว่า (A) master , ค่าเริ่มต้นสำหรับการติดตั้ง Git ใหม่ หรือ (b) ค่าของตัวแปรการกำหนดค่า GIT, init.defaultBranch หากคอมพิวเตอร์ของคุณใช้งาน GIT เวอร์ชัน 2.28 หรือใหม่กว่า และ คุณได้ตั้ง $ git config --global init.defaultBranch main ตัวแปรนั้นในการกำหนดค่า GIT ของคุณ .

   เนื่องจากฉันยังไม่ได้ตั้งค่าตัวแปรนั้นในการติดตั้ง Git สาขาในที่เก็บของฉันจะได้รับการตั้งชื่อว่า master ในกรณีที่สาขาในที่เก็บของคุณมีชื่อที่แตกต่างกัน (ซึ่งคุณสามารถตรวจสอบได้โดยเรียกใช้ $ git branch ) เช่น main ; คุณสามารถ แทนที่ master ที่เกิดขึ้นทั้งหมดตลอดส่วนที่เหลือของบทช่วยสอนนี้ด้วยชื่ออื่นนั้น (เช่น master → main )

2. ป้อนโฟลเดอร์ที่สร้างขึ้นใหม่:

   $ cd my-app

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

3. ติดตั้งแพ็คเกจ gh-pages NPM

1. ติดตั้งแพ็คเกจ gh-pages NPM และกำหนดว่าเป็นการพัฒนาการพัฒนา:

   $ npm install gh-pages --save-dev

ณ จุดนี้แพ็คเกจ gh-pages NPM ได้รับการติดตั้งบนคอมพิวเตอร์ของคุณและการพึ่งพาแอพของ React เมื่อมีการบันทึกไว้ในไฟล์ package.json ของแอป React

4. เพิ่มคุณสมบัติ homepage ลงในไฟล์ package.json

1. เปิดไฟล์ package.json ในตัวแก้ไขข้อความ

   $ vi package.json

   ในบทช่วยสอนนี้ตัวแก้ไขข้อความที่ฉันใช้คือ VI คุณสามารถใช้ตัวแก้ไขข้อความใด ๆ ที่คุณต้องการ ตัวอย่างเช่นรหัส Visual Studio

2. เพิ่มคุณสมบัติ homepage ในรูปแบบนี้*: https://{username}.github.io/{repo-name}

   * สำหรับไซต์โครงการนั่นคือรูปแบบ สำหรับเว็บไซต์ผู้ใช้รูปแบบคือ: https://{username}.github.io คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติ homepage ในส่วน "หน้า GitHub" ของเอกสาร create-react-app

   {
     "name": "my-app",
     "version": "0.1.0",
   + "homepage": "https://gitname.github.io/react-gh-pages",
     "private": true,

ณ จุดนี้ไฟล์ package.json ของ App React มีคุณสมบัติชื่อ homepage

5. เพิ่มสคริปต์การปรับใช้ในไฟล์ package.json

1. เปิดไฟล์ package.json ในตัวแก้ไขข้อความ (หากยังไม่ได้เปิดในหนึ่งเดียว)

   $ vi package.json

2. เพิ่มคุณสมบัติ predeploy และคุณสมบัติ deploy ให้กับวัตถุ scripts :

   "scripts": {
   +   "predeploy": "npm run build",
   +   "deploy": "gh-pages -d build",
       "start": "react-scripts start",
       "build": "react-scripts build",

ณ จุดนี้ไฟล์ package.json ของ React แอปรวมถึงสคริปต์การปรับใช้

6. เพิ่ม "ระยะไกล" ที่ชี้ไปที่ที่เก็บ GitHub

1. เพิ่ม "ระยะไกล" ในที่เก็บ Git ท้องถิ่น

   คุณสามารถทำได้โดยการออกคำสั่งในรูปแบบนี้:

   $ git remote add origin https://github.com/{username}/{repo-name}.git

   ในการปรับแต่งคำสั่งนั้นสำหรับสถานการณ์ของคุณให้แทนที่ {username} ด้วยชื่อผู้ใช้ GitHub ของคุณและแทนที่ {repo-name} ด้วยชื่อของที่เก็บ GitHub ที่คุณสร้างขึ้นในขั้นตอนที่ 1

   ในกรณีของฉันฉันจะเรียกใช้:

   $ git remote add origin https://github.com/gitname/react-gh-pages.git

   คำสั่งนั้นบอก Git ว่าฉันต้องการให้มันผลักดันสิ่งต่าง ๆ เมื่อใดก็ตามที่ฉัน-หรือแพ็คเกจ gh-pages npm ที่ทำหน้าที่ในนามของฉัน-ออกคำสั่ง $ git push จากภายในที่เก็บ Git ท้องถิ่นนี้

ณ จุดนี้ที่เก็บในท้องถิ่นมี "ระยะไกล" ซึ่ง URL ชี้ไปที่ที่เก็บ GitHub ที่คุณสร้างขึ้นในขั้นตอนที่ 1

7. กดแอป React ไปยังที่เก็บ GitHub

1. กดแอพ React ไปยังที่เก็บ GitHub

   $ npm run deploy

   นั่นจะทำให้สคริปต์ predeploy และ deploy ที่กำหนดไว้ใน package.json เพื่อเรียกใช้

   ภายใต้ฮูดสคริปต์ predeploy จะสร้างแอพ React เวอร์ชันที่แจกจ่ายได้และเก็บไว้ในโฟลเดอร์ชื่อ build จากนั้นสคริปต์ deploy จะผลักดันเนื้อหาของโฟลเดอร์นั้นไปยังการกระทำใหม่ในสาขา gh-pages ของที่เก็บ GitHub สร้างสาขานั้นหากไม่มีอยู่แล้ว

   โดยค่าเริ่มต้นการกระทำใหม่ในสาขา gh-pages จะมีข้อความผูกพันของ "การอัปเดต" คุณสามารถระบุข้อความ commit ที่กำหนดเองผ่านตัวเลือก -m เช่นนี้:

   $ npm run deploy -- -m " Deploy React app to GitHub Pages "

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

8. กำหนดค่าหน้า gitHub

1. นำทางไปยังหน้าการตั้งค่า หน้า GitHub
   1. ในเว็บเบราว์เซอร์ของคุณนำทางไปยังที่เก็บ GitHub
   2. ด้านบนเบราว์เซอร์รหัสคลิกที่แท็บที่มีป้ายกำกับว่า "การตั้งค่า"
   3. ในแถบด้านข้างในส่วน "รหัสและระบบอัตโนมัติ" คลิกที่ "หน้า"
2. กำหนดค่าการตั้งค่า "build and deployment" เช่นนี้:
   1. ที่มา : ปรับใช้จากสาขา
   2. สาขา :
      • สาขา: gh-pages
      • โฟลเดอร์: / (root)
3. คลิกที่ปุ่ม "บันทึก"

แค่ไหน! แอป React ได้รับการปรับใช้กับหน้า GitHub!

ณ จุดนี้แอป React สามารถเข้าถึงได้สำหรับทุกคนที่เข้าชม URL homepage ที่คุณระบุในขั้นตอนที่ 4 ตัวอย่างเช่นแอป React ที่ฉันปรับใช้สามารถเข้าถึงได้ที่ https://gitname.github.io/react-gh-pages

9. (ไม่บังคับ) จัดเก็บ ซอร์สโค้ด ของแอปตอบสนองบน GitHub

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

ในขั้นตอนนี้ฉันจะแสดงให้คุณเห็นว่าคุณสามารถจัดเก็บซอร์สโค้ดของแอป React บน GitHub ได้อย่างไร

1. กระทำการเปลี่ยนแปลงที่คุณทำในขณะที่คุณกำลังติดตามการสอนนี้ไปยังสาขา master ของพื้นที่เก็บข้อมูล Git ท้องถิ่น จากนั้นผลักดันสาขานั้นขึ้นไปยังสาขา master ของที่เก็บ GitHub

   $ git add .
   $ git commit -m " Configure React app for deployment to GitHub Pages "
   $ git push origin master

   ฉันขอแนะนำให้สำรวจพื้นที่เก็บข้อมูลของ GitHub ณ จุดนี้ มันจะมีสองสาขา: master และ gh-pages สาขา master จะมีซอร์สโค้ดของแอพตอบสนองในขณะที่สาขา gh-pages จะมีแอพ React เวอร์ชันกระจาย

การอ้างอิง

1. คู่มือการปรับใช้อย่างเป็นทางการ create-react-app
2. บล็อก GitHub: สร้างและปรับใช้หน้า GitHub จากสาขาใดก็ได้
3. รักษาไฟล์ CNAME เมื่อใช้โดเมนที่กำหนดเอง

หมายเหตุ

• ขอขอบคุณเป็นพิเศษสำหรับ GitHub (บริษัท ) ที่ให้บริการโฮสติ้ง GitHub Pages ฟรี
• และตอนนี้เวลาในการเปลี่ยนแอพ React เริ่มต้นที่สร้างขึ้นโดย create-react-app เป็นสิ่งที่ไม่เหมือนใคร!
• ที่เก็บนี้ประกอบด้วยสองสาขา:
  • master - ซอร์สโค้ด ของแอป React
  • gh-pages - แอป React ที่สร้างขึ้นจาก ซอร์สโค้ดนั้น

ผู้มีส่วนร่วม

ขอบคุณคนเหล่านี้ที่มีส่วนร่วมในการบำรุงรักษาบทช่วยสอนนี้

รายการนี้ได้รับการบำรุงรักษาด้วยตนเอง - สำหรับตอนนี้ - และรวมถึง (a) แต่ละคนที่ส่งคำขอดึงซึ่งในที่สุดก็รวมเข้ากับ master และ (b) แต่ละคนที่มีส่วนร่วมในวิธีที่แตกต่างกัน (เช่นให้ข้อเสนอแนะที่สร้างสรรค์) ฉันรวมไว้ในรายการนี้