Tutorial: Cómo colocar certificado SSL gratuito en Blogger con Cloudflare

  • Autor Autor bones
  • Fecha de inicio Fecha de inicio

bones

Eta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Hola Betas! Hoy navegando por el foro vi que el usuario YouTutosJeff tenía una duda con su blog y pues yo también la tenía en su momento.

Como saben, Blogger no permite un certificado SSL para dominios personalizados, pero hay una forma de colocarlo por medio de Cloudflare.

¿Que es CloudFlare, para que sirve, como se usa y con que se come?

Aquí no vamos a repetir lo que ya está posteado y requete posteado en el foro.

El usuario Egicze ya nos hizo ese trabajo con un excelente post que habla sobre Instalación, Configuración e Información de CloudFlare + Wordpress

Si, es para Wordpress, pero el procedimiento de afiliación y configuración en CloudFlare es el mismo, leanlo y cuando lleguen a la parte de configuración en Wordpress se devuelven a este post :encouragement:

Una vez te hayas registrado y tu sitio se encuentre online con los servidores DNS de cloudflare, vamos a procede a activar lo que no interesa que es el certificado SSL para ganarnos esos punticos de SEO que si bien no es mucho, si aporta ese granito a nuestro posicionamiento sobre páginas que no tienen SSL.

El certificado SSL gratuito de nuestro nuevo servidor se auto-renueva cada 6 meses y vamos a activarlo justo ahora 😱nthego: . En el menú de iconos vamos a ir a la pestaña "Crypto", veremos que la opción SSL se encuentra en "Off", vamos a cambiarla a "Flexible" de la siguiente manera:

NOTA: PARA COMPLETAR CON ÉXITO ESTE TUTORIAL ES IMPORTANTE NO SER UN MENSO Y CAMBIAR LAS URL'S QUE APARECEN EN ESTE TUTORIAL POR LA URL DE TU PÁGINA WEB, LAS IMÁGENES LAS SAQUÉ DE VARIAS PÁGINAS Y NINGUNA ES MIA.
:love_heart:





Esto no es tan inmediato en algunos casos y hay que esperar a que se propague y tarda como unas 24 horas máximo. Una vez propagado podremos entrar a nuestro dominio desde https sin problemas, ademas de que en la opción SSL de cloudflare se mostrará como Activada.

Una vez que hayamos comprobado que nuestro dominio funciona a través de https sin problemas, vamos a activar la opción Automatic HTTPS Rewrites, que también se encuentra al final de la pestaña crypto. Esta opción nos ayuda a resolver el contenido mixto, ya que Cloudflare reemplazará los recurso http hacia https automáticamente.



Ahora vamos a crear una regla de tal forma que al entrar a nuestro dominio por http, se re-dirección haciahttps. Para ello vamos a la opción Page Rules en cloudflare, presionamos el botón "Create Page Rule" y en la ventana modal, escribiremos nuestro dominio de esta forma: http://*dominio.com/*. Luego presionamos + Add a Setting y seleccionamos Always Use HTTPS, nos quedaría así:



Ahora presionamos el botón verde "Save and Deploy" para guardar nuestros cambios. Al hacerlo notaremos que se nos agrego una nueva regla, si por alguna razón se encuentra apagada entonces la encendemos:



Finalmente vamos a la opción "Caching" de Cloudflare y purgamos toda la cache de esta manera:



Y listo, ya tenemos configurado https con nuestro dominio de forma gratuita y todo proporcionado por Cloudflare. Pero aquí no hemos acabado, necesitamos hacer algunos cambios en blogger para que funcione correctamente.


Configurar Blogger para https


Actualmente Blogger no acepta HTTPS para dominios personalizados, pero no significa que no podremos ponerlo, hay que cambiar manualmente algunas cosas.

Sitemap.xml con https

La url del sitemap se encuentra con http, esto se puede comprobar facilmente si entras a tudominio.com/robots.txt.

Para cambiar esto debemos modificar nuestro robots.txt desde la configuración de Blogger.

Para cambiarlo, ve a Configuración > Preferencias para motores de búsqueda > Archivo robots.txt personalizado y lo habilitamos marcando en "Si"

pegamos lo siguiente

HTML:
User-agent: Mediapartners-Google
Disallow: 

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.dominio.com/sitemap.xml

Recuerda la nota que puse comenzando el tutorial y cambia dominio.com por tu url 🙂

Dale click a guardar y comprueba que los cambios se hayan realizado accediendo a tudominio.com/robots.txt

Data:name

Uno de los problemas en blogger es que las etiquetas que usamos para devolver una url en nuestras plantillas no detectan https para resolverlo nos dirigimos a Configuración > Tema > Editar HTML y buscamos todas las etiquetas data:name con estas características:

