Cómo hacer nuestra propia web de Github Pages

Buenos días | tardes | noches, en esta entrada os traigo un pequeño tutorial de cómo crear vuestra propia Github Pages gracias a Github.

En esta entrada aprenderemos a crear una Github Pages de forma manual y automática así cómo una pequeña introducción a edición de sus páginas.

Creación de repositorios en Github

Los pasos a seguir para crear nuestro sitio y clonarlo en local son los siguientes:

1. Nos vamos a github y creamos nuestro sitio en un repositorio.

2. El repositorio debe de tener el nombre de la siguiente forma:

<nombre>.github.io

3. Clonamos el repositorio en local:

git clone https://github.com/usuario/usuario.github.io

Creación y modificación de Jekyll

Para configurar nuestro sitio de jekyll, seguiremos los siguientes pasos:

1. Siendo un usuario sin privilegios (no siendo root), nos vamos a nuestro repositorio clonado y creamos el archivo Gemfile

touch Gemfile

2. Modificamos el fichero Gemfile y escribimos las siguientes lineas:

source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins

3. Ejecutamos el siguiente comando para proceder a instalar Jekyll:

bundle install

4. Generamos los archivos de jekyll por defecto:

bundle exec jekyll new . --force

5. Editamos el fichero Gemfile y borramos la siguiente linea:

"jekyll", "3.2.1"

6. Y descomentamos la siguiente:

gem "github-pages", group :jekyll_plugins

7. Añadimos los ficheros descargados a git:

git add .

8. Comentamos los cambios realizados en el repositorio y los subimos con:

git push

Si queremos implementar una plantilla vistosa:

1. Iremos a la web de las plantillas de Jekyll
2. Descargamos la plantilla que más nos guste.
3. La extraemos en el repositorio clonado.
4. Añadimos los ficheros, comentamos y subimos para que esté visible en nuestro github pages.

Creación de plantillas automáticas en Github Pages

Una vez hemos creado el repositorio:

1. Dentro del repositorio, nos vamos a Settings
2. En la misma pestaña de Options, desplazamos hacía abajo la página web y pulsamos sobre Launch automatic page generator
3. Esto nos llevará a otra página dónde podremos configurar las opciones más básicas de nuestro Github Pages.

4. Modificamos las opciones de dicha página y le damos a Continue to layouts
5. Ahora elegiremos una plantilla, la que queramos y finalizaremos la modificación básica de nuestro Github pages.
6. Clonamos dicho repositorio en local y procedemos a configurar los ficheros.

Configuración de los ficheros con extensión markdown

Con estos pasos, será fácil conseguir que nuestra Github pages funcione:

1. Una vez tengamos clonado el repositorio con los archivos necesarios, dentro del repositorio creamos un directorio llamado _layouts
2. Movemos el fichero index.html dentro de dicho directorio:

mv index.html _layouts/

3. Creamos una réplica de dicho fichero dentro del directorio:

mv index.html old.index.html

4. Editamos el fichero index.html añadiendo las variables y eliminando el texto plano de tal forma que quede así:

 <!DOCTYPE html>
 <html lang="en-us">
 <head>
 <meta charset="UTF-8">
 <title>{{page.tittle}}</title>
 <link rel="stylesheet" href="stylesheets/styles.css">
 <link rel="stylesheet" href="stylesheets/github-light.css">
 <meta name="viewport" content="width=device-width">
 <!--[if lt IE 9]>
 //html5shiv.googlecode.com/svn/trunk/html5.js
 <![endif]-->
 </head>
 <body>
 <div class="wrapper">
   <header>
 <h1>{{page.title}}</h1>
 <p>Creada Github pages por aitor28ld</p>
   </header>
   <section>
 <h3>
 	{{content}}
 	</h3>
   </section>
 http://javascripts/scale.fix.js
 </body>
 </html>

5. Guardamos y procedemos a crear en el directorio principal del repositorio los ficheros index.md y about.md

6. Creamos los ficheros anteriormente citados:

touch index.md about.md

7. Editamos el fichero index.md y about.md para que, cómo mínimo, contenga lo siguiente:

layout: index
 title: Aitor León
tagline: aitor28ld.github.io

8. Ahora sólo nos quedaría introducir el contenido de Github pages dentro de los ficheros.
9. Podemos ver el resultado en la web

Modificando el código HTML de nuestra Github pages

Si queremos modificar los datos de la página principal, clonamos el repositorio en nuestra máquina local

git clone git@github.com:<usuario>/<usuario>.github.io.git

En el directorio raiz del repositorio, creamos un directorio llamado _layouts y dentro de dicho directorio, un fichero llamado default.html.

Nos vamos a la siguiente URL, cambiando THEME_NAME por el nombre de nuestro tema.

https://github.com/pages-themes/<THEME_NAME\>/blob/master/_layouts/default.html

Vemos el fichero en crudo pulsando sobre el botón raw y copiamos todo el contenido al fichero que creamos.

Ahora podemos editar todo su contenido y dejarlo a nuestro gusto.

Una vez hayamos modificado todo lo que quisimos, añadimos los ficheros con:

git add .

Realizamos un comentario diciendo qué hemos añadido/modificado

git commit -am "<Lo que queramos comentar>"

Y subimos los cambios realizados a nuestro repositorio en Github

git push

Con ello ya tendriamos nuestra Github Pages a nuestro gusto.

 

Eso fue todo. Nos leemos en la próxima entrada, espero que os haya gustado y probad a editar todos los ficheros que queráis!

Un saludo.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.