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?


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.


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.


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.


-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

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.