Comment publier un site web réalisé avec Node.js sur Github Pages ?

Question

J'ai créé un site web en utilisant Node.js comme serveur. Comme je le sais, le fichier node.js doit commencer à fonctionner en tapant des commandes dans le terminal, et je ne suis pas sûr que Github Pages prenne en charge l'hébergement de node.js. Alors que dois-je faire ?

Answer 1

Les pages GitHub n'hébergent que des pages HTML statiques. Aucune technologie côté serveur n'est prise en charge, de sorte que les applications Node.js ne fonctionneront pas sur les pages GitHub. Il existe de nombreux fournisseurs d'hébergement, dont la liste figure sur le site Web de GitHub. Wiki de Node.js .

App fog semble être le plus économique car il fournit un hébergement gratuit pour les projets disposant de 2 Go de RAM (ce qui est plutôt bien, si vous voulez mon avis).
Comme indiqué ici AppFog a supprimé son plan gratuit pour les nouveaux utilisateurs.

Si vous souhaitez héberger des pages statiques sur GitHub, lisez la rubrique ce guide . Si vous prévoyez d'utiliser Jekyll entonces ce guide sera très utile.

Answer 2

Nous, les amateurs de Javascript, n'avons pas besoin d'utiliser Ruby (Jekyll ou Octopress) pour générer des pages statiques dans les pages Github, nous pouvons utiliser Node.js et Harpe par exemple :

Ce sont les étapes . Résumé :

1. Créer un nouveau référentiel

2. Cloner le référentiel

   git clone https://github.com/your-github-user-name/your-github-user-name.github.io.git

3. Initialiser une application Harp (localement) :

   harp init _harp

veillez à nommer le dossier avec un trait de soulignement au début ; lorsque vous déployez vers les pages GitHub, vous ne voulez pas que vos fichiers sources soient servis.

4. Compilez votre application Harp

   harp compile _harp ./

5. Déployer sur Gihub

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

Et Ce tutoriel est très intéressant. avec des détails sur des choses intéressantes comme les mises en page, les partiels, Jade et Less.

Answer 3

J'ai pu mettre en place actions github pour valider automatiquement les résultats d'une commande de construction de nœud ( yarn build dans mon cas, mais cela devrait fonctionner avec npm également) à l'adresse suivante gh-pages chaque fois qu'un nouveau commit est poussé vers master.

Bien que ce ne soit pas tout à fait idéal car j'aimerais éviter d'envoyer les fichiers construits, il semble que ce soit actuellement la seule façon de publier sur des pages github et cela devrait fonctionner pour toute application frontale Node.js (ou une application construite avec un framework frontal comme React ou Vue) qui peut être servie en tant que fichiers statiques.

J'ai basé mon travail sur este pour une bibliothèque react différente, et j'ai dû apporter les modifications suivantes pour qu'il fonctionne pour moi :

• mise à jour de l'étape "setup node" pour utiliser la version trouvée aquí puisque celui de l'échantillon sur lequel je me basais lançait des erreurs parce qu'il ne pouvait pas trouver l'action correcte.
• supprimer la ligne contenant yarn export parce que cette commande n'existe pas et qu'elle ne semble pas ajouter quoi que ce soit d'utile (vous pouvez aussi modifier la ligne de compilation au-dessus pour répondre à vos besoins).
• J'ai également ajouté un env à la directive yarn build afin d'inclure le hash SHA du commit qui a généré la compilation dans mon application, mais ceci est optionnel.

Voici mon action github complète :

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

Solution alternative

El docs pour next.js fournit également des instructions pour la mise en place avec Vercel qui semble être un service d'hébergement pour les applications node.js similaire aux pages github. Je n'ai pas essayé ce service et je ne peux donc pas dire s'il fonctionne bien.

Answer 4

Je voudrais ajouter qu'il IS tout à fait possible, puisque je le fais en ce moment même. Voici comment je m'y prends :

(Je vais supposer que vous avez un paquet et/ou un répertoire prêt à être publié).

Dans la racine de votre package.json , ajouter

"homepage": "https://{pages-endpoint}/{repo}",

Où le pages-endpoint est le blah.github.io que vous avez spécifié dans le Paramètres -> Pages de votre référentiel, et repo est le nom de votre référentiel.

Alors assurez-vous que vous npm install --global gh-pages --save-dev . Vous avez besoin de la --global pour s'assurer que le fichier bin est dans votre PATH et --save-dev doit l'ajouter comme dépendance dans votre package.json

Après ça, juste npm run build && gh-pages -d build . Le site -d spécifie votre répertoire de construction de sortie. Le standard est build mais le mien était public . Si c'est différent, changez-le.

Enfin, assurez-vous que dans le Paramètres -> Pages vous sélectionnez gh-pages comme branche à héberger et laisser le répertoire en tant que / (root) . Une fois qu'il est construit, votre site devrait être disponible sur votre point d'accès github.io.

Joyeux Dev-ing !

Answer 5

Ahm. Yep, comme le dit la plupart des réponses. Les pages Github ne traitent que le html et le css et un JS frontal.

Mais vous pouvez utiliser un framework JS comme Gatsby, le connecter à votre Graphql comme base de données. Ensuite, il vous donne un fichier statique généré. Ensuite, c'est tout, mettez à jour votre dépôt et utilisez le dossier statique comme racine de votre page.

Vous avez maintenant une page statique dynamique.

Je vais en faire puisque c'est une bonne idée à faire.