La mejor respuesta
El GitHub Student Developer Pack proporciona los recursos para configura tu propio firstnamelastname.me dominio sin costo. En el resto de mi respuesta, me quejo sobre por qué inicialmente fue difícil para mí, por qué podría haber sido una barrera para usted crear su propio sitio web. Incluyo una guía breve, algo completa, destinada a una audiencia de estudiantes con poco o ningún conocimiento técnico, hasta crear un sitio web personal bastante público para usted (que debería aparecer cuando alguien busque su nombre en Google).
Por qué es realmente difícil crear su propio sitio web
Sobre querer saber cómo funcionan los sitios web: Como entusiasta de la tecnología de la escuela secundaria, siempre tuve curiosidad por saber cómo funcionaban los sitios web y realmente me impresionó la gente que tenía los suyos propios. Todo parecía tan simple desde el exterior, pero cada vez que buscaba en Google «cómo funcionan los sitios web» y profundizaba, me perdía en medio de extrañas abreviaturas y cosas que suenan complicadas. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS: la lista continúa. La tarea de mapear estos conceptos abstrusos con cosas palpables en las computadoras que conocía fue bastante difícil y una de esas cosas que requiere una tremenda motivación para sentarse y seguir.
Sobre la decisión de crear un sitio web para descubrir cómo funcionan: Hay una pregunta que puede recibir en algunas empresas de tecnología exigentes y encontrarla en anales de Glassdoor –
Cuando escribe «google [dot] com» en su navegador web, ¿qué sucede? ( Pregunta de la entrevista de Google: ¿Qué sucede cuando escribes …)
Incluso a la mitad de mis estudios de Informática en la universidad, yo estaba un poco preocupado por lo poco que me contaron de todo esto. Frustrado, la cosa alternativa para buscar en Google fue «cómo hacer un sitio web». Con la gran cantidad de dinero de marketing invertido, me topé con una gran cantidad de sitios web y términos que todavía no podía entender: dominios, hosting, GoDaddy, HostGator, enrutamiento, CSS, HTML, Javascript, jQuery, WordPress. , blogger, etc. Esto es lo que me muestra ahora:
Para ser honesto, todos estos nombres sonaban muy fraudulentos. para mí, y su incomprensibilidad excedía mi motivación. Solo quería tener mi propio sitio web con mi nombre: debarghyadas.com [ignore la autopromoción], y aprender a poner contenido en él.
Sobre ser demasiado barato para comprar cosas en Internet: Cuando me puse a pensar en algunos tenía un poco de sentido. Para crear un sitio web, tendría que comprar un «dominio», un nombre de sitio web y un «alojamiento», un lugar que contenga el contenido de mi sitio web y lo proporcione, lo «sirva», a este dominio. Compra. No es una palabra bonita dada mi frugalidad no tan arraigada. estudiante que vive del software gratuito, no estaba muy interesado en repartir dinero en efectivo para comprar cosas abstractas. Me tomó años pagar $ 1 por Whatsapp cuando era trivial gastar $ 4 en ese suntuoso pastel de mousse de chocolate con helado de vainilla.
Vamos, ¿podrías ser más estafador? «¿Nos comemos la competencia»? De acuerdo, caimán.
Para muchos estudiantes (y personas), el dinero es una gran barrera de entrada. Cuesta aproximadamente $ 10 / año comprar un dominio (en GoDaddy) y una cantidad similar para comprar hosting en HostGator. E implicó trabajar a través de numerosos productos que no podía entender. Me molestaba que también tuviera que pagar anualmente, no era una compra única.
Sobre recurrir a no ser tacaño para motivarme: Finalmente, a través de un largo y laborioso proceso, distribuí el dinero, convenciéndome de que la inversión me motivaría a aprender las habilidades necesarias. Quiero decir, todo el mundo siempre ha dicho que HTML es simple, y lo es, pero los sitios creados con HTML también se ven como una mierda. Hubo mucha confusión.
Al final, tenía razón: la inversión en un dominio y alojamiento durante 5 años me impulsó a descubrir cómo funcionaban las cosas y conseguí un sitio web personal y lo repetía cada vez que tenía tiempo libre.
Una guía algo completa para crear su propio sitio web gratis
Cómo acceder al GitHub Student Developer Pack .Sí, contiene muchas cosas que nunca he usado, pero lo que no anuncia directamente (y probablemente debería) es que proporciona todas las herramientas para que su sitio web en su dominio esté listo y funcionando de forma gratuita. Suena demasiado bueno para ser verdad ahora.
Herramientas del oficio He aquí una pauta general. I No lo he probado personalmente, pero imagino que es una buena forma de hacer las cosas. Necesita (o debería) hacer uso de los siguientes servicios pagos que proporciona el Student Developer Pack (gratis):
1. Repositorios privados de Github [opcional]
2. Namecheap dominio .me
3. Namecheap SSL [opcional]
4. Alojamiento de DigitalOcean
Y además,
1. Bootstrap
2. Varios tutoriales y herramientas en línea: JSfiddle 3. Algunos sitios de plantillas en línea: StartBootstrap , BootstrapZero
Qué hacer con dichas herramientas Intentaré que esta mini-guía sea lo más simple posible . Es fácil descartar términos importantes cuando sabes lo que significan, pero puede ser un gran impedimento para los lectores que no tienen ni idea. Podría ser más explícito y ampliarlos si así lo solicitas.
1. Configure un Github repositorio [opcional]
Cuando esté Al escribir mucho código para un proyecto, hay muchas cosas que pueden salir mal.
- Se puede eliminar de su máquina y usted está jodido
- Puede intentar agregar una nueva característica sin hacer una copia de seguridad de la versión anterior y llegar a un estado en el que Olvídese de cuántas Ctrl + Z (deshacer) necesita en qué archivos para volver al estado de funcionamiento.
- Podría tener a varias personas trabajando en él por separado en sus propias computadoras y no tener idea de cómo integrar sus versión del proyecto.
Un codificador n00b podría sugerir el uso de Dropbox para compartir y sincronizar proyectos de código, y si Si está trabajando en ello usted mismo, podría ser una solución decente. Sin embargo, aún enfrentará el segundo problema en la lista anterior y se vuelve realmente loco cuando varias personas intentan trabajar en la misma base de código simultáneamente.
Git (y en los viejos tiempos, SVN y Mercurial para hipsters) se utilizan para «versionar» tu código. Ten en cuenta que git no es github. Es decir, puedes hacer cambios, enviarlos «upstream» a las interwebs, donde se almacenan permanentemente en su «repositorio» (gratis). Git también es puramente una utilidad de línea de comandos, lo que significa que debe abrir una de esas pantallas negras de piratas informáticos de aspecto aterrador en su escritorio y escribir comandos para usarlo. No es trivial de usar. Github se integra con git y le permite ver los repositorios que ha empujado hacia arriba y proporciona un montón de GUI para hacer tareas de git (comportándose como una aplicación normal en su computadora). Puede navegar por sus bases de código (repositorios) en Internet desde su navegador, realizar cambios, revertir los cambios al último punto de control (confirmar), etc.
Github siempre proporcionó repositorios gratuitos que eran públicos, lo que significaba que cualquiera podía ver tu código y usarlo (sí, hay licencias de código abierto, pero sabes a qué me refiero). Esencialmente, si tuvieras que trabajar muy duro diseñando una mierda increíblemente genial y reinventando la informática, tu amigo podría simplemente tomar tu código y usarlo para su propio sitio web. Ahora, con el paquete educativo, puede obtener 5 repositorios privados gratuitos (aunque Github también proporcionó ese servicio para estudiantes .edu antes). Revise los tutoriales en línea y descubra cómo configurar un repositorio privado de github para el código de su sitio web.
2. Obtenga su Namecheap dominio .me
Durante mucho tiempo, el único vendedor de dominios que conocía era GoDaddy. El nombre siempre me pareció turbio, aunque finalmente cedí a comprar un dominio allí. Ahora, en la era de las nuevas empresas, tenemos una alternativa mejor, más limpia y más barata: Namecheap.Namecheap siempre fue barato, ¡pero ahora puedes obtener un dominio gratis! Así que obtenga su dominio firstnamelastname.me gratis, antes de que le roben su nombre común (si aún no lo está). Y trate de no volver a los 90 días del correo electrónico y compre un raj2kul4skul.me . No lo haga. Por favor. La única persona que impresionará son los amigos sin los que es mejor.
¿He mencionado que es gratis?
3 . Obtenga Namecheap SSL [opcional]
Esto es opcional y todavía no lo tengo para mi sitio web (porque todavía cuesta dinero en GoDaddy). SSL (Secure Sockets Layer) es una cosa elegante eso básicamente significa que su contenido web se puede publicar de forma «segura». También obtiene ese candado verde en su sitio web, tiene un sitio web https , en lugar de http, y siéntete realmente genial y auténtico:
Sin ser demasiado técnico, lo que necesitas saber es que, esto no es estrictamente necesario para su sitio web personal donde dudo que esté haciendo cosas que requieran una seguridad tan estricta. Sin embargo, si está aprendiendo cosas sobre la web, también podría hacerlo. ¿Es gratis después de todo?
4. Configure Digital Ocean hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap es para GoDaddy como DigitalOcean es para HostGator: una startup más legítima, más barata, mejor diseñada y más fácil de usar alternativa. Cuando compra un dominio, ¿qué le servirá (mostrará) al usuario? Tu sitio web, ¿verdad? Pero no puede simplemente decir que tome estos archivos en mi computadora y mostrárselos. Bueno, puede, y así es como. Con DigitalOcean, obtiene «alojamiento» gratuito. DigitalOcean llama a una instancia de alojamiento una «gota».
Esto significa que puede subir su sitio web a una máquina virtual (léase: una computadora) e indicarle su nombre de dominio para servir el contenido de esa computadora. Sin entrar en demasiados detalles, hay muchas cosas que suceden en el medio de las que DigitalOcean debería encargarse, como configurar y elegir un servidor web, nginx o Apache , y enrutar las solicitudes en su dominio específicamente a su conjunto de archivos.
5. Crear el sitio web real.
Ahora llega la parte «escribir algo de HTML». Crear un sitio web tiene distintos grados de dificultad, desde mostrar el envía un mensaje de texto con «Hola mundo» en Arial para crear una cuenta de Facebook o Google. Las aplicaciones activas que requieren datos y contienen el estado son difíciles de realizar.
Lo que harás probablemente será crear un sitio estático (un montón del mismo texto / imágenes que se muestran a todos cada vez). Esto es mucho más fácil. Probablemente yo no y no puedo escribir un tutorial completo para esto, pero lo que los estudiantes universitarios generalmente hacen es aprender y usar las siguientes cosas:
- HTML : este es el contenido real de texto / enlaces / imágenes / videos
- CSS : esto hace que el contenido anterior se vea bonito
- Javascript (JS) : esto permite elementos dinámicos y bonitas animaciones. Suponga que desea crear un botón que cargue una imagen que no en su HTML, o agregue contenido dinámicamente a su HTML. Luego, usa JS. Una breve historia: JS fue pirateado en el día en aproximadamente 10 días, y contiene muchos errores, y puede ser muy detallado y difícil de manejar si escribe mucho. Por lo general, un principiante usaría una biblioteca como jQuery para hacerlo menos detallado y fácil (aunque jQuery también puede parecer intimidante al principio con todos sus signos $).
- Bootstrap : Bootstrap es un marco de trabajo de interfaz creado por Twitter. El HTML sin formato viene con cosas que se ven bastante mal por defecto. El botón HTML no se puede presentar, y escribir CSS requiere tiempo y experimentación (quiero decir, seamos realistas, nadie REALMENTE «conoce» CSS). Bootstrap implica descargar algunos archivos, agregar una línea a su HTML y tal vez leer algunos documentación y agregar algunas clases de CSS que proporcionan, ¡y listo! No solo su sitio se ve mucho más bonito automáticamente, sino que también se puede hacer compatible para dispositivos móviles (nuevamente, un esfuerzo no trivial).
6. Poner su sitio web en línea (implementación) Una vez que haya terminado de crear y probar su sitio web localmente (en su propia computadora) activando su localhost (servidor web local – google it.Es posible que no necesite esto para sitios estáticos), y probar y mezclar con su CSS utilizando las muy útiles herramientas de desarrollo de Chrome, y está satisfecho con su resultado, puede ir a Digital Ocean, comprimir su sitio y enviarlo a su servidor. Si hizo todo bien, espere unos segundos y vaya a su firstnamelastname.me y debería ver su contenido. Y todos los demás también deberían poder hacerlo.
7. Hacer que su gran sitio web se pueda buscar (SEO)
Un último paso es el SEO: optimización de motores de búsqueda. El objetivo final es, con suerte, tener un nombre poco común y hacer que su sitio web esté entre los mejores resultados cuando alguien busque en Google su nombre. Esto puede llevar algún tiempo (pero se puede hacer ahora a un costo monetario). Hay muchas formas de hacer esto, y puede buscar en Google todas ellas. Hay formas de asociar su Facebook con él, su antigua cuenta de G + que nunca usa con él, agregar metadatos personalizados para que aparezcan en su Búsqueda de Google , etc., etc. En última instancia, dentro de varias semanas, a menos que su nombre sea extremadamente común o, desafortunadamente, el mismo que el de una persona famosa, debería ser uno de los primeros resultados en Google.
Cosas varias que debe saber
Sobre tomar atajos para crear una página bonita: Dependiendo de la cantidad de trabajo que desee realizar en su sitio web, siempre puede elegir una plantilla de arranque útil en línea o crear sus propias clases de CSS si apariencia única, o incluso mantenerlo simple y optar por HTML / CSS básico (que es lo que hacen una gran cantidad de académicos). Por ejemplo, Página principal de Jon Kleinberg .
Sobre no tener que conocer PHP y otras cosas sofisticadas: debido a que estás diseñando un sitio estático, no hay conocimiento de cosas sofisticadas como crear un backend, crear muchas páginas y tener bases de datos. Sí, estoy hablando contigo, todas las personas que quieren usar PHP y MySQL sin una buena razón (incluso si es necesario, trate de mantenerse alejado de PHP). Existe «un montón de excelentes marcos de backend diseñados para crear otros tipos de sitios web complicados, desde Ruby on Rails (en Ruby) hasta Django (en Python) a Play! (en Java y Scala) ligeros como CherryPy (en Python) o Flask (en Python). De hecho, existen marcos para casi todos los lenguajes que puedas imaginar – Comparación de marcos de aplicaciones web pero no se agote al usarlos / aprender sobre ellos todavía.
Sobre otras cosas para considerar agregar a su sitio web: Otras cosas que podría querer hacer para su sitio web personal –
- Comprime tus imágenes si usas muchas, tu sitio web tardará mucho en cargarse.
- Utilice complementos sociales de Facebook / Quora / Twitter
- Agregue Google Analytics (esto es casi imprescindible). Google Analytics te permite ver, entre muchas otras cosas, cuántas personas están visitando tu sitio web, de dónde son, etc. Es un buen motivador (con suerte) para actualizar tu sitio y mantenerlo actualizado. Además, es muy fácil de usar: solo implica copiar y pegar algunas líneas de código en su página.
- Minimice sus scripts. Muchos de los JS y CSS de un sitio todavía pueden ser visibles para cualquiera que visite su sitio. Si cree has hecho algo terriblemente interesante que quieres ocultar, minimiza tu JS / CSS. De lo contrario, arruina el propósito de tener un repositorio privado. Además, hace que tu sitio sea más rápido.
- Encripta tu HTML . Nuevamente, si realmente no quieres que la gente vea cómo creaste tu sitio web, hay formas de cifrar su HTML, de modo que incluso haciendo clic en el botón «Ver código fuente», su página web no revelará nada interesante.
Al escribir esta respuesta: Mucha gente pregunta cómo crear su propio sitio web. Pensé que sería útil escribir un pequeño tutorial breve (discutible) y fácil de entender para ayudar a todos. Realmente es una de esas cosas fáciles en las que debes concentrarte. Ah, ¿y te mencioné que ahora es gratis?