Instalar Y Configurar Retropie En Debian

<div style="display: grid; grid-template-columns: 25% 75%; align-items: center; gap: 1rem">
<img src="/assets/media/pixels/rpie.webp" alt="logo rpie">
<div class="text">
<h2><span style="color: #d0c9bc">RetroPie</span>: Debian GNU/Linux</h2>
<p class="pixel-font" style="font-size: 1.2em">Instalación y configuración de RetroPie en sistemas basados en Debian</p>
</div>
</div>

<p class="" style="color:#64ff64; position: absolute; bottom: 0; right: 0">
    Por <strong>@mcherrera</strong> |
    <a href="mailto:contacto@mcherrera.dev">contacto@mcherrera.dev</a>
</p>

---

<h2 class="r-fit-text">Tener una Distribución basada en Debian</h2>

<div style="display: flex; justify-content: center; gap: 1.6em">
<div style="display: flex; flex-direction: column; align-items: center">
  <img src="/assets/media/pixels/lubuntu.webp" alt="logo lubuntu" class="pixel-logo">
  <a href="https://cdimage.ubuntu.com/lubuntu/releases/18.04/release/" target="_blank">Lubuntu</a>
  <p>18.04 LTS <span style="color: #64ff64;">+</span></p>
</div>
<div style="display: flex; flex-direction: column; align-items: center">
  <img src="/assets/media/pixels/ubuntu.webp" alt="logo ubuntu" class="pixel-logo">
  <a href="https://releases.ubuntu.com/18.04/" target="_blank">Ubuntu</a>
  <p>18.04 LTS <span style="color: #64ff64;">+</span></p>
</div>
<div style="display: flex; flex-direction: column; align-items: center">
  <img src="/assets/media/pixels/linux-mint.webp" alt="logo linux mint" class="pixel-logo">
  <a href="https://www.linuxmint.com/rel_ulyana_cinnamon.php" target="_blank">Linux Mint</a>
  <p>20 LTS <span style="color: #64ff64;">+</span></p>
</div>
</div>

Con cualquiera de estas distribuciones instaladas, ya podemos continuar con la instalación de RetroPie.

---

<h2 class="r-fit-text">Realiza los siguientes pasos en la Terminal</h2>

<font size="5"><span style="color: rgb(171, 0, 0);">1.</span> Actualiza el sistema</font>
<style>
.rp-terminal{
    margin:2rem 0;
    background:#252525;
    border:2px solid #565656;
    overflow:hidden;
    box-shadow:
        0 0 0 2px #1a1a1a,
        6px 6px 0 rgba(0,0,0,.35);
    position:relative;
}

.rp-terminal-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#1d1d1d;
    gap:.5rem;
    position:relative;
    padding: .2em .6em;
    z-index:2;
    overflow-x:auto;
}

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

z-index:4;
    pointer-events:none;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.04) 0px,
            rgba(255,255,255,.04) 1px,
            transparent 2px,
            transparent 4px
        );
}

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ sudo apt update && sudo apt upgrade -y</code>
<button class="rp-copy-btn" data-command="sudo apt update && sudo apt upgrade -y" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">2.</span> Instala los paquetes necesarios</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ sudo apt install -y git dialog unzip xmlstarlet</code>
<button class="rp-copy-btn" data-command="sudo apt install -y git dialog unzip xmlstarlet" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">3.</span> Descarga el script de configuración de RetroPie</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ git clone --depth=1 https://github.com/RetroPie/RetroPie-Setup.git</code>
<button class="rp-copy-btn" data-command="git clone --depth=1 https://github.com/RetroPie/RetroPie-Setup.git" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

<font size="5"><span style="color: rgb(171, 0, 0);">4.</span> Ingresa a la carpeta y ejecuta el instalador</font>

.rp-terminal-body code{
    display:block;

flex:1;
    margin:0;

font-size:1.45rem;
    line-height:1;

white-space:nowrap;
    overflow-x:auto;

color:#ececec;
}

.rp-copy-btn{
    display:flex;
    align-items:center;
    justify-content:center;

width:34px;
    height:34px;

padding:0;

border:none;
    background:transparent;

cursor:pointer;

flex-shrink:0;
}

.rp-copy-btn img{
    width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-copy-btn:hover img{
    transform:scale(1.5);
}

.rp-copy-btn img{

width:20px;
    height:20px;

image-rendering:pixelated;
    image-rendering:crisp-edges;

transform:scale(1.4);

display:block;

transition:.15s;
}

.rp-user{
    color:#6cb6ff;
}

.rp-path{
    color:#ffffff;
}
/* efecto CRT retro */

.rp-terminal::before{

content:"";

position:absolute;

inset:0;

/* brillo interior */
.rp-terminal::after{

content:"";

position:absolute;

inset:0;

z-index:1;

pointer-events:none;

background:
        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(0,0,0,.45) 100%
        );

}
/* scrollbar retro pixel */
.rp-terminal-body::-webkit-scrollbar{
    height:12px;
}

.rp-terminal-body::-webkit-scrollbar-track{
    background:#111;
    border-top:2px solid #333;
}

.rp-terminal-body::-webkit-scrollbar-thumb{
    background:#666;
    border:2px solid #aaa;
}

.rp-terminal-body::-webkit-scrollbar-thumb:hover{
    background:#888;
}

/* Firefox */
.rp-terminal-body{
    scrollbar-width:thin;
    scrollbar-color:#666 #111;
}
</style>

<div class="rp-terminal">
<div class="rp-terminal-body">
<code class="pixel-font"><span class="rp-user">user@debian</span><span class="rp-path">:~</span>$ cd RetroPie-Setup && sudo ./retropie_setup.sh</code>
<button class="rp-copy-btn" data-command="cd RetroPie-Setup && sudo ./retropie_setup.sh" title="Copiar comando">
<img src="/assets/media/pixels/clipboard.webp" alt="copy">
</button>
</div>
</div>

---

El script comenzará a ejecutarse e instalará paquetes adicionales, tras unos breves momentos, aparecerá el menú como se muestra a continuación:

<p class="r-fit-text">Presiona <kbd class="pixel-key">Enter</kbd> para continuar con la siguiente ventana.</p>