Deploy de mi webSite con GitHub Pages

En nuestro post anterior vimos como podíamos crear un webSite con Hugo, ahora veremos como hacer deploy de este sitio con GitHub Pages.

Te mostraré paso por paso como debes hacerlo.

1.- Compilación de Hugo con un action de GitHub Pages

Usaremos esto para que cada vez que insertemos modificaciones o nuevo código a nuestro repositorio del proyecto, GitHub Actions construirá el sitio automáticamente.

Creamos una carpeta llamada .github en el directorio raíz de nuestro proyecto, dentro de esta carpeta creamos otra que se llame workflows, por último dentro de esta carpeta creamos un archivo llamado gh-pages.yml, pega el siguiente código en este archivo:

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          # extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

En mi caso modificaré las líneas que dicen ‘main’ por ‘master’ porque es mi branch default en GitHub

Guarda los cambios y súbelos a tu repositorio de GitHub.

Puedes observar en el repositorio del proyecto como ahora tenemos dos branches.

Un branch llamado gh-pages, cada vez que hagamos un commit en el branch master, se construirá automáticamente el proyecto de nuevo, actualizando esta rama que será la que utilizaremos para crear nuestra página.

Si nos vamos a la pestaña Actions podemos observar el estado de la nuestra.

2.- Activando GitHub Pages

Nos dirigimos a la pestaña de Settings.

Seleccionamos Pages y guardamos ese link, ese será nuestra ruta personal de este proyecto en particular.

Lo pegamos en nuestro archivo config.toml en la línea que vemos a continuación.

Guardamos los cambios. Volvemos a la pestaña de Settings en GitHub, luego vamos Pages de nuevo y cambiamos estas dos opciones para que queden como a continuación y presionamos en save.

3.- Deploy

Volvemos a nuestro proyecto y abrimos la terminal.

Subimos los cambios a GitHub al branch master y automáticamente se construirá nuestro proyecto.

Podemos ver el estado de nuestro deploy en la pestaña Actions tardarán unos segundos en estar listas.

Cuando estén en verde vamos al link que guardamos anteriormente, que habíamos dicho que era nuestro link personal. En mi caso es este http://ulisesornelasr.github.io/my_webSite/, ya lo puedo pegar en una pestaña de mi navegador.

Listo, ya tenemos nuestro webSite desplegado en una página de GitHub Pages! 🚀

Deseando que te encuentres bien, te saluda Ulises🤵… Sigueme en mis redes GitHub Linkedin Twitter