Insertar CODE, HTML o PHP:
<data:blog.url/>
<data:blog.homepageUrl/>
<data:blog.canonicalUrl/>
<data:blog.canonicalHomepageUrl/>
<data:blog.newerPageUrl/>
<data:blog.olderPageUrl/>
<data:blog.searchUrl/>
<data:label.url/>
<data:post.url/>
<data:post.href/>

Deben buscar una por una cada etiqueta y las cambian por:

Insertar CODE, HTML o PHP:
<data:blog.url.https/>
<data:blog.homepageUrl.https/>
<data:blog.canonicalUrl.https/>
<data:blog.canonicalHomepageUrl.https/>
<data:blog.newerPageUrl.https/>
<data:blog.olderPageUrl.https/>
<data:blog.searchUrl.https/>
<data:label.url.https/>
<data:post.url.https/>
<data:post.href.https/>

La cantidad de etiquetas que encuentres dependerá de tu plantilla, debes cambiar absolutamente todas si no quieres que se muestre el mensaje de "Esta página no es segura"

Si las encuentras de esta forma
Insertar CODE, HTML o PHP:
expr:href='data:blog.url'
lo reemplazas con esto
Insertar CODE, HTML o PHP:
expr:href='data:blog.url.https'.
En caso de ser una etiqueta html reemplazas esto
Insertar CODE, HTML o PHP:
<data:blog.url/>
por esto
Insertar CODE, HTML o PHP:
<data:blog.url.https/>
.

Con esto, nuestras variables en nuestras plantillas devolverán una bonita URL con https.

No te olvides del Webmasters Tool

Por ultimo nos vamos a dirigir a las herramientas para webmaster de google y vamos a agregar nuestro sitio pero esta vez con https, enviamos nuestro respectivo sitemap.xml y listo, ya tenemos configurado https en Blogger.

Problemas comunes del https

Un problema bastante común al activar nuestro https es que tengamos contenido mixto en nuestra web, esto lo vemos bastante al colocar imágenes que no están alojadas en nuestro servidor o en Blogger, esto lanza un aviso y nuestra url se cambiará de color verde a amarillo

La mejor solución es reemplazar el protocolo de todos los recursos como imágenes, javascript, css, iframe entre otros. Lo que haremos es cambiar esto:

Insertar CODE, HTML o PHP:
<!-- Protocolo http -->
<script src="http://ejemplo.com/script.js" type="text/javascript"></script>

Y reemplazar http por https, en muchos casos solo es necesario agregar una "s" despues de "http".

Insertar CODE, HTML o PHP:
<!-- Protocolo https -->
<script src="https://ejemplo.com/script.js" type="text/javascript"></script>

Si los recursos no se encuentran alojados en nuestros servidores, es necesario comprobar que el enlace mediante https funcione correctamente. Si no funciona, lo mejor será alojar los archivos en otro servidor que si soporte SSL.

En el foro hay un tutorial sobre como Utilizar Blogger como Hosting de HTML

Recomiendo que lo lean para los que no les funcionen los javascript o cualquier recurso externo en https como comenté arriba ya que Blogger acepta HTTPS para dominios alojados en blogger 🙂

Creo que eso fue todo, no olviden darle a Me agrada :encouragement: no sean leechers 😕

Agradecimientos a la web zkreations por este tutorial. Espero algún día poder comprar su plantilla anime, soy de Venezuela y no tengo acceso a $$ para comprarla, son sólo 5$ si alguien es tan amable de comprarme una estaría eternamente agradecido. :welcoming:

¡Paz y suerte con sus proyectos! pero ahora en https :encouragement:
 
Muy bueno el tutorial, pero recuerda citar la fuente :encouragement:
 
Voy a ver para dos blog , :encouragement: .
 
Excelente tutorial compañero 😛8: manita arriba
 
Muy bueno, muchas graciaas ! 🙂
 
Sólo me gustaría comentar que si no se agregar un certificado para cifrar la conexión entre cloudflare y tu servidor, aún podría haber brechas de seguridad y alguien podría vulnerar los datos que se transmiten.
Lo bueno es que cloudflare te permite usar un certificado autofirmado con open SSL, de ese modo podrás cifrar la conexión en todos los puntos.

Saludos!

Sent from my Power using Tapatalk
 
Lo implementaré en un par de blogs
Gracias por el aporte, un saludo compañero
 
muchisimas gracias, esto me servira para algunos proyectos futuros.
 
Mensaje eliminado
 
Última edición:
Tremendo aporte amigo,. muchas gracias!
 
@bone
y tengo que colocar las dns de cloud. y si es a si no tengo ni idea de donde ya que añadi record para poner el dominio en blogger.
 
Interesante, muy útil gracias.
 
Muy bueno compa, gracias por compartir el tutorial!
 
excelente aporte. gracias
 
Hola el ejemplo que pones es con un subdominio de blogger, no es dominio personalizado eso :witless:
 
Bien estructurado la verdad, lograste llamar mi atención con un par de keys que colocaste. Excelente. :encouragement: