search

zapicharlot / zapicharlot.github.io

https://lab.github.com/DeustoPWEB/github-pages
MIT License
0 stars 0 forks source link

Convertir este repositorio en tu portafolio personal #5

Open mirenbz opened 3 years ago

mirenbz commented 3 years ago

Convertir este repositorio en tu portafolio personal

¡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.

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

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

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

zapicharlot commented 3 years ago

no me deja por que me dice que ya existe mi repositorio

mirenbz commented 3 years ago

Hola @zapicharlot , has cambiado el nombre al repositorio del tutorial de la semana 4: https://github.com/zapicharlot/zapicharlot.github.io

Vuelve a cambiar el nombre a ese repositorio, a "intro-html", por ejemplo, y luego vuelve a intentar cambiar el nombre de este a zapicharlot.github.io

mirenbz commented 3 years ago

Aquí @zapicharlot 😉

zapicharlot commented 3 years ago

yasta Miren!

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... 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:

mirenbz commented 3 years ago

Kaixo,

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

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.

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.

  1. Abre la carpeta que contiene los archivos de tu tutorial github-pages en VisualStudio Code a través de File > Open Folder...
  2. 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

  3. 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
  4. 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.)

  5. 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:

zapicharlot commented 3 years ago

Listo Miren

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.

  1. 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...
  2. 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
  3. 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)
  4. 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.
  5. 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:

zapicharlot commented 3 years ago

Miren listo!!

mirenbz commented 3 years ago

@zapicharlot , 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:

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

  2. 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.
  3. Añadir el archivo nuevo desde "Source Control", confirmar los cambios, y Push

No dudes en mencionarme si tienes problemas.

zapicharlot commented 3 years ago

Miren, te he mandado un correo. No se me ven las imagenes en gitub y no entiendo porque. Muchas gracias