Hacer una Web GRATIS y RÁPIDO con Notion (en tu PROPIO DOMINIO 2020)

August 8, 2020

¿Queréis hacer una web y no queréis gastar ni un Euro?

En este tutorial te digo como hacerlo ;)

Para poder seguir el tutorial vas a necesitar:

Transcripción del vídeo

Hola chicos, ¿qué tal?

Bienvenidos a este nuevo tutorial de Code que te Pillo y en esta ocasión vamos a ver algo muy, muy interesante.

Vamos a ver cómo podemos hacer una página web absolutamente gratis.

El único coste que vamos a tener es el dominio. Si queremos tener dominio propio y ya sabéis que un dominio cuesta alrededor de 10 euros al año, si no queréis dominio no vamos a tener que gastarnos ni el dinero en el dominio.

¿Qué tipo de páginas web vamos a hacer?

Bueno, pues os estoy enseñando siendo aquí alguna web tipo, una web como esta, que como podéis ver son webs bastante avanzadas, con un montón de contenido. Y os he traído aquí una serie de páginas para que veáis algo parecido a lo que podemos hacer y ahora vais a ver lo fácil, lo fácil que se hace.

Tenéis unas cuantas web en el apartado Showcase en esta web

Estas son algunas de las páginas que os he traído para que veáis lo que podemos llegar a hacer y cosas más avanzadas. Si vosotros queréis, pero sobre todo vamos a poder ver que puede llegar a ser muy interesante, que en algunas ocasiones queremos hacer una página web y el tema técnico nos puede echar para atrás.

Web hecha con notion


Pues ahora si tienes una idea, si tienes algo que contar al mundo, vais a ver lo sencillo que lo vamos a hacer y cómo lo vamos a hacer. Bueno, pues con una herramienta que me tiene enamorado y que se llama Notion.

Como os digo, es una herramienta gratuita y para el que no lo conozca, es una herramienta que nos permite tomar notas de reuniones, escribir artículos, nos permite tener notas internas y un montón de cosas, nos permite hacer bases de datos, nos permite llevar control sobre los proyectos y nos permite hacer muchísimas, muchísimas cosas.

Ya haré un tutorial concreto para sacarle más rentabilidad a Notion y sacarle más provecho a Notion.

En este caso vamos a hacer algo muy sencillo que es hacer esta página web para que veáis cómo funciona.

En este caso estoy abriendo mi Notion porque como os digo, Notion es una aplicación web o también os podéis bajar una aplicación al ordenador para funcionar. Y entonces, como os digo, tiene un montón de opciones para tomar notas.

En este caso he creado un documento vacío que lo he llamado Jó que Oferta, porque así se va a llamar la página web y aparte de sacarle provecho, como os digo, haciendo tablas, haciendo listados, calendarios, un montón de cosas que iremos viendo, tiene una función que es muy interesante que es Plantillas, Templates y aquí tenemos un montón de plantillas predefinidas que podemos usar en este caso imaginar esta página principal para mi web.

Me parece que está bastante chula. Podemos.

En este tutorial no quiero enseñaros Notion en profundidad, sino cómo convertirlo en una página web. Entonces, fijaros, me gusta esta plantilla. Le doy a usar esta plantilla y entonces ahora está cargando.

Esta cabecera por cualquier color, por cualquier imagen que yo tenga o tiene esta unida con unsplash . Si hubiera de aquí alguna que a una imagen que me gustara también lo podría usar.

Y aquí, por ejemplo, voy a poner a ver si hay alguna imagen que tenga que ver con cupón. Esto no me ha gustado. Vamos a poner aquí márqueting a ver si hubiera alguna que me interesa. Vale, pues vamos a poner una página. Esta me gusta, por poner un ejemplo, es solo para que veáis como funciona y lo fácil que es manejarla.

web joqueofeta.com hecha con notion


En este caso yo iría cambiando todos los componentes.

Aquí voy a poner, por ejemplo, así jo, qué oferta iría añadiendo el contenido que yo quiera y cada una de estas son subpáginas que si hago clic puedo cambiarlas, puedo crear otras subpáginas. Bueno, no me voy a liar ahora modificarlo, pero cada vez que vosotros ponéis el ratón en un sitio y hacéis clic en Intro, fijaros que me aparece la opción de añadir comandos. En este caso, si le doy la barra inclinada, me permite añadir texto, páginas internas, títulos, check list.

Bueno, puedo hacer un montón de cosas, os recomiendo que le eches un ojo porque es realmente increíble todo lo que se puede hacer en este caso. Por ejemplo, yo puedo poner aquí y por poner un ejemplo, cupones descuento.

No me lo voy a trabajar como os digo, pero es solo para que veáis lo fácil que es editar toda la página. Vale, vamos a empezar por lo más sencillo y es cómo puedo hacer esto?

Que sea público y que realmente ya sea una página web lo que estoy viendo.

Pues mirar que aquí arriba donde pone Share, hago clic aquí y le digo que pueda, que se convierta en una página web y además aquí me dice la URL.

No os preocupéis porque lo vamos a convertir en un dominio propio.

Pero además le voy a decir qué quiero aquí. Como os dais cuenta que si quiero que se indexe en los buscadores como en este caso sí, si quiero lo marco y de esta manera ya lo podrían ver los buscadores.

Me lo copio y me voy a internet y en este caso voy a entrar como incógnito para que veáis que no depende de que sea una web mía, una URL de mi cuenta.

Ya esto lo puede ver cualquiera aquí ya está funcionando, pero tiene el problema.

Que no es mi dominio. Y es aquí donde viene el tutorial. Aquí esto lo puede hacer cualquiera y muy muy rápido. Y como os digo, ya haremos más vídeos de Notion.

Pero cómo puedo hacer para que esto funcione en mi dominio?

Pues vamos a ello. Para ello os voy a dejar aquí este tutorial que es increíblemente sencillo de seguir. Os voy a dejar esta URL. De hecho, este tutorial está hecho con Notion. Todo esto es Notion y por aquí.

A ver si lo encuentro por aquí. Aquí están los pasos que tengo que seguir. Simplemente voy a ir desmarcado y vamos a seguir los pasos.

Lo primero que me dice que entre Notion y que lo haga público y que además que lo puedan leer los buscadores.

Esto ya lo tengo hecho. Lo segundo es tener un dominio que yo quiera registrado a quien me dice que lo puedo comprar con Namecheap o donde yo quiera. Perfecto. Y el primer paso.

Esto, evidentemente, si quiero mi página con mi propio dominio tengo que tenerlo. Esto es evidente.

Me voy al paso 1 y me dice que necesito tener una cuenta en Cloudflare.

Cloudflare es gratuita y yo ya la tengo activa y Cloudflare te va a permitir manejar los DNS del dominio, por lo que da igual donde tengas comprado el dominio, porque vas a poder añadirle los DNS de Cloudflare. Yo en mi caso el dominio joqueoferta.com lo tengo en ionos.

Pues simplemente me creo la cuenta de Cloudflare, la creáis, es gratis y entonces aquí vais a añadir el dominio.

En mi caso voy a decirle que agregar un sitio nuevo y le voy a decir que es JoQueOferta.com le digo que agregar y ahora va a detectar, bueno primero me pregunta qué cuenta quiero por supuesto la gratuita y me va a registrar qué DNS existen y me va a encontrar que esté está dirigiendo ahora mismo vas a ir a SiteGround, pero me va a escanear los DNSs.

Aquí lo podéis ver. Me trae todos estos DNSs que yo todos estos DNS los puedo eliminar o conservar.

En mi caso no los necesito, por lo que yo los puedo eliminar. Como os digo, si fuera a conservarlo lo puedo conservar. En mi caso todo esto no lo necesito, todos estos los puedo eliminar.

