soy Kseso y esto EsCSS

Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog)

Guía breve y detallada paso a paso de todo lo necesario para usar Blogspot, el CMS de blogs de Google, como hosting o alojamiento web gratuito de un sitio web (no blog) y que nada indique que estás viendo un blogspot.

Blogger extremo: usar Blogspot como hosting gratis de sitio web (no blog)

·Por Kseso ✎ 15

Quizás alguna vez hayas pensado en usar Blogger como CMS para en base a él construir un sitio web pero no blog. Ya fuese de una sola página o múltiples, y así contar con todas las ventajas que el sistema de Google ofrece.

Quizás también desechases la idea por todo el trabajo, que supusiste, supondría modificar y/o eliminar todo el código innecesario o que pudiese chocar/impedir tus propósitos.

Posíblemente lo que te cuento a continuación no sea nada original. Seguro que alguien antes que yo ya lo logró. La cuestión está en que hace unas fechas se me ocurrió una de esas ideas locas para lograrlo de forma rápida y sencilla. Y cosa extraña ¡funcionó!

Sentemos los principios o requerimientos para que el utilizar el CMS de Blogger para alojar un sitio web no blog tenga sentido. Esto es, sea algo más que una curiosidad y pueda ser utilizado incluso para proyectos reales:

  • Que sólo sea servido lo que necesite el sitio web: Eliminar todo lo innecesario que viene por defecto y genera Blogger. Tanto los scripts, como el CSS, como el marcado HTML, como... cualquier otra cosa.
  • Que lo anterior no suponga más energía que la necesaria para crear el sitio web.
  • Que una vez en línea nada indique que estas viendo un Blogger, excepto por la URL. Y si te asomas al código sólo por un par de detalles menores inevitables en forma de comentarios HTML.

El resultado final de lo que te cuento en este post lo puedes ver en el siguiente enlace a un Blogger creado al efecto:

Ver sitio web alojado en Blogger

Limpiando el código

Este punto consta de dos partes: evitar la carga de los sripts, CSS y metas que genera Blogger. Esto lo tienes detallado en el post "Optimización extrema de un blog en Blogger". Resumiendo:

  1. Borrar o eliminar todo lo que hay en el head
  2. Alterar el cierre del </head>:
    &lt;!--</head>--&gt;</head&gt;
  3. Alterar el cierre del </body>
    &lt;noscript&gt;&lt;!--</body>--&gt;&lt;/noscript&gt;&lt;/body&gt;</html>

Una vez hecho lo anterior si intentamos guardar los cambios Blogger nos tirará un error porque no encuentra al menos un elemento skin. Así que tenemos que incluir lo siguiente para evitarlo:

&lt;style id='page-skin-1'&gt;/* <b:skin><![CDATA[*/]]></b:skin>

Con lo anterior ya hemos hecho lo más tedioso de la limpieza y depuración del código de Blogger. Sólo resta librarnos de todo lo que haya en el body

El cómo hacerlo depende de si nuestra intención es crear un sitio web monopágina (esto es, que sólo tenga el home o índex) o crearemos unas cuantas páginas más.

Si es el primer caso, sólo el home, basta con encerrar todo lo que haya en el body entre el condicional oportuno:

<body> <b:if cond='data:blog.url != data:blog.homepageUrl'> <!-- todo lo que haya en la plantilla --> </b:if> &lt;noscript&gt;&lt;!--</body>--&gt;&lt;/noscript&gt;&lt;/body&gt;</html> <!-- este es el cierre del body modificado en el punto anterior -->

Y ya tenemos todo listo para incluir tras la apertura del body el código html de nuestra web y en el head el CSS y aquellos metas que deseemos, además de los scripts propios si fuesen necesarios dentro de su condicional data:blog.homepageUrl

<b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- nuestro código html --> </b:if>

Resumiendo en código

En forma de código, si sólo necesitas crear una landing page así quedaría tu plantilla:

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html lang='ES-ES'> <head> &lt;style id=&#39;page-skin-1&#39;&gt;/* <b:skin><![CDATA[*/]]></b:skin> <b:if cond='data:blog.url == data:blog.homepageUrl'> <style> /* el CSS de tu landing page */ </style> </b:if> <!-- tus metas, title, links, favicon y otra metainformación que quieras incluir --> &lt;!--</head>--&gt;&lt;/head&gt; <body> <b:if cond='data:blog.url == data:blog.homepageUrl'> <!-- código html de tu página --> </b:if> <b:if cond='data:blog.url != data:blog.homepageUrl'> <!-- todo lo que hubiese en la plantilla --> </b:if> &lt;noscript&gt;&lt;!--</body>--&gt;&lt;/noscript&gt;&lt;/body&gt;</html>

Sitio web multipáginas

Si la necesidad fuese crear además del home un número relativamente bajo de páginas lo más indicado es, creo, usar para ello lo que Blogger llama páginas

Y para ello hemos de realizar una pequeña variación al código previo pues Blogger trabaja con lo que llama widget's e includable's.

También, como en el caso del skin, verifica la existencia obligada de algunos de ellos en el body de la plantilla. Si no los encuentra tira error y no la guarda.

En mi caso, como sólo se trataba de una demo, opté por borrar todo lo que había en la plantilla excepto el b:section principal. Y como no tenía mano (ni ganas de buscarlos) la relación de los includables obligatorios lo que hice fue cerrarlos todos sobre sí mismos excepto los dos necesarios para generar las páginas. Todo ello dentro del condicional:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

La plantilla quedó como ves en la imagen siguiente:

captura pantalla de la plantilla
click en la imagen para verla al 100%
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> <b:section class='main' id='main'> <b:widget id='Blog1' locked='false' title='Entradas del blog' type='Blog' version='1' visible='true'> <b:includable id='main' var='top'> <b:if cond='!data:mobile'> <b:loop values='data:posts' var='post'> <b:include data='post' name='post'/> </b:loop> </b:if> </b:includable> <b:includable id='post' var='post'> <b:if cond='data:post.title'> <h1 class='post-title'><data:post.title/></h1> </b:if> <data:post.body/> </b:includable> ... <b:includable id='nextprev'/> ... </b:widget> </b:section> </b:if>>

Como puedes ver el título o h1 de cada página también está en su condicional. Eso permite dejarlo en blanco en el editor y escribirlo a mano en el cuerpo de la página allí donde mejor nos convenga en cada una.

Y el resultado de ello, usar Blogger como alojamiento para un sitio web no blog lo puedes ver en el siguiente Blogger que creé como demo:

Ver sitio web en Blogger

Y para incluir los estilos de cada página tienes dos opciones:

  1. Incluir en cada página los suyos dentro de un elemento <style>...</style>
  2. Añadirlos en la plantilla (en el head) dentro de un condicional por URL de página

Observación final

Como ya dice el mismo título, esta es una actuación extrema. Al prescindir de practicamente todo el código que hace posible el correcto funcionamiento de Blogger renuncias a la gran mayoría de sus prestaciones.

Así que cada caso un mundo. Si quieres mantener alguna de ellas, en ti está trabajarte el includable correspondiente.

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso