aboutsummaryrefslogtreecommitdiff
path: root/files/es/learn/common_questions/using_github_pages/index.html
blob: 2c52f5ef79e7f522da302f8b9b496031f9e76aa9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
---
title: ¿Cómo se utiliza Github pages?
slug: Learn/Common_questions/Using_Github_pages
translation_of: Learn/Common_questions/Using_Github_pages
original_slug: Learn/Using_Github_pages
---
<p class="summary"><a href="https://github.com/">GitHub</a> es un sitio "social coding". Te permite subir repositorios de código para almacenarlo en el <strong>sistema de control de versiones</strong> <a href="http://git-scm.com/">Git</a>. Tu puedes colaborar en proyectos de código, y el sistema es código abierto por defecto, lo que significa que cualquiera en el mundo puede encontrar tu código en GitHub, usarlo, aprender de el, y mejorarlo. ¡Tú puedes hacer eso con el código de otras personas tambien! Este artículo provee una guía básica para publicar contenido usando la característica gh-pages de Github.</p>

<h2 id="Publicando_contenido">Publicando contenido</h2>

<p>Github es una comunidad muy importante y útil para involucrarse, y Git/GitHub es un <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">sistema de control de versiones</a> muy popular — la mayoría de las empresas de tecnología ahora lo utilizan en su flujo de trabajo. GitHub tiene una característica muy útil llamada <a href="https://pages.github.com/">GitHub pages</a>, que te permite publicar el código del sitio en vivo en la Web.</p>

<h3 id="Configuración_básica_de_Github"><span class="short_text" id="result_box" lang="es"><span class="hps">Configuración básica</span> de <span class="hps">Github</span></span></h3>

<ol>
 <li>Primero que todo, <a href="http://git-scm.com/downloads">instala Git</a> en tu máquina. <span id="result_box" lang="es"><span class="hps">Este es el</span> <span class="hps">software del sistema</span> <span class="hps">de control de versiones</span> <span class="hps">subyacente en el que</span> <span class="hps">GitHub</span> <span class="hps">funciona</span><span>.</span></span></li>
 <li>Seguido, <a href="https://github.com/join">Regístrate para una cuenta de GitHub</a>. Es simple y fácil.</li>
 <li>Una vez te hayas registrado, inicia sesión en <a href="https://github.com">github.com</a> con tu nombre de usuario y contraseña.</li>
</ol>

<h3 id="Preparando_tu_código_para_subirlo">Preparando tu código para subirlo</h3>

<p>Tú puedes almacenar cualquier código que tu quieras en un repositorio de Github, pero para usar la característica páginas de Github con pleno efecto, tu código debe estar estructurado como un sitio web típico, por ejemplo que el punto de entrada primario sea un archivo HTML llamado<code> index.html</code>.</p>

<p>La otra cosa que necesitas hacer <span id="result_box" lang="es"><span class="hps">antes de seguir adelante</span> <span class="hps">es</span> <span class="hps">inicializar</span> <span class="hps">el directorio de</span> <span class="hps">código como</span> <span class="hps">un repositorio</span> <span class="hps">Git</span></span>. para hacer esto:</p>

<ol>
 <li>Apunta la línea de comandos a tu directorio <code>test-site</code> (<span id="result_box" lang="es"><span class="hps">o como se</span> <span class="hps">llame</span> <span class="hps">el directorio que contiene</span> tu<span class="hps"> sitio web</span></span>). Para esto, usa el comando <code>cd</code> (Es decir "<em>cambio de</em> <em>d</em>irectorio"). Esto es lo que deberías digitar si has puesto tu sitio web en un directorio llamado <code>test-site</code> en tu escritorio:

  <pre class="brush: bash">cd Desktop/test-site</pre>
 </li>
 <li>Cuando la línea comandos está apuntando hacia el interior del directorio de tu sitio web, digita el siguiente comando, que le dice a la herramienta <code>git</code> para convertir el directorio en un repositorio git:</li>
 <li>
  <pre class="brush: bash">git init</pre>
 </li>
</ol>

<h4 id="An_aside_on_command_line_interfaces">An aside on command line interfaces</h4>

<p>La mejor manera de subir tu código a Github es mediante la linea de comandos — esta es una ventana donde tú escribe <span id="result_box" lang="es"><span class="hps">comandos</span> <span class="hps">para hacer cosas como</span> <span class="hps">crear</span> <span class="hps">archivos y ejecutar programas</span></span>, en lugar de hacer clic dentro de una interfaz de usuario. Se verá algo como esto:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>

<div class="note">
<p><strong>Nota</strong>: Tú también podrías considerar una <a href="http://git-scm.com/downloads/guis">interfaz gráfica de usuario de Git</a> para hacer el mismo trabajo, si te sientes incómodo con la linea de comandos.</p>
</div>

<p><span id="result_box" lang="es"><span class="hps">Cada sistema operativo</span> <span class="hps">viene con</span> <span class="hps">una herramienta de línea</span> <span class="hps">de comandos</span><span>:</span></span></p>

<ul>
 <li><strong>Windows</strong>: <strong>Command Prompt</strong> se puede acceder pulsando la tecla Windows, tipeando <em>Command Prompt</em>, Y elegirlo de la lista que aparece. Nota que Windows tiene sus propias convenciones de comando diferentes de Linux y OS X, así que los comandos abajo pueden variar en su máquina.</li>
 <li><strong>OS X</strong>: <strong>Terminal</strong> se puede encontrar en <em>Aplicaciones &gt; Utilidades</em>.</li>
 <li><strong>Linux</strong>: Por lo general, puede extraer una terminal con <em>Ctrl + Alt + T</em>. <span class="short_text" id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">eso no funciona</span></span>, busca <strong>Terminal</strong> en una barra de aplicaciones o menú.</li>
</ul>

<p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto puede</span> <span class="hps">parecer un poco</span> espantoso<span class="hps"> al principio</span></span>, pero no te preocupes — que pronto conseguiras la <span id="result_box" lang="es"><span class="hps">caída de</span> <span class="hps">los conceptos básicos</span></span>. Tú<span id="result_box" lang="es"><span class="hps"> le dices a</span> <span class="hps">la computadora que </span><span class="hps">haga algo en la</span> <span class="hps">terminal, digitando</span> <span class="hps">un comando y</span> <span class="hps">oprimiendo la tecla Enter</span><span>,</span> <span class="hps">como se ha visto</span> <span class="hps">anteriormente.</span></span></p>

<h3 id="Creando_un_repositorio_para_tu_código">Creando un repositorio para tu código</h3>

<ol>
 <li>
  <p><span id="result_box" lang="es"><span class="hps">A continuación</span></span>, tu necesitas crear un nuevo repositorio para colocar tus archivos en el. Has clic en el signo más (+) en la parte superior derecha de la página de inicio de GitHub, luego escoge <em>Nuevo Repositorio</em>.</p>
 </li>
 <li><span class="short_text" id="result_box" lang="es"><span class="hps">En esta página,</span></span> en la caja <em>Nombre del Repositorio</em>, digita el nombre para tu repositorio de código, por ejemplo <em>my-repository</em>.</li>
 <li>También llena una descripción <span class="short_text" id="result_box" lang="es"><span class="hps">para decir lo que</span> tu <span class="hps">repositorio</span> <span class="hps">va a</span> <span class="hps">contener</span></span>. Tu pantalla debe mostrar algo como esto:<br>
  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
 <li>Has Clic en <em>Crear repositorio</em>; Esto debería llevarte a la siguiente página: <br>
  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
</ol>

<h3 id="Subiendo_tus_archivos_a_GitHub">Subiendo tus archivos a GitHub</h3>

<ol>
 <li>En la página actual, tú estás interesado en la sección <em>…o empujar un repositorio existente desde la línea de comandos</em>. Tú deberias ver dos lineas de código listado en esta sección. <span class="short_text" id="result_box" lang="es"><span class="hps">Copia</span> <span class="hps">la totalidad de la</span> <span class="hps">primera</span> <span class="hps">línea</span></span>, pégala en la línea de comandos, presiona la tecla Enter. El comando debería mostrarte algo como esto:

  <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/my-repository.git</span></span></pre>
 </li>
 <li><span id="result_box" lang="es"><span class="hps">A continuación</span></span>, digita los siguientes dos comandos, presionando Enter despues de cada uno. Estos preparán el código para subirlo a GitHub, y pida a GIt que administre estos archivos.
  <pre class="brush: bash">git add --all
git commit -m 'adding my files to my repository'</pre>
 </li>
 <li>Por último,<span class="short_text" id="result_box" lang="es"><span class="hps"> empuja el</span> <span class="hps">código</span> <span class="hps">hasta</span></span> GitHub yendo a la página de GitHub en la que estas e ingresando en la terminal el segundo de los dos comandos que vimos <em>…o empuje un repositorio existente desde la sección de línea de comandos</em>:
  <pre class="brush: bash">git push -u origin master</pre>
 </li>
 <li>Ahora necesitas crear la rama gh-pages de tu repositorio; actualiza la página actual <span id="result_box" lang="es"><span class="hps">y verá</span> <span class="hps">una página</span> del <span class="hps">repositorio</span> <span class="hps">algo así como</span> <span class="hps">la de abajo.</span></span> Tú necesitas presionar el boton que dice <em>Branch: <strong>master</strong></em>, digita <em>gh-pages</em> en el campo de texto, luego presiona el boton azul que dice <em>Create branch: gh-pages</em>. Esto crea una rama de código especial llamada gh-pages que es publicada en una ubicación especial. La URL toma la forma <em>username.github.io/my-repository-name</em>, asi en mi caso de ejemplo, la URL debería ser <em>https://chrisdavidmills.github.io/my-repository</em>. La página mostrada es la página index.html.<br>
  <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0px auto;"></li>
 <li>Navega tu dirección web de GitHub pages en un nuevo ta del navegador, y tu deberias ver tu sitio en linea! Mandalo <span id="result_box" lang="es"><span class="hps">por correo electrónico a</span> <span class="hps">tus</span> <span class="hps">amigos</span> <span class="hps">y muestra tu</span> <span class="hps">dominio</span><span>.</span></span></li>
</ol>

<div class="note">
<p><strong>Nota</strong>: <span class="short_text" id="result_box" lang="es"><span class="hps">Si te atascas</span></span>, la <a href="https://pages.github.com/">página de inicio de GitHub Pages</a> <span class="short_text" id="result_box" lang="es"><span class="hps">también</span> <span class="hps">es</span> <span class="hps">muy</span> <span class="hps">útil</span></span>.</p>
</div>

<h3 id="Un_mayor_conocimiento_de_GitHub"><span class="short_text" id="result_box" lang="es"><span class="hps">Un mayor conocimiento</span> <span class="hps">de GitHub</span></span></h3>

<p><span id="result_box" lang="es"><span>Si deseas realizar más cambios en su sitio de prueba y cargarlos en GitHub, simplemente tendrás que realizar el cambio en tus archivos como antes.</span> <span>A continuación, debes introducir los siguientes comandos (pulsando Intro después de cada uno) para empujar los cambios a GitHub</span></span>:</p>

<pre>git add --all
git commit -m 'another commit'
git push</pre>

<p>Puedes reemplazar <em>otro commit</em> con un mensaje más adecuado para describir qué cambio acaba de hacer.</p>

<p>Apenas hemos arañado la superficie de Git.Para obtener más información, comience con el <a href="https://help.github.com/index.html">sitio de ayuda de GitHub</a>.</p>