Y aquí si nos damos cuenta, si me vuelvo al tutorial aquí me dice, que me dé alta en Cloudflare. Todo esto ya os lo he comentado, que añadamos el dominio. Todo esto lo tenemos y me dice que le ponga un registro A que sea para todo el dominio, para root, es decir, para todo dominio y que sea 1.1.1.1.

Por lo que vengo aquí agrego un registro le digo que sea del tipo A, aquí pongo la arroba porque si os dais cuenta pone arroba para root le digo arroba y aquí le pongo 1.1.1.1 y le doy a guardar.

Qué es lo que me decía el tutorial, perfecto. Voy a cerrar aquí todo lo que no necesito para no volverme loco y vamos a seguir. Vale, vamos a ver el tutorial lo he añadido, perfecto y una vez añadido le vamos a dar a continuar en Cloudflare.

Bueno, para que veáis que esto no funciona, si yo me vengo a Joqueoferta.com vais a ver que viene esta página de SiteGround de la página que ahora mismo no está accesible.

Perfecto. Vengo a Cloudflare, le doy a continuar y me dice que ahora tengo estos DNS que los cambio por estos nuevos, por lo que en mi caso me vengo a Ionos que es donde tengo puesto el dominio.

Vosotros al que tengáis y le voy a dar editar los DNSs y voy a quitar los de SiteGround por los de Cloudflare. Simplemente lo cambio. Le doy a guardar.

Perfecto, me dice que se ha hecho, tardará un poquito, pero espero que a lo largo de ese tutorial ya funcione. Siguiente, Vamos a ver qué más nos dice.

Bueno, aquí nos dice que hagamos lo que acabo de deciros. Si hago clic en la imagen, me la agranda para que lo pueda ver bien. Esto ya lo tengo hecho, me dice. Lo de los DNS que los añada en mi registrador. Yo ya lo he hecho también.

Todo esto está perfecto y aquí me dice que perfecto, que chequé el Name Server, en este caso perfecto le dio a verificar y en este caso le voy a decir aquí me viene como una guía rápida de Cloudflare, no la necesito, por lo que le digo terminar más tarde.

Estupendo. Y aquí, en este. En este caso voy a dejar esto aquí y vamos a ir siguiendo el tutorial. Lo siguiente que me dice estoy en el punto 8 es que me vaya al certificado y elija uno flexible, por lo que me vengo aquí a el SSL y en este caso en vez de completo.

Le digo flexible. Yo voy a hacerle caso al tutorial paso a paso, porque el que lo ha escrito sabe, sabe más que yo.

Perfecto, esto lo dejo flexible y ahora me dice que quiero usar siempre https y además que quiero que para que vaya todo más rápido, quiero que esté todo Auto Minify, porque de esta forma va a ocupar menos mi página web.

certificado flexible cloudflare


Entonces, en este caso tengo que encontrar estas dos opciones y en este caso vamos a ver dónde están.

Vengo aquí certificado a ver si está aquí. Aquí está. Usar el certificado siempre lo dejo marcado.

Esto está estupendo. Lo de minify no está por aquí, por lo que vamos a ir buscando por aquí estará en caché. Creo que estaba por aquí que lo estaba revisando antes. En una de estas opciones tiene que estar. Vamos a ver dónde está el minify cada vez que no estoy leyendo. A ver si está aquí, porque las opciones las han cambiado de sitio y tengo que aquí vamos a ver un speed.

No, aquí no está optimización, aquí está en optimización. Tengo estas opciones que me viene en el tutorial que esto no especificaba en qué lugar concreto. Entonces me ha tocado buscarlo, pero habéis visto que no es tan complicado que lo he encontrado.

minify cloudflare


Vamos a ver qué está. Sí, está todo, si está todo hecho. Vamos a comprobar si ya está todo bien. Vale, está en cola para para revisarlo.

Ya estamos en el mismo punto que estamos aquí.

Perfecto. Y ahora viene la parte complicada. Lo bueno es que la parte complicada lo hace esta página por nosotros. Sólo tenemos que copiar y pegar. Y ya está, entonces. Ahora me dice que seleccione la página La Worker Page. Entonces me vengo aquí, hago clic en Worker y aquí vamos a ver qué más me dice.

Vamos. Aquí me pone que haga clic en Manejar los Worker, que es administrar Workers, que hago clic aquí y me aparece esta página con uno que ya tengo creado de otra web.

Workers cloudflare


Es decir, que aquí irán apareciendo todas las cosas que haga por cada una de las webs. En este caso tendré que darle a crear un nuevo worker perfecto. Y aquí elige un nombre por mí. Yo esto no lo tengo porque cambiar, lo dejo.

Así que me lo está diciendo aquí que elija un subdominio. En este caso lo voy a dejar como está. Le digo confirmar.

Como os he comentado, me va a decir que que elija un plan.

La primera vez te aparece una opción de si quieres la versión de pago o gratuita, como ya lo hice con éste. A mi no me sale, simplemente me llega a esta pantalla. Vamos a seguir viendo el tutorial. Como os digo esto la primera vez os sale pues elegís la gratuita.

Todo está perfecto. Seguimos bajando. Crear un worker que es donde estoy ahora y estoy en esta pantalla. Si os dais cuenta estoy en esta pantalla, que es la misma que tengo yo.

Vamos a ver qué más nos dice. Vale, este es el paso 1, vámonos al paso 2 y aquí me dice que ponga en esta. Aquí me va a dar una serie de un código que es el que tengo que pegar en mi página de Cloudflare. Me dice aquí que ponga el nombre del dominio.

El nombre del dominio era JoQueOferta.com. Lo escribo aquí Joke oferta punto com.

Y aquí abajo me dice que le ponga la url de Notion. Para eso me vuelvo a Notion. Me vengo aquí y copio la url y una vez copiada la pego aquí abajo. Perfecto. Y ahora si le digo que me despliegue.

Esto tiene una cosa muy interesante porque puedo poner el título de la página que yo quiera descripción, etcétera.

Pero lo que más me interesa es que a partir de aquí que puedo poner mi código de Google Analytics para que esta página hecha con Notion también yo pueda saber qué visitas tiene. En este caso lo pegarían esta en esta casilla.

De hecho, la otra página que he hecho lo tengo hecho de esa forma. Le digo copiar el código y me vuelvo a mi web. Borro todo esto, si no lo borramos nos fallará y pego a ver y le doy a pegar toda el código que me da esta página, simplemente lo copiado.

script web notion


Fijaros, aquí está mi página en la web de Notion. Bueno, esto lo hace todo por mí. Le doy a guardar e implementar. Me dice que el word que está disponible aquí, le digo que guardar, implementar, que lo veo perfecto como se estaba comentando y vamos a ver qué más me dice.

Vale, aquí me dice que lo pegue, que es lo que acabo de hacer y yo os diría que ya hemos acabado aquí. Me dice que salvar y empezar a funcionar.

Vamos allá a guardar e implementar. Ya lo tengo, ya lo tengo hecho. Me vuelvo pa atrás. Y ahora sólo me faltaría a ver que está lo tenemos aquí. Vamos a venirnos a los worker. Veis que tengo dos?

El que ya tenía y ahora tengo tengo otro que es el que acabo de crear, que es este de aquí. Perfecto. Y ahora vamos a ver qué otra que otras cosas nos dice. Vale. A esto lo tengo perfecto.

Y después de salvar me dice que vaya a ver aquí, que vale. Me dice que vuelva a que haga clic aquí a la página principal. Hago clic en Workers.

Y aquí fijaros que me pone agregar ruta, hago clic aquí donde pone Agregar ruta y me pregunta lo que tengo, lo que quiero añadir en este caso vamos a ver qué me dice. La ayuda me dice que ponga arriba mi dominio seguido de un asterisco. Vamos a hacerlo.

