Jak opublikować stronę internetową utworzoną przez Node.js na Github Pages?

104

Zrobiłem stronę internetową, używając Node.js jako serwera. Jak wiem, plik node.js powinien zacząć działać, wpisując polecenia w terminalu, więc nie jestem pewien, czy Github Pages obsługuje hosting node.js. Więc co powinienem zrobić?

dyzdyz010
źródło
2
Spójrz również na github.com/assemble/assemble , jest to statyczny generator witryn oparty na grunt.js. Zasadniczo po prostu uruchom, grunt assemblea następnie git commit i wypchnij do gałęzi gh-pages i gotowe.
jonschlinkert
Heroku może ci pomóc heroku.com
Achraf

Odpowiedzi:

104

Strony GitHub obsługują tylko statyczne strony HTML. Żadna technologia po stronie serwera nie jest obsługiwana, więc aplikacje Node.js nie będą działać na stronach GitHub. Istnieje wiele dostawców hostingu, jak wymienione na wiki node.js .

Mgła aplikacji wydaje się być najbardziej ekonomiczna, ponieważ zapewnia darmowy hosting dla projektów z 2 GB pamięci RAM (co jest całkiem dobre, jeśli o mnie chodzi).
Jak wspomniano tutaj , AppFog usunął swój darmowy plan dla nowych użytkowników.

Jeśli chcesz hostować strony statyczne w serwisie GitHub, przeczytaj ten przewodnik . Jeśli planujesz używać Jekyll , ten przewodnik będzie bardzo pomocny.

Akshat Jiwan Sharma
źródło
1
A co z tym przykładem ?: idflood.github.io/ThreeNodes.js/public/index.html . Który jest na Node.js, jeśli spojrzysz na kod: github.com/idflood/ThreeNodes.js
Lilian A. Moraru
5
@ LilianA.Moraru To jest strona projektu. Dla stron projektu należy utworzyć specjalną gałąź o nazwie gh-pages. Spójrz na gałąź gh-pages repozytorium. Zawiera czyste pliki html. Więc wszystko, co widzisz na link faktycznie pochodzi z gałęzi gh-pages.
Akshat Jiwan Sharma
Nawiasem mówiąc, niezłe repozytorium.
Akshat Jiwan Sharma
@Akshat_Jiwan_Sharma Masz rację. To też wiedziałem, ale dzisiaj zobaczyłem tę stronę na githubie i pomyślałem, że faktycznie możesz używać Node.js. Nie zauważyłem, że to tylko repozytorium w organizacji. Gdyby to była sama organizacja, to byłaby w głównej gałęzi ...
Lilian A. Moraru
1
repl.it obsługuje teraz darmowy hosting aplikacji, chociaż nie jestem pewien, ile ma pamięci, ani nawet jak podłączyć go do repozytoriów Git. Może się jednak przydać w przypadku małych projektów.
Neil Chowdhury
32

My, miłośnicy Javascript, nie musimy używać Rubiego (Jekyll lub Octopress) do generowania statycznych stron na stronach Github, możemy użyć Node.js i Harp , na przykład:

Oto kroki . Abstrakcyjny:

  1. Utwórz nowe repozytorium
  2. Sklonuj repozytorium

    git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git
  3. Zainicjuj aplikację Harp (lokalnie):

    harp init _harp

pamiętaj, aby nazwać folder z podkreśleniem na początku; podczas wdrażania na GitHub Pages nie chcesz, aby pliki źródłowe były obsługiwane.

  1. Skompiluj swoją aplikację Harp

    harp compile _harp ./
  2. Wdróż do Gihub

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

A to jest fajny samouczek ze szczegółami o fajnych rzeczach, takich jak układy, częściowe, Jade i Less.

Johann Echavarria
źródło
3
Jestem miłośnikiem rubinów, ale trochę to oszukam. Połączenie stron harfa + google jest super !!!
Alter Lagos
3
Zachowaj ostrożność podczas instalowania harfy na już istniejącym projekcie!
Mehul Tandale
1

Udało mi się skonfigurować akcje github, aby automatycznie zatwierdzać wyniki polecenia budowania węzła ( yarn buildw moim przypadku, ale powinno to działać również z npm) do gh-pagesgałęzi, gdy nowe zatwierdzenie zostanie przesłane do mastera.

Chociaż nie jest to do końca idealne rozwiązanie, ponieważ chciałbym uniknąć wysyłania skompilowanych plików, wydaje się, że jest to obecnie jedyny sposób publikowania na stronach github.

Oparłem mój przepływ pracy na tym przewodniku dla innej biblioteki reagowania i musiałem wprowadzić następujące zmiany, aby działał dla mnie:

  • zaktualizował krok „węzeł konfiguracji”, aby używał wersji znalezionej tutaj, ponieważ wersja z próbki, na której ją opierałem, generowała błędy, ponieważ nie mogła znaleźć właściwej akcji.
  • usuń linię zawierającą, yarn exportponieważ to polecenie nie istnieje i wydaje się, że nie dodaje nic pomocnego (możesz również zmienić linię budowania powyżej, aby dopasować ją do swoich potrzeb)
  • Dodałem również envdyrektywę do yarn buildkroku, aby móc dołączyć skrót SHA zatwierdzenia, który wygenerował kompilację w mojej aplikacji, ale jest to opcjonalne

Oto moja pełna akcja na githubie:

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

Alternatywne rozwiązanie

W docs dla next.js zapewnia również instrukcje dotyczące konfigurowania z Vercel który wydaje się być gospodarzem usługi dla node.js aplikacje podobne do GitHub stron. Nie próbowałem tego jednak i nie mogę powiedzieć, jak dobrze to działa.

Kodeks moralny
źródło
-27

Przekazanie aplikacji node js z lokalnego do GitHub jest bardzo proste.

Kroki:

  1. Najpierw utwórz nowe repozytorium na GitHub
  2. Otwórz Git CMD zainstalowany w twoim systemie (zainstaluj GitHub Desktop )
  3. Sklonuj repozytorium do swojego systemu za pomocą polecenia: git clone repo-url
  4. Teraz skopiuj wszystkie pliki aplikacji do tej sklonowanej biblioteki, jeśli jej tam nie ma
  5. Przygotuj wszystko do popełnienia: git add -A
  6. Zatwierdź śledzone zmiany i przygotuj je do wysłania do zdalnego repozytorium: git commit -a -m "First Commit"
  7. Prześlij zmiany z lokalnego repozytorium do GitHub: git push origin master
Baran
źródło
16
Wszystko, co zrobiłeś, to pokazanie, jak przesyłać pliki do repozytorium Github przez git, najpierw zrozum pytania przed pozostawieniem odpowiedzi, aby wnieść znaczący wkład w StackOverflow
Precious Tom
1
Zupełnie źle zrozumiałeś pytanie
Christopher Thomas
Zła odpowiedź, nie o to pytano
Mr_Hmp