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:
```
JonJuarezz.github.io
```
Haz clic en Rename.

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

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

mirenbz commented 4 years ago

Hay algún problema con tu página que tenemos que resolver antes de convertirlo en tu portafolio personal.

He creado una nueva incidencia para eso: #6

JonJuarezz commented 4 years ago

Hecho

mirenbz commented 4 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...

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 **Comando + 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: closes #6

JonJuarezz commented 4 years ago

hecho

mirenbz commented 4 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...

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 Comando + Enter, y después haz clic en Push en el menú de los puntos suspensivos.

mirenbz commented 4 years ago

¿Cómo va esto, @JonJuarezz ?

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
[x] Renombrar el repositorio (paso 1)
[x] Añadir tu información personal (paso 3)
[x] 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.

JonJuarezz commented 3 years ago

Hecho

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:

JonJuarezz commented 3 years ago

hecho

mirenbz commented 3 years ago

@JonJuarezz , 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. He visto que ya lo has hecho, pero por si acaso, 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 @JonJuarezz , para añadir imágenes a los posts de tu portafolio personal, tienes que crear una carpeta en el directorio raíz de tu repositorio (es decir, en el mismo sitio donde está la carpeta _posts), por ejemplo img. Luego, desde tus posts, tienes que indicar la ruta a la imagen de la siguiente manera:

![texto descriptivo](/img/nombre-de-la-imagen.jpg)

Incluyendo la barra al inicio. Cuéntame si va bien.

JonJuarezz commented 3 years ago

sigue sin funcionar

El mar, 24 nov 2020 a las 17:57, Miren (notifications@github.com) escribió:

Kaixo @JonJuarezz https://github.com/JonJuarezz , para añadir imágenes a los posts de tu portafolio personal, tienes que crear una carpeta en el directorio raíz de tu repositorio (es decir, en el mismo sitio donde está la carpeta _posts), por ejemplo img. Luego, desde tus posts, tienes que indicar la ruta a la imagen de la siguiente manera:

Incluyendo la barra al inicio. Cuéntame si va bien.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JonJuarezz/JonJuarezz.github.io/issues/5#issuecomment-733108096, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARCWWQCEOCQN3E73F3JVHUTSRPQX7ANCNFSM4SWCJX6Q .

JonJuarezz commented 3 years ago

Lo he solucionado por mi cuenta

El mar, 24 nov 2020 a las 18:15, Jon Juarez Rodríguez (< jon.juarez@opendeusto.es>) escribió:

sigue sin funcionar

El mar, 24 nov 2020 a las 17:57, Miren (notifications@github.com) escribió:

Kaixo @JonJuarezz https://github.com/JonJuarezz , para añadir imágenes a los posts de tu portafolio personal, tienes que crear una carpeta en el directorio raíz de tu repositorio (es decir, en el mismo sitio donde está la carpeta _posts), por ejemplo img. Luego, desde tus posts, tienes que indicar la ruta a la imagen de la siguiente manera:

Incluyendo la barra al inicio. Cuéntame si va bien.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/JonJuarezz/JonJuarezz.github.io/issues/5#issuecomment-733108096, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARCWWQCEOCQN3E73F3JVHUTSRPQX7ANCNFSM4SWCJX6Q .

JonJuarezz / JonJuarezz.github.io