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.
