Publicar un sitio web en Github Pages

Aarón López Sosa
4 min readAug 1, 2018

--

GitHub Pages

GitHub es una plataforma de desarrollo colaborativo de software para alojar proyectos utilizando el sistema de control de versiones Git.

El código se almacena de forma pública, aunque también se puede hacer de forma privada, creando una cuenta de pago. GitHub aloja tu repositorio de código y te brinda herramientas muy útiles para el trabajo en equipo.

Una de esas herramientas es Github Pages, la cual permite alojar sitios web estáticos sin necesidad de tener conocimientos en servidores. GitHub pages permite dos modalidades de publicación:

La primera es “User site” (solo se podrá tener un sitio de este tipo por cuenta); en este caso el sitio web será publicado en username.github.io (siendo username el nombre de usuario de la cuenta).

La segunda opción esProject site(proyectos ilimitados) el cual será publicado en username.github.io/repository (siendo repository el nombre del repositorio).

En esta ocasión se utilizará la primera opción “User site”, antes de comenzar debes de tomar en consideración lo siguiente:

  • Tener una cuenta de GitHub creada. En caso de no tenerla la pueden crear aquí: https://github.com/join
  • Debes tener instalado git en tu equipo.
  • Tu proyecto debe contar con un archivo index.html

Instalación git en Windows: https://git-scm.com/downloads/guis

Instalación git en Linux: https://git-scm.com/download/linux

Instalación git en Mac: https://git-scm.com/download/mac

Crear repositorio

Lo primero que se debe realizar es ingresar a la página principal de GitHub e iniciar sesión. Una vez hayan ingresado se encontrarán en el dashboard.

Dashboard de GitHub

Lo siguiente será crear un nuevo repositorio, para ello daremos click sobre el ícono de + que se encuentra en la esquina superior derecha, se mostrará un menú con diversas opciones, se seleccionará New repository. A continuación se mostrará la página para crear un nuevo repositorio en la cual se ingresará el nombre del repositorio y opcionalmente una descripción del proyecto.

Opción New repository

Es importante mencionar que el nombre de este repositorio debe ser de la siguiente manera: username.github.io; donde username es el nombre de usuario de la cuenta. En este ejemplo el nombre de usuario es demoTaller, por lo tanto ingresaré como nombre de repositorio demotaller.github.io

Creación del nuevo repositorio

Una vez creado el repositorio se debe copiar la url que GitHub proporciona, ahí se subirán los archivos del sitio web al repositorio.

Configuración inicial del repositorio

Subir archivos al repositorio

El siguiente pasó será subir los archivos del sitio web al repositorio en GitHub. Para efecto de este ejemplo, cree una carpeta llamada demoGithubPages que se encuentra en la siguiente ubicación: Documentos/talleres/demoGithubPages.

Deberán de abrir la terminal e ingresar hasta el directorio donde ustedes tengan los archivos que desean subir. En mi caso será de la siguiente manera:

$ cd Documentos/talleres/demoGithubPages/

Una vez dentro del directorio realizaremos los siguientes pasos:

  1. Crear un nuevo repositorio de git dentro del directorio
  2. Añadir archivos para subir
  3. Realizar el primer commit
  4. Agregar un repositorio remoto (se usará la url que GitHub proporcionó al crear el repositorio en la plataforma)
  5. Subir los archivos al repositorio en GitHub

$ git init
$ git add .
$ git commit -m “first commit”
$ git remote add origin https://github.com/demoTaller/demoTaller.git
$ git push -u origin master

Configurar repositorio para ser publicado

Terminado el paso anterior se puede observar en la página del repositorio los archivos que subimos desde el directorio local.

El último paso es configurar el repositorio para ser publicado desde la url username.github.io, para ello se seleccionará la opción Settings que se encuentra en el menú del repositorio.

Repositorio con los archivos cargados

Esta opción mostrará la página de configuración (settings) del repositorio en la cual se buscará la opción GitHub Pages, que se encuentra ubicada al final de la página, en ese apartado se podrá observar diversas configuraciones que se pueden aplicar en la publicación, las cuales son las siguientes:

  • Source: Esta opción es para elegir de cual branch se tomarán los archivos para publicarse. Los “User site” deben por requerimiento usar el branch master.
  • Theme Chooser: Permite seleccionar un tema para publicar utilizando la herramienta Jekyll.
  • Custom domain: Si se contara con un nombre de dominio personalizado, GiHub permite agregarlo de manera fácil, solo con seguir unos cuantos pasos (en el siguiente tutorial les mostraré como agregar uno).
  • Enforce HTTPS: Permite el uso de HTTPS en nuestro sitio.
Configuración del repositorio

Solo debemos de seleccionar el branch master en la opción source, esperaremos unos minutos en lo que GitHub publica nuestro sitio y listo tendremos un sitio web publicado gratis.

Sitio publicado con GitHub Pages

Conclusión

Como se ha podido observar publicar un sitio web utilizando GiHub Pages es muy sencillo. Podremos tener de manera fácil un sitio web para mejorar nuestra marca personal.

--

--

Aarón López Sosa

Web & mobile developer using react/react native and node js