Es decir, le digo aquí también viene aquí la ayuda, le digo  y aquí elijo el worker. Tengo que elegir cuál como tengo dos vosotros. Este problema no lo tenéis, pero como yo tengo dos, tengo que comprobar cuál de los dos es.

Entonces vamos a comprobarlo. Voy a cancelar un segundito. Vámonos aquí me vengo a administrar Workers y el que voy a usar es el que se llama shiny. Vámonos pa atrás.

Agrega ruta a que pongo joqueoferta.com barra tal y aquí pongo shiny para no confundirme. Hago clic en Guardar. Y vamos a ver qué más nos dice nuestro amigo. Me dice que guarde y que ya estaría. Me dice que Guarde, que ya estaría. Por lo que vamos a ver si es verdad.

Aquí ya he guardado, se le asignó y aquí en principio creo que está todo bien hecho. Entonces ahora si los DNS se han cambiado, todo está bien.

Debería de ver aquí la página de Notion. Vamos a ver si es así, vamos a recargar. No funciona, no funciona. Vamos a recargar un poquito. Voy a volver a escribir. Voy a poner aquí. Https: Puede tardar un poquito el tema. Mira, pensé que si voy a entrar como con incógnito.

A veces cuando hacéis estas pruebas los DNS tardan un poco, pero parece que aquí está. Simplemente había que recargar un poco. He entrado con mi incógnito para comprobar que funciona y aquí tengo mi página JoQueOferta.com.

Puedo crear mis cupones, mi página de afiliación, mi página personal, mi curriculum, lo que yo quiera. Y todo esto funciona estupendamente. Como podéis ver, puedo ir pa'trás, podemos trabajar, hacer clic y cada uno de los de los elementos.

Y por supuesto, es muy fácil, muy fácil de modificar. De hecho, voy a hacer una pequeña prueba porque hay algo que me ha vuelto loco y es lo siguiente voy a poner esto aquí chiquitín a la a la izquierda y voy a poner Notion.

Lo voy a poner un poquito a la derecha porque quiero que veáis que en tiempo real, según voy escribiendo ahora, que esto recargue. Vamos a ver si se escribe porque automáticamente las pruebas que he hecho cambia sin que yo tuviera ni que refrescar.

Voy a refrescar, pero vais a ver que esto cambia en el mismo momento. Y como os decía, quizá tenga que ver cómo estoy de incógnito. Pero antes, en mis pruebas que he estado haciendo, no hace falta ni refrescar para ir viendo los cambios. No me digáis que no es maravilloso.

Voy a quitar esto. Vamos a recargar aquí, todavía aquí no, en incógnito habéis visto que sí, aquí me falta. Bueno, como os digo, me parece que en muchas ocasiones nos complicamos mucho para hacer una página web.

No digo que no haya que hacerlo yo mismo me complico o hago páginas más profesionales, pero en este caso hacer una página con Notion os va a quedar realmente bien.

Me parece que es muy interesante porque por ejemplo, en este caso, si vosotros queréis añadir una imagen, si queréis hacer cualquier cosa, simplemente se arrastra y en Notion os lo va a coger.

Se hace super rápido, super sencillo y sobretodo hace páginas muy visuales como estáis viendo en pantalla y además cualquier persona puede manejar una una herramienta de creación de notas y con eso ya estamos haciendo nuestra página web.

Como os digo, espero que os haya gustado. Profundizaremos en todo esto y os dejo todos los enlaces debajo del vídeo. Nos vemos en el siguiente tutorial. Hasta luego.


Aprende a crear proyectos reales
Aprenderás como hacer proyectos reales desde cero. Olvida todo lo que has aprendido hasta ahora, no aprendas para hacer realidad tu proyecto, haz realidad tu proyecto mientras aprendes 🚀
EMpieza tu proyecto ahora