Como publicar um site feito por Node.js no Github Pages?

103

Fiz um site usando Node.js como servidor. Como eu sei, o arquivo node.js deve começar a funcionar digitando comandos no terminal, então não tenho certeza se o Github Pages oferece suporte a node.js-hosting. Então, o que eu deveria fazer?

dyzdyz010
fonte
2
Dê uma olhada em github.com/assemble/assemble também, é um gerador de site estático baseado em grunt.js. Basicamente, você apenas executa grunt assemblegit commit e empurra para o branch gh-pages e você está pronto para começar.
jonschlinkert
Heroku pode ajudá-lo heroku.com
Achraf

Respostas:

102

As páginas do GitHub hospedam apenas páginas HTML estáticas. Nenhuma tecnologia do lado do servidor é suportada, então os aplicativos Node.js não serão executados nas páginas do GitHub. Há lotes de provedores de hospedagem, como listadas no wiki Node.js .

O nevoeiro de aplicativos parece ser o mais econômico, pois oferece hospedagem gratuita para projetos com 2 GB de RAM (o que é muito bom se você me perguntar).
Conforme declarado aqui , o AppFog removeu seu plano gratuito para novos usuários.

Se você deseja hospedar páginas estáticas no GitHub, leia este guia . Se você planeja usar o Jekyll , este guia será muito útil.

Akshat Jiwan Sharma
fonte
1
E quanto a este exemplo então ?: idflood.github.io/ThreeNodes.js/public/index.html . Que está no Node.js se você der uma olhada no código: github.com/idflood/ThreeNodes.js
Lilian A. Moraru
4
@ LilianA.Moraru Esta é uma página de projeto. Para páginas de projeto, um branch especial deve ser criado chamado gh-pages. Dê uma olhada no branch gh-pages do repositório. Ele contém arquivos html puros. Portanto, tudo o que você vê no o link é, na verdade, do branch gh-pages.
Akshat Jiwan Sharma,
A propósito, ótimo repo.
Akshat Jiwan Sharma,
@Akshat_Jiwan_Sharma Você está certo. Também era isso que eu estava sabendo, mas hoje vi este site no github e pensei que você realmente pode usar o Node.js. Não observei que era apenas um repositório na organização. Se fosse a própria organização, então estaria no ramo mestre ...
Lilian A. Moraru
1
repl.it agora oferece suporte para hospedagem de aplicativos grátis, embora eu não tenha certeza de quanta memória ele possui, ou mesmo como conectá-lo a repositórios Git. Pode ser útil para pequenos projetos, no entanto.
Neil Chowdhury
32

Nós, amantes do Javascript, não precisamos usar Ruby (Jekyll ou Octopress) para gerar páginas estáticas nas páginas do Github, podemos usar Node.js e Harp , por exemplo:

Estas são as etapas . Resumo:

  1. Criar um Novo Repositório
  2. Clone o Repositório

    git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git
  3. Inicialize um aplicativo Harp (localmente):

    harp init _harp

certifique-se de nomear a pasta com um sublinhado no início; ao implantar nas páginas do GitHub, você não deseja que seus arquivos de origem sejam disponibilizados.

  1. Compile seu aplicativo Harp

    harp compile _harp ./
  2. Implantar no Gihub

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

E este é um tutorial legal com detalhes sobre coisas legais como layouts, parciais, Jade e Less.

Johann Echavarria
fonte
3
Sou um amante do rubi, mas vou enganar um pouco. A combinação de harpa + páginas do google é incrível !!!
Alter Lagos
3
Tenha cuidado ao instalar a harpa em um projeto já existente!
Mehul Tandale 01 de
1

Consegui configurar as ações do github para enviar automaticamente os resultados de um comando de construção de nó ( yarn buildno meu caso, mas também deve funcionar com o npm) para o gh-pagesbranch sempre que um novo commit é enviado ao master.

Embora não seja totalmente ideal, já que gostaria de evitar comprometer os arquivos construídos, parece que atualmente é a única maneira de publicar nas páginas do github.

Baseei meu fluxo de trabalho neste guia para uma biblioteca de reação diferente e tive que fazer as seguintes alterações para que funcionasse para mim:

  • atualizei a etapa do "nó de configuração" para usar a versão encontrada aqui, já que aquela da amostra da qual eu estava baseando estava lançando erros porque não conseguiu encontrar a ação correta.
  • remova a linha que contém yarn exportporque esse comando não existe e não parece adicionar nada útil (você também pode querer alterar a linha de compilação acima para atender às suas necessidades)
  • Também adicionei uma envdiretiva à yarn buildetapa para poder incluir o hash SHA do commit que gerou a compilação dentro do meu aplicativo, mas isso é opcional

Aqui está minha ação completa no 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

Solução alternativa

Os documentos para next.js também fornecem instruções para configurar o Vercel, que parece ser um serviço de hospedagem para aplicativos node.js semelhantes às páginas do github. Eu não tentei isso, porém, por isso não posso falar sobre como funciona bem.

Código moral
fonte
-26

São etapas muito simples para enviar seu aplicativo node js do local para o GitHub.

Passos:

  1. Primeiro crie um novo repositório no GitHub
  2. Abra o Git CMD instalado em seu sistema (instale o GitHub Desktop )
  3. Clone o repositório em seu sistema com o comando: git clone repo-url
  4. Agora copie todos os arquivos do seu aplicativo para esta biblioteca clonada se ela não estiver lá
  5. Prepare tudo para se comprometer: git add -A
  6. Confirma as alterações rastreadas e as prepara para serem enviadas a um repositório remoto: git commit -a -m "First Commit"
  7. Envie as alterações em seu repositório local para GitHub: git push origin master
RAM
fonte
14
Tudo o que você fez foi mostrar como fazer upload de arquivos para o repositório Github via git, primeiro entenda as perguntas antes de deixar suas respostas, para fazer contribuições significativas no StackOverflow
Precioso Tom
1
Você entendeu mal a pergunta
Christopher Thomas
Resposta errada, não é isso que é perguntado
Mr_Hmp