Búsqueda de sitios web

javascript - ¿Cómo publicas un sitio web en TypeScript en GitHub Pages usando Visual Studio?

Así que hice un proyecto de Typescript con Visual Studio. Funciona bien cuando lo lanzo con Visual Studio, pero si intento subirlo a mi sitio de GitHub Pages, pondrá el index.html en una subcarpeta y obtengo un error 404 cuando intento cargar mi sitio web. Incluso si intento referenciar el index.html en la URL del sitio web, realmente no funciona.

Me preguntaba si es posible publicar solo los elementos necesarios. Creo que solo necesitaría la subcarpeta. Sin embargo, corrígeme si estoy equivocado.

Nota: Tengo la extensión de GitHub para Visual Studio instalada.

ACTUALIZACIÓN:

Dado que algunos de los enlaces parecen no funcionar más, creo que debería dar información adicional. Básicamente, necesitas tener una rama llamada gh-pages. En esa rama necesitas tener un archivo index.html en tu carpeta raíz. Luego, el archivo index.html debería ser visible en la URL de la página de GitHub.

Respuesta #1

Necesitas publicar una rama llamada gh-pages para poder verla como un sitio web.

Crea una nueva rama y luego mueve el archivo a la carpeta raíz de la rama, súbelo a gh-pages y estarás listo.

Mira esto:

https://github.com/nirgeier/JimVliet.github.io/tree/gh-pages

Así es como debe estar su archivo dentro de su carpeta raíz.

Respuesta #2

Quería que la rama main fuera la que se desplegara en GitHub Pages, cada vez que hago un push a main, así que hice una Acción para esto. La hice para proyectos de TypeScript puro (sin frameworks web).

Combiné la acción de contenido estático y como para npx tsc necesitaba node, la acción de NextJS, donde reemplacé el paso de compilación de NextJS con:

- name: Build with Typescript
        run: npx tsc

Ponlo en .github/workflows como main.yml

Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  push:
    branches:
      - main
      
Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            exit 0
          elif [ -f "${{ github.workspace }}/package.json" ]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Typescript
        run: npx tsc
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: '.'
  deploy:
    environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Artículos relacionados