GitHub Pages · Semana 1

Objetivos

Inicializarme con el uso de GitHub Pages y la plataforma Robotics Academy.

Durante el inicio de las prácticas, el primer paso que realicé fue seguir la guía de usuario de Robotics Academy, disponible en: https://jderobot.github.io/RoboticsAcademy/user_guide/ .

Tras revisar la documentación, estuve aprendiendo y experimentando con GitHub Pages, comprendiendo su funcionamiento y mejorando el aspecto del primer intento.

Pasos realizados

Se clonó el repositorio y se creó la carpeta docs con las subcarpetas posts e images, junto a los archivos index.html y style.css. Dentro de la carpeta posts, cree una subcarpeta semana_1, que incluye los archivos semana_1.html, github_pages.html y follow_line.html. Estos archivos defienen la estructura de cada una de las tareas realizadas la semana 1.

El archivo index.html define la estructura del blog y style.css el diseño visual.

Código index.html

<!DOCTYPE html>
            <html lang="es">
            <head>
            <meta charset="UTF-8">
            <title>Blog de Prácticas</title>
            <link rel="stylesheet" href="style.css">
            </head>

<div class="logo">
                <img src="images/logo.png" alt="Logo">
            </div>

<aside class="sidebar">
                <img class="profile-pic" src="images/profile.jpeg" alt="Foto de perfil">

<h2>Jesús Pérez</h2>
                <p class="role">Estudiante en prácticas</p>

<p class="description">
                    Blog de seguimiento semanal de mis prácticas en JdeRobot.
                </p>
                </aside>

<main class="content">
                <h1>Entradas</h1>

<a class="post-card" href="posts/semana_1.html">
                    <h3>Semana 1 · Inicio de las prácticas</h3>

<p class="post-excerpt">
                    Configuración del entorno de trabajo, revisión de la guía oficial
                    de Robotics Academy y primeras pruebas con GitHub Pages.
                    </p>

</div>

<script>
                const elements = document.querySelectorAll('.auto-date');
                const Today = new Date();

const formatted = Today.toLocaleDateString('es-ES', {
                day: '2-digit',
                month: 'long',
                year: 'numeric'
                });

elements.forEach(el => el.textContent = formatted);
            </script>

</body>
            </html>

Código style.css

/* Reset */
            * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            }

/* Base */
            body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, Ubuntu, Cantarell, sans-serif;
            background: linear-gradient(180deg, #020617, #0f172a);
            color: #e5e7eb;
            line-height: 1.7;
            }

a {
            color: #67e8f9;
            text-decoration: none;
            }

a:hover {
            text-decoration: underline;
            }

/* Logo */
            .logo {
            position: fixed;
            top: 20px;
            right: 20px;
            }

.logo img {
            height: 40px;
            }

/* Logo dentro de los posts */
            .post-logo {
            max-width: 220px;
            height: auto;
            margin: 30px auto;
            display: block;
            }

/* Layout principal */
            body.home .layout {
            display: grid;
            grid-template-columns: 260px 1fr;
            max-width: 1200px;
            margin: 0 auto;
            padding: 80px 20px;
            gap: 40px;
            }

/* Sidebar */
            .sidebar {
            background-color: #020617;
            padding: 30px 20px;
            border-radius: 12px;
            text-align: center;
            }

.profile-pic {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            }

.sidebar h2 {
            margin-bottom: 5px;
            }

.role {
            color: #9ca3af;
            font-size: 0.9rem;
            margin-bottom: 15px;
            }

.description {
            font-size: 0.9rem;
            color: #d1d5db;
            }

/* Tarjetas principales */
            .content h1 {
            margin-bottom: 25px;
            }

.post-card {
            display: block;
            background-color: #020617;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            transition: transform 0.2s, background-color 0.2s;
            }

.post-card:hover {
            transform: translateY(-4px);
            background-color: #020617cc;
            }

.post-card h3 {
            margin-bottom: 10px;
            }

.post-excerpt {
            color: #d1d5db;
            margin-bottom: 10px;
            }

.post-date {
            font-size: 0.8rem;
            color: #9ca3af;
            }

/* Pagina posts */
            body.post header,
            body.post main {
            max-width: 900px;
            margin: 0 auto;
            padding: 60px 20px;
            }

body.post header {
            padding-bottom: 20px;
            }

body.post header h1 {
            font-size: 2.6rem;
            margin-bottom: 10px;
            }

body.post header p {
            color: #9ca3af;
            }

body.post article {
            background-color: #020617;
            padding: 40px;
            border-radius: 12px;
            }

body.post h2 {
            margin-top: 40px;
            margin-bottom: 15px;
            }

body.post p {
            margin-bottom: 16px;
            color: #d1d5db;
            }

/* Tarjetas internas */
            .content-card {
            background-color: #020617;
            border-radius: 12px;
            padding: 30px;
            margin-bottom: 30px;
            border: 1px solid #1f2933;
            }

.content-card h2:first-child,
            .content-card h3:first-child {
            margin-top: 0;
            }

/* Codigo */
            textarea {
            width: 100%;
            min-height: 400px;
            background-color: #020617;
            color: #a5f3fc;
            border: 1px solid #1f2933;
            border-radius: 8px;
            padding: 16px;
            font-family: "Fira Code", monospace;
            font-size: 0.9rem;
            resize: vertical;
            }

pre {
            background-color: #020617;
            border: 1px solid #1f2933;
            padding: 16px;
            border-radius: 6px;
            overflow-x: auto;
            margin-bottom: 20px;
            }

code {
            color: #a5f3fc;
            font-family: "Fira Code", monospace;
            font-size: 0.9rem;
            }

/* Imagenes en post */
            body.post img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto;
            border-radius: 8px;
            }

/* Volver */
            .back {
            display: inline-block;
            margin-top: 30px;
            color: #93c5fd;
            }

Código semana_1.html

<!DOCTYPE html>
            <html lang="es">
            <head>
            <meta charset="UTF-8">
            <title>Semana 1 · Inicio de las prácticas</title>
            <link rel="stylesheet" href="../../style.css">
            </head>

<div class="logo">
                <img src="../../images/logo.png" alt="Logo">
            </div>

<aside class="sidebar">
                <img class="profile-pic" src="../../images/profile.jpeg" alt="Foto de perfil">

<h2>Jesús Pérez</h2>
                <p class="role">Estudiante en prácticas</p>

<p class="description">
                    Blog de seguimiento semanal de mis prácticas en JdeRobot.
                </p>
                </aside>

<main class="content">
                <h1>Semana 1 · Inicio de las prácticas</h1>

<a class="post-card" href="github_pages.html">
                    <h3>Inicialización con GitHub Pages</h3>
                    <p class="post-excerpt">
                    Pruebas con GitHub Pages y configuración del blog.
                    </p>
                    <span class="post-date">
                    <span class="auto-date"></span>
                    </span>
                </a>

<a class="post-card" href="follow_line.html">
                    <h3>Realización del ejercicio Follow Line</h3>
                    <p class="post-excerpt">
                    Realización del ejercicio follow_line y toma de contacto con
                    la plataforma Robotics Academy.
                    </p>
                    <span class="post-date">
                    <span class="auto-date"></span>
                    </span>
                </a>

<a class="back" href="../index.html">← Volver al índice principal</a>
                </main>

</div>

</body>
            </html>

Resultado

Configuración inicial:

Resultado final de la Semana 1:

Resultado final de la github_pages:

← Volver a Semana 1