Hasta no hace mucho, cuando necesitaba hacer una nueva web tenía una cosa clara, la haría en WordPress.
Ahora, han salido una infinidad de herramientas que, dependiendo el tipo de web, es interesante valorar. Concretamente para crear webs o blogs sencillos los sitios web estáticos son muy interesantes.
En Kinsta, ya hemos hablado de muchas soluciones para crear una web estática, algunas de ellas son Hugo y Astro. Ambas opciones son realmente buenas para hacer Sitios Estáticos. El único problema de Hugo, de Astro, y de muchas otras herramientas, es que hacen falta unos conocimientos básicos del uso de la terminal y de programación.
Si quieres aprovechar las ventajas de los sitios estáticos te puedes encontrar con una barrera técnica difícil de superar. Pero no te preocupes, con este artículo lo solucionaremos. En esta guía vamos a ver cómo podemos crear una web estática sin conocimientos avanzados y desde la comodidad de un programa instalado localmente en nuestro ordenador.
Hoy vamos a hablar de Publii, una herramienta para hacer webs estáticas de una forma realmente sencilla con una barrera de entrada mínima.
Vamos a ver cómo podemos crear un blog con Publii, con un alojamiento de primer nivel, fácil y totalmente gratis. ¿Te parece demasiado bueno para ser verdad? Sigue leyendo y lo verás.
¿Qué es Publii?
Publii es un CMS (Gestor de contenidos) de Software Libre fácil de usar que nos proporciona todo lo necesario para crear nuestro blog, sitio de documentación o portfolio.
Una característica que llama mucho la atención de Publii es que funciona desde un programa de escritorio, por lo que, a diferencia de casi todas las otras soluciones, trabajas desde la facilidad (y velocidad) de un programa instalado localmente en tu ordenador, el cual está disponible para Windows, Linux y Mac.
En vez de ser una herramienta del lado del servidor, Publii, se instala en local y solo subiremos a internet el sitio estático generado.
Esta característica convierte a Publii en una solución muy segura ya que solo subiremos a internet ficheros html estáticos. Todas las piezas dinámicas de Publii no salen de tu ordenador local con las ventajas a nivel de seguridad y velocidad que ello conlleva.
Publii se define a sí misma como una solución centrada en:
La Privacidad
No recopila ningún tipo de información personal por lo que los sitios hechos con Publii cumplen con la GDPR y CCPA desde la base, sin necesidad de configuraciones especiales.
SEO y Velocidad
Los sitios hechos con Publii son extremadamente rápidos. Al no usar bases de datos ni elementos innecesarios, las webs realizadas con Publii literalmente vuelan.
Algunas de las funcionalidades SEO que vienen por defecto en Publii:
- Control de indexación de páginas
- Marcado de datos estructurados
- URLs Amigables
- Sitemap
- Etiquetas de Open Graph
- Conversión automática de imágenes JPG/PNG a formato WebP
- Y velocidad, mucha velocidad de carga
Instalación de Publii
Como hemos comentado más arriba, Publii dispone de un programa de escritorio para crear y mantener los blogs o webs generadas. Lo puedes descargar desde aquí.
La instalación va a depender del sistema operativo del que dispongas pero en todos los casos la instalación consistirá en hacer un par de clics.
Instalación de Publii en Windows
En Windows, una vez descargado el programa Publii.exe, haces doble clic en él y te encontrarás con las siguientes pantallas:
Una vez que haces clic en Acepto verás la siguiente pantalla:
A partir de esta pantalla la instalación en los 3 sistemas operativos es idéntica. Cuando haces clic en aceptar, inicias la creación y configuración de tu web.
Instalación de Publii en MacOS
En MacOS, una vez bajado el programa, hay que hacer doble clic en el fichero Publii-version.dmg y una vez hecho, debes arrastrar el fichero Publii.app a la carpeta Aplicaciones de tu ordenador.
Ahora te vas a encontrar con las mismas pantallas que te he mostrado para el proceso en Windows.
Instalación de Publii en Linux
En linux es un poco distinto dependiendo de la distribución que uses, en mi caso, uso la distribución Pop OS basada en Ubuntu.
En la web de Publii tienes 3 versiones de linux que puedes bajar:
- Publii.AppImage
- Publii.rpm
- Publii.deb
He utilizado la versión Publii.deb y es tan fácil como hacer doble clic en el fichero y pulsar el botón de instalar:
Te encontrarás con las mismas pantallas que he mostrado en el proceso de instalación de Windows y de MacOS.
Este tutorial está realizado desde Linux pero las pantallas serán prácticamente idénticas sea cual sea el sistema operativo que estés usando.
Creando tu Primera Web
Ahora que ya has instalado Publii localmente en tu ordenador ya has hecho lo más difícil.
La primera vez que lo ejecutas verás la siguiente pantalla:
En ella tienes que elegir un nombre para tu web y el autor de la misma.
Cuando lo haces, Publii te deja elegir entre tres editores distintos para crear y editar tu contenido:
- WYSIWYG Editor
- Block Editor
- Markdown editor
WYSIWYG editor
WYSIWYG es un acrónimo de «What You See Is What You Get», que en español significa «Lo que ves es lo que obtienes». Es decir, ves en todo momento el resultado final mientras creas y editas tu contenido.
Es el editor de texto más reconocido por todo el mundo, es el que usa Microsoft Word entre muchos otros programas.
Estoy seguro que los botones para dar formato del editor WYSIWYG te son muy reconocibles:
Hasta no hace mucho, el editor WYSIWYG era el editor por defecto en WordPress. Hasta que se ha cambiado al editor por bloques del que hablaremos a continuación
Block editor
Como hemos comentado anteriormente WordPress se ha pasado del editor WYSIWYG al editor por bloques, también conocido como Gutenberg.
He de reconocer que cuando salió el editor de bloques en WordPress no me gustaba y rápidamente instalé el plugin del editor clásico. Ahora ya me he acostumbrado y me encanta.
El editor de bloques no solo ha sido adoptado por WordPress sino que herramientas como Notion lo han popularizado enormemente.
En este tipo de editor cada párrafo es tratado como una entidad que puedes arrastrar fácilmente hacia arriba o hacia abajo del documento y es mucho más versátil a la hora de maquetar y diseñar tu contenido.
Cuando estás usando el editor por bloques en Publii puedes cambiar el formato del texto haciendo clic en la tecla de tabulador antes de empezar a escribir:
Markdown editor
Si te gusta maquetar tu contenido sin soltar los dedos del teclado, Markdown es para ti.
Al principio puede parecer raro o complicado ya que usas etiquetas para dar formato al texto pero cuando te acostumbras no lo cambias por nada.
Markdown es una de mis debilidades, me encanta porque te permite enfocarte en el texto, ya que el formato se maneja de forma separada y por su facilidad a la hora de convertir tu contenido a HTML o PDF.
Aquí puedes conseguir un poco de ayuda con el marcado de markdown soportado por Publii.
Cuando creas un post con uno de los editores, este se configura como predeterminado, pero puedes cambiar entre los 3 editores muy fácilmente haciendo clic en la flecha que aparece a la derecha de Agregar nueva entrada en la pantalla de Posts.
Crear Contenido en Publii
Ahora que ya hemos visto los 3 editores posibles, elegimos el que más nos guste y empezamos a crear contenido desde el botón Agregar nueva entrada y entras en una pantalla muy minimalista donde puedes empezar a crear tu contenido:
La estructura de la pantalla es muy minimalista pero esconde más funcionalidades de las que se pueden ver a simple vista. En la captura de pantalla anterior puedes ver un icono de un engranaje, si haces clic en él puedes ver muchas más opciones, tanto de visualización como para mejorar tu posicionamiento orgánico en los buscadores:
Ahora que ya sabes crear el contenido para tu página vamos a ver como personalizar tu web en Publii.
Personalizar Publii
Cambiar el idioma en Publii
Cuando hablamos de cambiar el idioma, tenemos que tener en cuenta que hay 2 características distintas del idioma que podemos cambiar:
- Interfaz de Publii
- Idioma del contenido de la página
Es posible que quieras ver la interfaz en tu idioma natal, pero quieras escribir en el idioma de tu público objetivo.
En Publii tenemos la posibilidad de configurar por separado ambas características.
Interfaz de Publii
Para llegar a la página de la configuración del idioma del interfaz tienes que hacer clic en los 3 puntitos de la esquina superior derecha y hacer clic en “Languages”
Por defecto encontrarás la interfaz de Publii en inglés y con sólo dos idiomas preinstalados: el Inglés y Polaco. Pero no te preocupes, puedes instalar muchos más idiomas.
La propia comunidad de Publii trabaja en las traducciones de la interfaz y las pone a disposición de todo el mundo, en esta página de GitHub puedes ver el estado de las traducciones de cada idioma.
Al momento de escribir este artículo, la única versión del Español disponible es la Chilena. Para instalarla tienes que hacer clic en “Get more languages”. Al hacerlo se abrirá la página de GitHub comentada anteriormente y descargamos la traducción del idioma que necesitemos.
Ahora hacemos clic en el botón con el texto “Install language” y se nos abrirá un cuadro de diálogo con el explorador de archivos de nuestro ordenador y seleccionamos el fichero de traducción que previamente hemos bajado de GitHub.
Tan solo nos falta hacer clic en el nuevo idioma para que toda la interfaz cambie de idioma.
Idioma de la web
Aunque es muy cómodo poder configurar la interfaz de la herramienta en nuestro idioma materno lo que realmente es crucial es configurar el idioma del blog para que Google entienda en qué idioma estamos escribiendo y pueda posicionar nuestro contenido como merece.
Para hacerlo tenemos que hacer clic en Configuración del Sitio en las opciones de la barra lateral izquierda.
Puedes comprobar en qué idioma tienes configurada la web haciendo clic en Guardar y previsualizar y cuando se muestre tu web, hacer clic en el botón derecho → Ver código fuente de la página:
Cambiar la Plantilla de nuestra Web
En Publii, por defecto, sólo viene una plantilla instalada llamada Simple pero hay muchas más en su marketplace, algunas gratuitas y otras de pago.
Instalarlas es muy fácil, solo tienes que navegar hasta la que quieres usar y en la esquina superior derecha verás un botón con el texto Download, haces clic y se descargará la plantilla.
Ahora, dentro de Publii navegamos hasta los 3 puntitos de la derecha de la página principal de la aplicación de Publii y hacemos clic en Temas.
Hacemos clic en el botón Instalar tema y se nos abrirá el explorador de archivos de nuestro ordenador, seleccionamos el fichero de la plantilla previamente descargado:
Una vez instalada la plantilla nueva tenemos que activarla y para ello vamos a Configuración del sitio y en Tema actual seleccionamos la nueva plantilla:
Y ahora si haces clic en Guardar y Previsualizar deberías de ver tu web con el nuevo diseño.
Instalar Plugins en Publii
Los plugins o complementos se instalan de forma similar que hemos hecho con las plantillas.
En la pantalla principal de Publii hacemos clic en los 3 puntitos de configuración y hacemos clic en Plugins o complementos según el idioma que tengamos configurado la interfaz.
Primero nos descargamos el plugin que queremos utilizar desde Obtener más complementos, lo que nos lleva al marketplace de plugins.
Del mismo modo que con las plantillas, hay plugins gratuitos y de pago.
Nos descargamos el que queremos usar y lo instamos desde el botón Instalar complemento (Plugin):
Cada plugin tendrá su propia configuración, en el caso del plugin que estoy instalado para hacer la prueba, Feather Icons, podemos encontrar sus opciones de configuración en Herramientas y complementos.
Cómo Desplegar Publii con Kinsta
Hemos visto cómo podemos crear un blog en local en un abrir y cerrar de ojos. Ahora, lo prometido es deuda, vamos a ver cómo podemos alojarlo gratuitamente gracias al alojamiento gratuito de sitios estáticos de Kinsta.
Pasos Previos
Para poder alojar tu web estática hecha con Publii necesitas:
Subir tu web a GitHub
Lo primero que tenemos que hacer es crear un repositorio en GitHub, donde almacenaremos nuestra web.
Una vez creado, tenemos que generar un token de seguridad que usaremos para conectarnos a nuestro repositorio. El token es necesario si tienes configurado 2FA para que tu cuenta permanezca segura.
Para crear el token en Github navegamos hasta Settings → Developer settings → Personal access tokens → Fine-grained Tokens.
En esta pantalla tenemos que rellenar la siguiente información:
- Token name: El nombre que queramos para nuestro token, puedes poner lo que quieras.
- Expiration: El tiempo que queramos que el token esté activo, pasado este periodo deberíamos crear otro para que todo siga funcionando.
- Repository access: Seleccionamos Only select repositories y en el desplegable elegimos el repositorio que acabamos de crear.
- Repository Permissions: En contents marcamos Read and Write. Se marcará automáticamente también Metadata y hacemos clic en Generate token
Nos aparecerá el token, guárdalo de forma segura ya que cuando salgamos de esta pantalla no lo volveremos a ver.
El token generado tiene que tener un aspecto parecido al siguiente:
Ahora, dentro del programa de Publii, navegamos hasta la opción Servidor → Git Respository.
Y nos pedirá la siguiente información:
URL del sitio web: Si ya sabes en qué dominio vas a crear la web puedes ponerlo aquí, en mi caso como todavía no lo sé he marcado Usar URL relativas. De esta forma funcionará en cualquiera dominio en el que decida configurarlo posteriormente.
URL del repositorio: Aquí añadimos la url del repositorio que hemos creado en GitHub.
Puedes ver la URL del repositorio en tu repositorio al hacer clic en Code:
Rama: Por defecto es main, lo puedes ver en la captura anterior, arriba a la izquierda.
- Nombre de usuario: Tu nombre de usuario de GitHub
- Contraseña/Token: El token que hemos creado previamente.
- Confirmar autor: Tu nombre
- Confirmar el correo electrónico del autor: Tu email
- Mensaje de confirmación: El mensaje que aparecerá cada vez que hagamos un commit al actualizar nuestra web.
Guardamos la configuración y si todo ha ido bien, cada vez que hagamos clic en Sincronizar tu sitio web enviaremos nuestra web estática a GitHub.
Ahora solo nos falta un paso, enlazar el código de nuestra web de GitHub con nuestro alojamiento de Kinsta.
Desplegar nuestra web en Kinsta
Estamos a un solo paso de poder tener nuestra web hecha con Publii alojada en Kinsta.
Lo primero que tienes que hacer es entrar en tu cuenta de Kinsta como comentamos anteriormente.
Una vez en Sitios Estáticos hacemos clic en Añadir Sitio y nos encontramos con la siguiente pantalla:
Primero tienes que tener enlazada tu cuenta de GitHub con tu cuenta de MyKinsta. Si no la tienes te aparecerá un botón con el texto Conecta GitHub.
Una vez con tu cuenta de GitHub está conectada, tienes que rellenar los campos de la captura de arriba:
- Repositorio de GitHub: Seleccionamos el repositorio de GitHub donde hemos añadido nuestra web hecha en Publii
- Rama predeterminada: Si no has hecho cambios será main
- Despliegue automático en Commit: Te recomiendo que lo marques, así cada vez que crees contenido o hagas algún cambio en la web y pulses el botón Sincronizar tu sitio web en Publii, automáticamente lo verás reflejado en tu web.
Haces clic en Continuar y te encontrarás con la siguiente pantalla:
Aquí no hace falta que rellenes nada, como la web ya está en formato html no tienes que añadir ningún comando. Simplemente tiene que estar rellenado el campo Archivo Index con index.html que se completa de forma automática.
Hacemos clic en Crear Sitio y tan solo tenemos que esperar para que se haga la magia.
Después de unos pocos minutos tendremos nuestra web alojada en Kinsta en un dominio temporal para que podamos ver la web aunque no hayamos configurado un dominio propio.
Aquí puedes ver el blog creado en mi ejemplo: https://kinsta-publii-articulo-jfvp4.kinsta.page/
Y aquí una captura del resultado final:
Enviar nuevos cambios del Blog al Alojamiento
Añadir nuevos artículos o hacer cambios no puede ser más fácil.
Tan solo tienes que abrir la aplicación de Publii, crear el nuevo contenido o modificar lo que necesites y haces clic en Sincronizar tu sitio web.
Te llevará a una nueva pantalla en la que tenemos que confirmar que queremos sincronizar la web:
Esperamos unos minutos y tendremos los nuevos cambios en nuestra web:
Enlazar un dominio propio con la web hecha con Publii
Enhorabuena, ya tienes alojada tu web estática gratis en Kinsta pero falta la guinda del pastel. Asociar tu propio dominio para que la web se vea completamente profesional.
En este artículo contamos en profundidad cómo puedes configurar tus dominios en Kinsta pero en este tutorial explicaremos de forma resumida cómo puedes asociar un dominio propio a tu web estática recién creada.
Dentro de Kinsta, en la página de configuración de nuestra web estática, puedes encontrar el item Dominios en el menú lateral:
Una vez dentro de Dominios hacemos clic en Añadir Dominio.
Nos aparecerá un popup/modal donde añadimos el dominio que queremos configurar:
Al pulsar sobre Añadir dominio nos llevará a la siguiente pantalla dónde nos indica los pasos que tenemos que seguir para verificar la propiedad del dominio:
Tal como nos indica el texto de la captura, tenemos que ir al registrador donde tenemos el dominio y añadimos los registros DNS TXT que podemos ver en la captura anterior.
En mi caso, tengo el dominio en IONOS y una vez añadidos los DNS tienen esta pinta:
Ahora hacemos clic en el botón OK, hecho.
En la siguiente pantalla nos aparece el último registro de DNS que tenemos que añadir para que todo funcione correctamente:
Al igual que hice con los DNS TXT los añado en mi registrador:
Y listo, ahora, ahora tan solo tenemos que esperar hasta que el dominio apunte al servidor de Kinsta. Puede tardar desde unos pocos minutos a 24 horas.
Una vez que está todo correcto podremos ver nuestra web en el dominio que acabamos de asociar:
Resumen
Ya no hay excusa para tener una presencia online profesional. En esta guía hemos visto cómo podemos crear y alojar un blog de forma sencilla, moderna, profesional y totalmente gratis.
¿Usas sitios estáticos? ¿Conocías Publii? ¿Te ha sorprendido? Estamos deseando que nos cuentes.
Deja una respuesta