Lanza tus sitios web con GitHub Pages

1. Introducción: Oigan, chicos, me llamo París. Soy un desarrollador web de pila completa con sede en la ciudad de Nueva York, y llevo trabajando como instructor profesional de desarrollo web desde 2016. Hoy te voy a guiar por un proceso realmente sencillo que te va a mostrar cómo desplegar sitios web estáticos. Entonces, ¿qué es Page que has estado ofreciendo en HTML, CSS y JavaScript. Te voy a mostrar una manera rápida y fácil de conseguir esos en línea para que cualquiera con un navegador Web y con tu chica pueda acceder a ellos públicamente. Si te resulta útil este curso y estás disfrutando de lo que estoy haciendo, por favor deja una reseña. Si tienes alguna pregunta o comentario, sí los compartes para que yo o el resto de la comunidad puedan ayudarte en. Todos podemos aprender juntos. De verdad te animo a publicar tu trabajo para que los futuros alumnos puedan ver lo que es posible después de tomar este curso. Y por último, si quieres estar al día con todos los cursos que publique en el futuro, solo sígueme en mi perfil de instructor 2. Descripción del curso: Muy bien, chicos. Entonces, antes de sumergirnos, solo quiero mostrarles exactamente lo que vamos a hacer hoy. En realidad no vamos a estar escribiendo ningún código. Ya he escrito algún código. Si miramos a mi editor de texto, tengo un archivo HTML que solo tiene un botón y tengo un archivo CSS y tengo un archivo javascript que. Bueno, cuando hago clic en esto, aparece una caja de alerta. Eso como puedes ver aquí mismo mirando la barra de direcciones. Esta es esta páginas Web que se cargan desde mi sistema de archivos local y lo que vamos a estar haciendo hoy es averiguar OK, cómo vamos de desarrollo local a tener lo mismo en un realmente su l para que cualquiera con un navegador Web y este año Earl puede visitar esta página Web y ver todas de la misma funcionalidad 3. Configuración inicial: De acuerdo, entonces lo primero que vamos a hacer es visitar. Consigue hub dot com y nos vamos a inscribir para obtener una cuenta. Obviamente, si ya tienes una cuenta, no tienes que hacer esto. Simplemente puedes usar esa cuenta. Pero si no tienes cuenta, si eres nuevo para conseguir Hub, solo visita la página principal. Haz clic en el botón de registro que va a dar inicio al flujo de registro, y te va a pedir tu nombre de usuario. Tu correo electrónico. Tu contraseña. A medida que continúes, te va a pedir que elijas qué tipo de cuenta te gustaría ser esa cuenta pagada o gratuita . Um, va a sugerir por ahora, sólo para ir con la cuenta gratuita, va a significar que todo tu código que empujas hacia arriba para conseguir esposado va a ser público. No obstante, en nuestro caso de hoy por lo que estamos tratando de hacer, eso no es para nada un tema. Si eliges Teoh, uh, paga, olvida hub en el futuro. Siempre puedes hacer ese cambio más adelante para tener repositorios privados y hacer que tu código no sea accesible públicamente. Pero por hoy, sólo para empezar las cosas rápidamente ¿Por qué no vas adelante y solo te inscribes para una cuenta gratis si no tienes ya una, la segunda cosa que voy a tener que te hagas después de ti, hijo. Afriat Hub es visitar desktop dot Obtener hub dot com y solo vamos a descargar, uh, uh, la aplicación de escritorio nativa. Olvídate, ¿eh? Eso nos va a hacer la vida un poco más fácil en cuanto a comunicarnos con get hub, no vamos a tener que usar la línea de comandos para usar get No vamos a tener que abrir una ventana terminal para mucha gente que va a hacer las cosas un poco poco más fácil de usar. Um, y es sólo ir del dedo Haz de esto un poco más una experiencia de aprendizaje rápido. Si en el futuro quisieras sumergirte más profundamente en conseguir y usarlo en la terminal, por todos los medios ve por ello. Pero por ahora, solo vamos a usar para obtener cliente de escritorio Hub y hacer las cosas lo más simples posible lanzamiento que solo podemos lanzar nuestras páginas Web y hacerlas públicas, y podemos ir desde ahí 4. Control de versiones explicado: Muy bien, Así que ahora que tenemos nuestras cuentas get have y hemos descargado el get have desktop client, vamos a hablar de control de versiones. Vamos a hablar de get y vamos a hablar de get, ¿eh? Vamos a entrar en un poco de detalle sobre lo que realmente son, cómo son diferentes y cómo ellos qué papel juegan en lo que estamos tratando de hacer en este momento que es lanzamiento son nuestros primeros sitios web para que sean de acceso público. Por lo que el control de versiones es este concepto de seguimiento de los cambios a un proyecto a lo largo del tiempo. Ah, buen sistema de control de versiones te proporcionará una forma de tomar instantáneas de tu base de código medida que realizas cambios. Y luego puedes seguir adelante e inspeccionar cómo se veía tu código en cada instantánea. Y si tiene un rico conjunto de características, un sistema de control de versiones también debería permitirte viajar en el tiempo, si lo deseas, entre instantáneas para que puedas devolver Teoh versiones anteriores de tu base de código independientemente de lo que sea parece que ahora mismo, siempre y cuando hicieras los pasos apropiados para hacer esas instantáneas en el pasado. Entonces esto de aquí es solo un pequeño diagrama, un poco de representación visual de cómo un proyecto podría verse con el tiempo y cómo funciona realmente el control de versiones para crear instantáneas de un proyecto a medida que cambia con el tiempo. Entonces si miramos por aquí, uh, la caja verde indica todo el proyecto. Se puede pensar en esto como el directorio donde viven todos mis archivos de código. Entonces para construir html, vea, como sitios web de script de trabajo, podría adivinar que tendría un archivo html de punto índice en el directorio raíz de mis proyectos. Mi carpeta de proyecto se llama mi Proyecto, y tengo un archivo aquí. Se llama Index Study. Ella, Mel y yo sólo tenemos en cada una etiqueta que dice: Hola ahí. Voy a tomar una instantánea de mi proyecto en este momento, y voy a decir que esta instantánea es instantánea uno, y voy a darle un mensaje a esta instantánea. Sólo voy a decir que los mensajes agregan primer archivo html. Después de tomar esa instantánea, voy a hacer algunos cambios en mi código base en. Voy a añadir un archivo CSS de punto principal. Este archivo CSS de punto principal solo va a alterar el color de H one tags. Y una vez que tenga ese archivo agregado y tenga todo el contenido de ese archivo de la manera que yo quiera, voy a tomar otra instantánea. Voy a decir que esta instantánea tiene una idea de dos es la segunda instantánea, y voy a darle un mensaje que diga, agregué el primer archivo CSS Entonces después de eso, una vez que tenga esta primera instantánea en la segunda instantánea en mi historial de instantáneas, voy a cambiar de nuevo mi base de código. Y voy a realmente sólo modificar mi archivo html index dot para que las etiquetas H one sean ahora etiquetas p. Y una vez que tenga esto de la manera que lo quiero una vez que todo el código haya sido modificado y creo que las cosas estaban bien, voy a seguir adelante y tomar otra instantánea. Eso va a ser la instantánea número tres. El mensaje para eso va a ser que edité el archivo HTML. Entonces si piensas en todas estas instantáneas, ya sabes, al final de todos estos cambios, mi código se verá como lo hace en la tercera instantánea. Esa es la versión actual en la que estoy trabajando. No obstante, lo que es tan poderoso sobre el control de versiones es a pesar de que mi H one tags air now p tags y ahora tengo un archivo CSS de punto principal, siempre puedo volver atrás y hacer referencia a cómo se veía mi código en la primera instantánea lo que mi se parecía a la segunda instantánea. Y también puedo cambiar entre cualquiera de estas tres instantáneas siempre y cuando me tomara el tiempo en el pasado para tomarlas. Y eso es en pocas palabras. De qué es el control de versiones y por qué es tan poderoso. Te puedes imaginar si has estado, ya sabes, haciendo desarrollo web durante algún tiempo que estos archivos no solo tengan tres líneas en ellos. Podrían tener decenas o cientos de líneas de largo. Podrían cambiar cada pocas horas cada pocos días, y podría ser realmente, realmente difícil saber o recordar cómo eres podría parecer en el pasado. Es por ello que el control de versiones es tan útil y por qué es tan poderoso. Por lo que ahora para obtener es el sistema de control de versiones más utilizado por lejos es en realidad un programa de línea de comandos, lo que significa que tienes Teoh sabe cómo utilizar el terminal u otra interfaz de línea de comandos . Con el fin de utilizar el programa raw get. No obstante, hay muchas aplicaciones de escritorio consiguen que el escritorio Hub sea una de ellas, la que acabamos de descargar que nos permiten utilizar el poder de get hasta cierto punto sin necesidad de sumergirse en la línea de comandos. Por lo que hay algunas frases clave con las que queremos familiarizarnos. Eso que cuando hablamos de conseguir y usar get estaban en la misma página. El 1er 1 es commit. Comprometer es sólo otra palabra para una de estas instantáneas que tomamos cualquier tiempo hacemos una modificación a nuestro código que queremos guardar en nuestro historial de get, vamos a tomar un commit, y ese commit va a tener una idea única. Y también va a tener un mensaje de los cambios que hicimos un repositorio. Mucha gente los llama “repose”. Repositorio es solo una colección de commits para un proyecto dado. Entonces si miras todos los commits para un proyecto, puedes obtener todo el historial, y esos están todos almacenados dentro de un repositorio. Ah, repositorio local es una copia de un repositorio que existe en tu máquina, tu computadora, tu laptop, tu escritorio, lo que sea. Un repositorio remoto es una copia de un repositorio que existe en un servidor remoto ahora encendido para levantarse . Por lo que es muy importante distinguir entre ponerse y levantarse, aunque ambos tienen ponerse en nombre. Get Hub es en realidad una empresa, mientras que get es un programa. Get es un proyecto de código abierto que fue creado por Linus Torvalds. Get Hub es una empresa privada que cobra por sus servicios e intenta hacer mucho más fáciles los mundos del desarrollo de software. Se trata de una plataforma SAS basada en la nube para hospedar repositorios de get remotos, y en nuestro caso va a ser extremadamente útil en proporcionar características para servir páginas Web incluidas en repositorios que alojamos en get y esto va a ser a través de un función llamada Get Hug Pages. También hace una tonelada más de cosas, y podemos meternos en eso más adelante. Pero por ahora, sólo nos importan estas dos cosas. Get Hub Desktop es la aplicación de escritorio nativa que acabamos de descargar, y esto nos va a facilitar hundir nuestro repositorio local en nuestro equipo con el repositorio remoto que creamos en Get. 5. Crear y clonar un repository de GitHub: Muy bien, Así que ahora que tenemos un poco de comprensión de lo que es y de lo que consigue es Hub y cómo juegan juntos, vamos a seguir adelante y crear nuestro primer repositorio get hub. Por lo que vamos a conseguir hope dot com en la barra de knave en la parte superior. Cierto, ahí está este ícono más. Vamos a hacer clic en que va a haber un desplegable con la nueva opción de repositorio. Vamos a hacer clic en eso, y eso nos va a llevar a la página donde podemos crear un nuevo repositorio. Por lo que primero vamos a seleccionar un nombre para este repositorio. Voy a llamarlo Hola, World Website. Uh, asegúrate de no tener espacios en el nombre. Voy a dejar la descripción en blanco, y la voy a dejar como repositorio público. Simplemente voy a hacer clic en el botón de la pantalla y a patear las cosas. Entonces ahora se creó mi repositorio on get, ¿eh? Pero aún no tenemos ningún código. Obviamente lo acabamos de crear, y nos está dando algunas opciones de cómo podríamos agregar algún código de un repositorio existente usando algunos comandos de línea de comandos. No obstante, hoy vamos a estar usando el cliente get hub desktop. Entonces, en lugar de usar estas opciones, vamos a hacer clic en este botón aquí arriba. Y eso nos va a preguntar si podemos abrir el que tenga aplicaciones de escritorio. Voy a hacer clic en eso. Y una vez que abramos esto, nos va a dar unos pedacitos de información el primer bit aquí mismo. Este es el U. R L. Al repositorio, el repositorio remoto que acabamos de crear en Get up. El segundo bit de información es la ruta del archivo local a donde se va a vivir esta versión local del repositorio en nuestras computadoras. Entonces, como puedes ver, get Hub Desktop cliente crea este directorio get hub en mi carpeta Documentos y solo va a almacenar este proyecto en el directorio Hello World Website dentro de ese get of directory. Entonces todo esto se ve genial. Estoy en un clon de click y ahora se puede ver que este repositorio hola mundo se ha agregado a mi directorio local get hub repositorios y todo está enlazado 6. Comprometer cambios locales y empujar a GitHub: todo bien. Entonces en nuestra última sección, creamos nuestro primer repositorio get home, y clonamos ese repositorio a nuestras computadoras para que tengamos una instancia local de ese repositorio remoto. Entonces si pensamos en estos dos repositorios varios, son una especie de copias de lo mismo, pueden quedar fuera de sincronización. Pero en realidad, queremos mantenerlos sincronizados. Y eso es lo que esta aplicación de escritorio get up nos está ayudando a hacer. Entonces a medida que hacemos cambios en nuestra computadora local, los vamos a hundir al repositorio remoto para que todo el código pueda ser igual en ambos lugares. Entonces lo primero que voy a hacer en este momento es abrir el buscador, Y sólo voy a mostrarte qué escritorio Get Hub. ¿ De hecho en tus documentos? Holder, si estás trabajando en un Mac, no estoy seguro de cómo funciona esto en las ventanas, Pero si estás trabajando en un Mac en tu carpeta Documentos, va a crear un directorio get hub para ti. Y todos los repositorios que creas o gestionas con tu aplicación de escritorio get up se van a almacenar en este directorio get Hub, puedes cambiar la ubicación predeterminada. Pero aquí es donde guardará las cosas para ti y donde buscará repositorios si no cambias esa opción predeterminada. Entonces como puedes ver aquí, ya que acabamos de clonar el repositorio del sitio web hello World a nuestras máquinas locales, tenemos este directorio hola mundo aquí mismo. Y aquí es donde va a ir todo nuestro código fuente para que podamos comprometer esos cambios y luego enviarlos al repositorio remoto. Así que en realidad tengo algún código de inicio justo aquí, y ustedes pueden descargar el mismo abrigo de inicio abajo desde el enlace. Yo sólo voy a copiar y pegar esto aquí para que podamos ponernos en marcha muy rápido. Y cuando hago eso, si volvemos a la aplicación get hub desktop, podemos ver que tiene estos tres archivos que acabo de agregar. Y dice que estos nuevos archivos aire que aún no han sido rastreados eso es lo que significa este plus verde para que pueda mirar a través de todos los archivos. Todo lo nuevo va a estar en verde, y todo esto se ve bastante bien. Acabo de tener un archivo JavaScript. No he indexado archivo html dot y me he quedado en archivo CSS. Entonces voy a comprometerme esto y este va a ser mi primer compromiso. Y la convención para tu primer commit es solo para nombrarlo primero commit, y podría darle una pequeña descripción aquí. En esto, agregan índice html Quiero decir, no CSS y necesitan archivos dot Js. Y una vez que haya agregado ese mensaje y la pequeña descripción, solo voy a hacer clic en este botón, comprometerme a dominar, y eso es todo. He creado una de esas instantáneas de las que hablamos antes. Esa versión de mi código se ha solidificado que ahora está en la historia para esto. Obtener repositorio. Ahora, recuerda, eso está todo en mi repositorio local git. Ninguno de esos cambios se ha reflejado todavía. Obtener hub dot com. Venimos aquí y refrescamos la página. Podemos ver que todavía se ve exactamente como lo hacía antes. Por lo que tenemos Teoh empuja estos cambios hacia arriba para conseguir hub dot com. Y lo podemos hacer solo publicando esta sucursal aquí mismo. Haga clic en ese botón me va a pedir que me identifique. Obviamente ups. París y mi contraseña no asoman muy bien. Una vez que he firmado , sabe quién soy. Y podría hacer esta conexión. Y puede hundir este código para que cuando actualice esta página, todo mi código está ahora aquí en get hub dot com. 7. Para que páginas de GitHub para tu repository: Muy bien, Así que ahora que tenemos código tar de hundimiento de nuestro repositorio local toe a remote get hub repositorio , todo lo que tenemos que hacer para que nuestro sitio web sea accesible públicamente es ir a la pestaña de configuración , desplácese abajo a la sección etiquetada conseguir páginas enganchadas, cambia esto ninguno. Opción desplegable para dominar rama y haga clic en este botón de guardar. Una vez que hayamos hecho eso, podemos retroceder hacia abajo. Se va a refrescar la página, y en realidad nos va a dar un tú, earl que podemos visitar para acceder a nuestra página web. Entonces si hacemos click en esto, probablemente vamos a conseguir un 40 para bien, en realidad no. Por lo que se actualizó para mí bastante rápido. En ocasiones pueden tomar unos minutos hasta unas pocas horas, pero como pueden ver aquí mismo tengo a esta chica pública que cualquiera puede visitar. Y esta es mi página web. Puedo dar click en esto. Mi guión de trabajo está funcionando. Mi CSS está funcionando y fue realmente así de simple. De vuelta aquí, todo lo que hicimos fue cambiar una opción en un repositorio y simplemente funciona. Por eso estamos usando get hub y levantarnos edades. Hoy en día porque realmente se necesita mucho del dolor de cabeza de desplegar sitios web de páginas estáticas. Y vuelve a hacer la vida súper simple. Simplemente voy a hacer clic en este botón. Es tan satisfactorio, Gran trabajo. 8. Hacer cambios después de que hayas desplegado: Está bien. Por lo que acabamos de ver lo fácil que es crear código en nuestras computadoras locales. Empuja hacia arriba para obtener hub, desplace un interruptor para habilitar obtener sus páginas y luego tenga un sitio web de cara pública que esté funcionando plenamente con un conde realmente que otras personas pueden visitar en sus navegadores web. ¿ Cómo vamos a hacer ahora modificaciones cambiar código y mantener las cosas al día de hoy a medida que seguimos desarrollándonos? Bueno, realidad es solo un simple como lo fueron las cosas en primer lugar. Voy a abrir mi editor de texto y sólo lo voy a hacer muy simple en ello. Voy a cambiar el color de este botón de rosa. Eres tú, verde. Voy a venir aquí a levantarme escritorio. Veo que hay una línea que se ha cambiado. Voy a hacer esto un commit así de nuevo, no se puede empujar ningún cambio a menos que haya envuelto en un commit o a menos que se tome una de estas instantáneas. Entonces voy a hacer otro compromiso. El mensaje aquí se va a cambiar el color del botón. No tengo que añadir una descripción, pero siempre se puede. Y luego voy a hacer clic en este botón para comprometerme. Una vez que lo haga, puedo ver que tengo este pequeño aire por aquí y este pequeño con un angosto por aquí . Esto me está indicando que mi repositorio local y mi repositorio remoto no están sincronizados en que realmente tengo un commit que está por delante en mi repositorio local, luego mi repositorio remoto. Entonces voy a hacer clic en este botón empujado origen, y eso sólo va a hundir todo para mí. Si vuelvo a conseguir hub la página para mi repositorio y me refresco, puedo ver que el último commit ahora se cambia el color del botón en lugar de primero commit. También puedo ver qué archivos se vieron afectados por esto. Comprometerse. Por lo que el archivo CSS justo aquí Esto se cambió de rosa a verde. Genial. Vuelve aquí al sitio de mi vida cada refresco la página y es genial 9. Gochyas: Muy bien, chicos, eso casi lo envuelve para este video sobre cómo utilizar las páginas de levantarse para desplegar sitios web estáticos . Yo sólo voy a repasar unos gouaches que te podrían dar un momento difícil Si no sabes lo que buscas. El 1er 1 es probablemente uno de los más comunes, y eso es simplemente no tener un archivo html index dot en la raíz de tu carpeta de proyecto. Eso significa que en el nivel más externo de tu repositorio get hub, tiene que haber un archivo html llamado index dot html. Ese es el archivo que se va a servir como su página de ruta para su sitio web. No se le puede dar nombre a otra cosa. Simplemente tiene que estar indexado sobre la edad. Ahora puedes tener un montón de otras páginas HTML a las que vinculas que son otras páginas de tu sitio. Pero hay que tener este one index dot html. Otro problema que podría surgir es que estás haciendo cambios localmente, pero tú, por alguna razón, no puedes empujarlos hacia arriba para conseguir hub. Podría ser que en realidad no hayas cometido esos cambios. Entonces recuerda que tenemos que tomar esas instantáneas con el fin de empujar los cambios locales hasta nuestro repositorio remoto . Entonces si no tomaste esas instantáneas después de un cambio, no podrás empujar esos cambios. Otra cosa que podría ser un poco frustrante y confuso al principio. A lo que te acostumbrarás mucho es al hecho de que el código que empujas hacia arriba podría tardar unos minutos incluso unas horas antes de que esté en vivo. Entonces usé algo de magia de cine en este video tipo de acelerar las cosas. Pero hubo unos minutos de retraso entre cuando hice algunos cambios y me empujé a buscar ayuda a cuando se reflejaron en mi sitio de vida. Por lo que ojalá esto cubra la mayoría de las bombas de carretera que podrías experimentar. Si hay alguna otra, por favor comente a continuación. Haré todo lo posible para abordar cualquier tema. Si no yo. Esperemos que la comunidad los ayude chicos 10. Conclusión: Muy bien chicos, así que eso es más o menos. Como puedes ver, desplegar páginas web estáticas con get hub y get pages es bastante sencillo. Ese fue realmente mi objetivo en este curso era entregarles un método de despliegue que tenga una barrera baja para la entrada. Es que realmente todo lo que tienes que hacer es enfocarte en escribir código y no tienes que preocuparte por las ops de Dev ni nada por el estilo otra vez. Si te resulta útil este curso y si estás disfrutando de lo que estoy haciendo, por favor deja una reseña. Se puede compartir esto con cualquiera que, se podría pensar que también se beneficiaría de la información. Si tienes alguna pregunta o comentario, sólo tienes que compartirlos también para que o yo o el resto de la comunidad de comunicación podamos tratar de ayudarte. Y por último, si tienes alguna idea para cursos que quizá quieras ver en el futuro, solo avísame y trataré de que eso suceda. Puedes seguir mi perfil de instructor para ver cualquier curso que publique a partir de aquí y compartir tu trabajo para que puedas inspirar a otros alumnos