จะเผยแพร่เว็บไซต์ที่สร้างโดย Node.js ไปยัง Github Pages ได้อย่างไร?


106

ฉันสร้างเว็บไซต์โดยใช้ Node.js เป็นเซิร์ฟเวอร์ ดังที่ฉันทราบไฟล์ node.js ควรเริ่มทำงานโดยพิมพ์คำสั่งในเทอร์มินัลดังนั้นฉันไม่แน่ใจว่า Github Pages รองรับ node.js-hosting หรือไม่ แล้วฉันควรทำอย่างไร?


2
ลองดูที่github.com/assemble/assembleเช่นกันซึ่งเป็นตัวสร้างไซต์แบบคงที่ตาม grunt.js โดยทั่วไปคุณเพียงแค่รันgrunt assembleจากนั้นคอมไพล์คอมมิตและกดไปที่สาขา gh-pages จากนั้นคุณก็ออกและรัน
jonschlinkert

Heroku อาจช่วยคุณได้heroku.com
Achraf

คำตอบ:


106

เพจ GitHub โฮสต์เฉพาะเพจ HTML แบบคงที่ ไม่รองรับเทคโนโลยีฝั่งเซิร์ฟเวอร์ดังนั้นแอปพลิเคชัน Node.js จะไม่ทำงานบนหน้า GitHub มีจำนวนมากของผู้ให้บริการโฮสติ้งตามที่ระบุไว้ในที่มีวิกิพีเดีย Node.js

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

หากคุณต้องการโฮสต์เพจแบบคงที่บน GitHub ให้อ่านคู่มือนี้ หากคุณวางแผนที่จะใช้Jekyllแล้วคู่มือนี้จะเป็นประโยชน์มาก


1
สิ่งที่เกี่ยวกับตัวอย่างนี้แล้ว ?: idflood.github.io/ThreeNodes.js/public/index.html ซึ่งอยู่บน Node.js หากคุณดูรหัส: github.com/idflood/ThreeNodes.js
Lilian A. Moraru

5
@ LilianA.Moraru นั่นคือเพจโครงการสำหรับเพจโปรเจ็กต์ต้องสร้างสาขาพิเศษที่เรียกว่า gh-pages ดูที่สาขาgh-pagesของที่เก็บมันมีไฟล์ html ที่บริสุทธิ์ดังนั้นทุกสิ่งที่คุณเห็น ลิงค์มาจากสาขา gh-pages จริงๆ
Akshat Jiwan Sharma

repo ที่ดีโดยวิธีการ
Akshat Jiwan Sharma

@Akshat_Jiwan_Sharma คุณพูดถูก นั่นคือสิ่งที่ฉันรู้ แต่วันนี้ฉันเห็นไซต์นี้บน github และคิดว่าคุณสามารถใช้ Node.js ได้จริง ฉันไม่ได้สังเกตว่ามันเป็นเพียงที่เก็บข้อมูลในองค์กร หากเป็นองค์กรเองมากกว่าที่จะเป็นในสาขาหลัก ...
Lilian A. Moraru

1
repl.itรองรับการโฮสต์แอปฟรีแล้วแม้ว่าฉันจะไม่แน่ใจว่ามีหน่วยความจำเท่าไหร่หรือแม้กระทั่งวิธีเชื่อมต่อกับที่เก็บ Git แม้ว่าอาจมีประโยชน์สำหรับโครงการขนาดเล็ก
Neil Chowdhury

33

พวกเราผู้ชื่นชอบ Javascript ไม่จำเป็นต้องใช้ Ruby (Jekyll หรือ Octopress) เพื่อสร้างเพจแบบคงที่ในเพจ Github เราสามารถใช้ Node.js และHarpได้เช่น:

เหล่านี้เป็นขั้นตอน บทคัดย่อ:

  1. สร้างที่เก็บใหม่
  2. โคลนที่เก็บ

    git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git
    
  3. เริ่มต้นแอป Harp (ในเครื่อง):

    harp init _harp
    

อย่าลืมตั้งชื่อโฟลเดอร์ด้วยขีดล่างที่จุดเริ่มต้น เมื่อคุณปรับใช้กับ GitHub Pages คุณไม่ต้องการให้ไฟล์ต้นฉบับของคุณได้รับการบริการ

  1. รวบรวมแอป Harp ของคุณ

    harp compile _harp ./
    
  2. ปรับใช้กับ Gihub

    git add -A
    git commit -a -m "First Harp + Pages commit"
    git push origin master
    

และนี่คือบทแนะนำสุดเจ๋งที่มีรายละเอียดเกี่ยวกับสิ่งดีๆเช่นเลย์เอาต์บางส่วน Jade และ Less


3
ฉันเป็นคนรักทับทิม แต่ฉันจะโกงมันสักหน่อย รวมพิณ + เพจ google สุดเจ๋ง !!!
Alter Lagos

3
ระมัดระวังเมื่อติดตั้งพิณในโครงการที่มีอยู่แล้ว!
Mehul Tandale

1

ฉันสามารถตั้งค่าการดำเนินการ githubเพื่อคอมมิตผลลัพธ์ของคำสั่งการสร้างโหนดโดยอัตโนมัติ ( yarn buildในกรณีของฉัน แต่มันควรทำงานกับ npm ด้วย) ไปยังgh-pagesสาขาเมื่อใดก็ตามที่มีการส่งคอมมิตใหม่ไปยังมาสเตอร์

แม้ว่าจะไม่เหมาะอย่างยิ่งเนื่องจากฉันต้องการหลีกเลี่ยงการคอมมิตไฟล์ที่สร้างขึ้น แต่ดูเหมือนว่านี่เป็นวิธีเดียวในการเผยแพร่ไปยังหน้า github

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

  • อัปเดตขั้นตอน "โหนดการตั้งค่า" เพื่อใช้เวอร์ชันที่พบที่นี่เนื่องจากขั้นตอนจากตัวอย่างที่ฉันใช้อยู่นั้นเกิดข้อผิดพลาดเนื่องจากไม่พบการดำเนินการที่ถูกต้อง
  • ลบบรรทัดที่มีyarn exportเนื่องจากไม่มีคำสั่งนั้นและดูเหมือนจะไม่เพิ่มอะไรที่เป็นประโยชน์ (คุณอาจต้องการเปลี่ยนบรรทัดการสร้างด้านบนเพื่อให้เหมาะกับความต้องการของคุณ)
  • ฉันยังเพิ่มenvคำสั่งในyarn buildขั้นตอนเพื่อให้ฉันสามารถรวมแฮช SHA ของคอมมิตที่สร้างบิลด์ภายในแอพของฉันได้ แต่นี่เป็นทางเลือก

นี่คือการกระทำ github ทั้งหมดของฉัน:

name: github pages

on:
    push:
        branches:
        - master

jobs:
    deploy:
        runs-on: ubuntu-18.04
        steps:
        - uses: actions/checkout@v2

        - name: Setup Node
            uses: actions/setup-node@v2-beta
            with:
            node-version: '12'

        - name: Get yarn cache
            id: yarn-cache
            run: echo "::set-output name=dir::$(yarn cache dir)"

        - name: Cache dependencies
            uses: actions/cache@v2
            with:
            path: ${{ steps.yarn-cache.outputs.dir }}
            key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
            restore-keys: |
                ${{ runner.os }}-yarn-
        - run: yarn install --frozen-lockfile
        - run: yarn build
            env:
            REACT_APP_GIT_SHA: ${{ github.SHA }}

        - name: Deploy
            uses: peaceiris/actions-gh-pages@v3
            with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./build

ทางเลือกในการแก้ปัญหา

เอกสารสำหรับ next.js นอกจากนี้ยังมีคำแนะนำสำหรับการตั้งค่ากับVercelซึ่งดูเหมือนจะเป็นบริการโฮสติ้งสำหรับ Node.js ปพลิเคชันที่คล้ายกับหน้า GitHub ฉันไม่ได้ลองสิ่งนี้และไม่สามารถพูดได้ว่ามันทำงานได้ดีเพียงใด


-28

เป็นขั้นตอนง่ายๆในการพุชแอปพลิเคชัน node js ของคุณจากโลคัลไปยัง GitHub

ขั้นตอน:

  1. ขั้นแรกให้สร้างที่เก็บใหม่บน GitHub
  2. เปิด Git CMD ที่ติดตั้งในระบบของคุณ (ติดตั้งGitHub Desktop )
  3. โคลนที่เก็บเข้ากับระบบของคุณด้วยคำสั่ง: git clone repo-url
  4. ตอนนี้คัดลอกไฟล์แอปพลิเคชันทั้งหมดของคุณไปยังไลบรารีที่โคลนนี้หากไม่มี
  5. เตรียมทุกอย่างให้พร้อมที่จะกระทำ: git add -A
  6. ยอมรับการเปลี่ยนแปลงที่ติดตามและเตรียมที่จะพุชไปยังที่เก็บระยะไกล: git commit -a -m "First Commit"
  7. พุชการเปลี่ยนแปลงในที่เก็บในเครื่องของคุณไปที่ GitHub: git push origin master

18
สิ่งที่คุณทำคือแสดงวิธีอัปโหลดไฟล์ไปยัง Github repo ผ่าน git ก่อนอื่นทำความเข้าใจคำถามก่อนที่จะออกคำตอบของคุณเพื่อให้คุณมีส่วนร่วมที่มีความหมายใน StackOverflow
Precious Tom

1
คุณเข้าใจคำถามผิดอย่างสิ้นเชิง
Christopher Thomas

ตอบผิดนี่ไม่ใช่สิ่งที่ถาม
Mr_Hmp
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.