Convertir este repositorio en tu portafolio personal

mirenbz commented 4 years ago

¡Buen trabajo finalizando el tutorial! Te servirá como base para crear el portafolio personal en el que irás añadiendo tus anotaciones personales de las lecturas de cada unidad.

Si tienes cualquier problema al llevar a cabo estos pasos, envíame un email o mencióname (escribiendo @mberasategi) en cualquier incidencia o solicitud de extracción de tu repositorio explicando el problema.

Paso 1. Renombrar el repositorio

Vamos a configurar tu repositorio del tutorial sobre Github Pages (este repositorio) para que funcione como tu página personal en GitHub y sirva como portafolio del trabajo individual que haces en la asignatura Proyectos para la web. Para esto, lo primero es renombrar el repositorio.

Accede a la pestaña Settings
En la sección "Repository name", cambia el nombre a:
```
manexagirre.github.io
```
Haz clic en Rename.

Una vez lo hayas hecho, puedes acceder a tu portafolio desde http://manexagirre.github.io

Deja un comentario cuando lo hayas hecho para que pueda revisarlo :arrow_down:

mirenbz commented 3 years ago

Kaixo,

Te dejo un recordatorio de tus tareas pendientes con respecto a este repositorio:

[x] Realizar la entrega en ALUD
[ ] Renombrar el repositorio (paso 1)
[ ] Añadir tu información personal (paso 3)
[ ] Eliminar el título repetido de la portada (paso 4)
[ ] Incluir tus anotaciones personales de cada reunión de expertos en forma de post

Recuerda no dejarlo todo para el final y pedir ayuda si la necesitas, ya sea por email o a través de una tutoría.

manexagirre commented 3 years ago

kaixo miren, ya he renombrado el repositorio.

manexagirre commented 3 years ago

he quitado el titulo repetido y he añadido información personal

mirenbz commented 3 years ago

Te dejo todos los pasos por si acaso ⬇️

mirenbz commented 3 years ago

Paso 2. Configura VisualStudio Code para trabajar con la nueva ubicación de tu repositorio

Al cambiar el nombre del repositorio, ha cambiado también la URL en la que es accesible, por lo que la información que tienes configurada en VisualStudio Code para este repositorio no funcionará.

Si ya tienes los archivos descargados y localizados en tu ordenador... (NO hacerlo así, mejor borrar la carpeta y seguir los pasos del siguiente desplegable)

1. Abre la carpeta que contiene los archivos de tu tutorial `github-pages` en VisualStudio Code a través de **File > Open Folder...** 2. En la vista de **Source Control**, haz clic en los puntos suspensivos y selecciona **Remote > Remove Remote** y haz clic en "origin" 3. Después haz clic en los puntos suspensivos, **Remote > Add Remote...**, teclea la nueva ubicación de tu repositorio: https://github.com/TUNOMBREDEUSUARIO/TUNOMBREDEUSUARIO.github.io.git y presiona Enter 4. Cuando te pida un nombre para el nuevo remoto, teclea `origin` y presiona Enter

Si no tienes los archivos descargados o no están localizables en tu ordenador...

1. En VisualStudio Code, haz clic en Ctrl + Mayús + P o ⌘ + Mayús + P y teclea o selecciona "Git:Clone" 2. Teclea la URL actual de tu repositorio: https://github.com/TUNOMBREDEUSUARIO/TUNOMBREDEUSUARIO.github.io.git y presiona Enter 3. Escoge la ubicación para tus archivos, y selecciona **Open** en el siguiente cuadro de diálogo.

Una vez hayas seguido estos pasos, VisualStudio Code estará configurado para intercambiar cambios con la nueva ubicación de tu repositorio.

Cuéntame cuando lo tengas hecho :arrow_down:

mirenbz commented 3 years ago

Paso 3. Personaliza la información personal en `_config.yml`

Durante el tutorial se ha generado un archivo de configuración que contiene el título del sitio web y el tema (aspecto) que utiliza, además de algunos datos personales. Seguramente lo has rellenado con contenido de prueba, pero es hora de introducir la información adecuada en esa página de configuración.

Abre la carpeta que contiene los archivos de tu tutorial github-pages en VisualStudio Code a través de File > Open Folder...
Ahora que ya has terminado el tutorial, vas a trabajar directamente sobre la rama master en tu repositorio personal. Asegúrate de que figura master en la parte izquierda de la franja inferior azul. Si no es así, haz clic sobre el nombre de rama que aparezca y selecciona master

Edita el archivo _config.yml y establece la información correcta sustituyendo con tu nombre y apellido, tu dirección de correo OpenDeusto, y tu usuario de GitHub:

title: Portafolio de NOMBRE APELLIDO
author: NOMBRE APELLIDO
email: TUUSUARIO@opendeusto.es
description: > # this means to ignore newlines until "baseurl:"
  Escribe una descripción estupenda para tu nuevo sitio aquí. 
# social links
twitter_username: TU-USUARIO-TWITTER # NO incluyas el carácter @ ¡o la compilación fallará!
github_username: TU-USUARIO-GITHUB # NO incluyas el carácter @ ¡o la compilación fallará!    

show_excerpts: true 
theme: minima

Si no tienes un usuario de Twitter o no quieres compartirlo, añade una almohadilla # seguida de un espacio justo antes de twitter-username, de modo que la línea correspondiente quede así:
```
# twitter_username: TU-USUARIO-TWITTER
```
Esto quiere decir que los parámetros establecidos en esa línea no deben aplicarse. A esto se le llama "comentar" una línea de código, o marcarla como un comentario (en vez de como código ejecutable.)
Cuando hayas terminado de actualizar tu información personal, accede al panel Source Control, presiona el botón + que tienes al lado del archivo recién modificado, escribe un mensaje de confirmación y presiona Ctrl + Enter o ⌘ + Enter, y después haz clic en Push en el menú de los puntos suspensivos.

¿Hecho? :arrow_down:

mirenbz commented 3 years ago

Paso 4. Eliminar el título repetido de la portada

Como habrás visto, el título que has añadido al archivo index.md aparece duplicado en la portada de tu sitio web. Como el sitio ya tiene su propio título (establecido en el archivo _config.yml), lo más sencillo es que elimines ese título.

Abre tu repositorio personal en VS Code. Si no es el que se abre cuando ejecutas la aplicación, seguramente está disponible mediante File > Open Recent...
Ahora que ya has terminado el tutorial, vas a trabajar directamente sobre la rama master en tu repositorio personal. Asegúrate de que figura master en la parte izquierda de la franja inferior azul. Si no es así, haz clic sobre el nombre de rama que aparezca y selecciona master
Edita el archivo index.md y elimina la primera línea, que debería empezar con una almohadilla # (Markdown para título de primer nivel)
El texto que quede en ese archivo (déjalo sin titulares) aparecerá en la parte superior de la portada; puedes usarlo para dar la bienvenida a tus visitantes, contar quién eres, o si lo prefieres, eliminarlo para dejar esa sección de la página vacía. En este caso tu portada solo mostrará los últimos posts. Cuando termines de editar el archivo, guárdalo.
Desde la pestaña Source Control, haz clic en +, escribe un mensaje de confirmación y presiona Ctrl + Enter o ⌘ + Enter. Después haz clic en Push en el menú de los puntos suspensivos para enviar tus cambios a GitHub.

Dime cuándo terminas este paso. Ya va quedando menos para tener listo tu portafolio personal :arrow_down:

mirenbz commented 3 years ago

@manexagirre , a partir de ahora puedes ir creando un post por cada uno de los bloques temáticos que hemos ido viendo (Introducción a la UX, Objetivos y enfoque del proyecto, investigación de usuarios, etc) con tus anotaciones personales. El procedimiento es el mismo que has usado para generar el primer post:

Crear un archivo nuevo en _posts con el nombre AAAA-MM-DD-titulo-del-post.md con VSCode

Incluir el encabezado YAML al comienzo del archivo:

---
title: "Título de tu post, con tildes, espacios y lo que haga falta"
date: 2020-10-26
---

A partir de aquí, el contenido del post.

Añadir el archivo nuevo desde "Source Control", confirmar los cambios, y Push

No dudes en mencionarme si tienes problemas.

mirenbz commented 3 years ago

Kaixo @manexagirre , tus posts parecen estar ahí pero es posible que los nombres de archivo estén dando problemas y no se esté generando el sitio web. Si te fijas ⏫ en el punto 1, el nombre de archivo no debería tener ni espacios, ni tildes, y a poder ser mejor si es todo minúsculas. Por ejemplo:

2020-10-24 Primera Reunión.md debería ser 2020-10-24-primera-reunion.md

Puedes renombrar los archivos desde VSCode haciendo clic sobre ellos y seleccionando Rename, y una vez los tengas todos renombrados, + desde "Source control" y Push.

irudia

manexagirre / manexagirre.github.io