Phenquestions
Este tutorial le mostrará cómo puede configurar un blog simple usando un generador de sitio estático que es muy rápido y fácil de usar.
¿Qué es un SSG??
SSG, o Static Site Generator, es una aplicación web que convierte el contenido dinámico de una página web en contenido estático que normalmente se almacena localmente. Los generadores de sitios estáticos no requieren bases de datos ni backends, lo que elimina la necesidad de aprender a codificar. Se centra principalmente en escribir y presentar el contenido.
SSG vs. CMS
La forma más popular de crear sitios web y administrar contenido es utilizando CMS o sistemas de administración de contenido como WordPress, Drupal, Joomla, etc.
Los sistemas CMS funcionan creando y administrando contenido directamente usando una interfaz interactiva. Dado que los datos en un CMS se recuperan de la base de datos, los CMS son muy lentos ya que el contenido se recupera y se sirve como contenido dinámico. Los sistemas CMS también son propensos a las vulnerabilidades de seguridad, ya que dependen de complementos externos escritos por otros desarrolladores para aumentar la funcionalidad.
Por otro lado, los generadores de sitios estáticos funcionan creando contenido en medios fuera de línea, como editores de texto, y muestran la vista de página final después de la publicación. Dado que el contenido se procesa localmente, sin necesidad de una base de datos, la página se procesa más rápido y las velocidades de carga son increíblemente rápidas.
Los generadores de sitios estáticos están hechos de código precompilado que actúa como motor para representar el contenido publicado.
Cómo crear un blog estático con Hexo
Una de las opciones populares para construir un sitio estático es Hexo.
Hexo es una aplicación SSG simple, rápida y potente escrita en NodeJS. Aunque existen otras opciones para crear un sitio estático, Hexo le permite personalizar su sitio e integrar varias herramientas.
Veamos cómo podemos configurar un sitio estático simple con Hexo.
Instalación de Hexo
Antes de que podamos construir un sitio, debemos configurar los requisitos de hexo e instalarlo. Para esto, requerimos NodeJS y git.
Empiece por actualizar su sistema:
sudo apt-get updatesudo apt-get upgrade
Una vez que tenga su sistema actualizado, instale git
sudo apt-get install gitA continuación, instale nodejs desde nodesource usando el comando:
curl -sL https: // deb.fuente de nodos.com / setup_14.x | sudo -E bash -apt-get install -y nodejs
Una vez que tenga Nodejs instalado, podemos proceder a instalar hexo usando el comando:
npm install -g hexo-cliTrabajando con Hexo
Una vez que haya instalado hexo, puede crear un sitio y publicar contenido. Veamos cómo trabajar con Hexo. Tenga en cuenta que esta es una guía rápida y sencilla. Consulte la documentación para obtener más información.
Creando un sitio
Para crear un nuevo sitio hexo, use el siguiente comando:
hexo init HexoSitecd HexoSite
npm install
Comprensión de la estructura del directorio Hexo
Una vez que inicialice un nuevo sitio Hexo, obtendrá una estructura de directorio como la que se muestra a continuación:
-rw-r - r-- 1 cs cs 0 8 de febrero 20:51 _config.paisaje.yml-rw-r - r-- 1 cs cs 2439 8 de febrero 20:51 _config.yml drwxr-xr-x 1 cs cs 4096 8 de febrero 20:51 node_modules
-rw-r - r-- 1 cs cs 615 8 de febrero 20:51 paquete.json
-rw-r - r-- 1 cs cs 56716 8 de febrero 20:51 paquete-bloqueo.json drwxr-xr-x 1 cs cs 4096 8 de febrero 20:51 andamios drwxr-xr-x 1 cs cs 4096 8 de febrero 20:51 fuente drwxr-xr-x 1 cs cs 4096 8 de febrero 20:51 temas
El primer archivo es _config.yml contiene todas las configuraciones para su sitio. Asegúrese de modificarlo antes de implementar su sitio porque contendrá valores predeterminados.
El siguiente archivo es el paquete.json que contiene los datos y las configuraciones de la aplicación NodeJS. Aquí encontrará los paquetes instalados y sus versiones.
Puede obtener más información sobre el paquete.json de la página de recursos a continuación:
https: // documentos.npmjs.com / cli / v6 / configuring-npm / package-json
Creando un Blog
Para crear un blog simple en hexo, use el comando:
nuevo blog de hexo "Blog de Hello World"Una vez creado, puede archivar el archivo de rebajas en el directorio / source / _posts. Deberá utilizar el lenguaje de marcado Markdown para escribir contenido.
Creando una nueva página
Crear una página en Hexo es simple; usa el comando:
página nueva hexo "Página-2"La fuente de la página se encuentra en / source / Page-2 / index.Maryland
Generando y sirviendo contenido
Una vez que publique su contenido en hexo, deberá ejecutar la aplicación para generar el contenido estático.
Utilice los siguientes comandos:
$ hexo generarINFO Validación de configuración
INFO Iniciar procesamiento
INFO Archivos cargados en 966 ms
INFO generado: archivos / índice.html
INFO generado: página-2 / índice.html
INFO generado: archivos / 2021 / index.html
INFO generado: índice.html
INFO Generado: archivos / 2021/02 / index.html
INFO generado: js / script.js
INFO generado: fancybox / jquery.caja lujosa.min.css
INFO Generado: 2021/02/08 / Hello-World-Post / index.html
INFO generado: css / style.css
INFO Generado: 2021/02/08 / hello-world / index.html
INFORMACIÓN generada: css / fonts / FontAwesome.otf
INFORMACIÓN generada: css / fonts / fontawesome-webfont.woff
INFORMACIÓN generada: css / fonts / fontawesome-webfont.eot
INFO generado: fancybox / jquery.caja lujosa.min.js
INFORMACIÓN generada: css / fonts / fontawesome-webfont.woff2
INFORMACIÓN generada: js / jquery-3.4.1.min.js
INFORMACIÓN generada: css / fonts / fontawesome-webfont.ttf
INFO generado: css / images / banner.jpg
INFORMACIÓN generada: css / fonts / fontawesome-webfont.svg
INFO 19 archivos generados en 2.08 s
Para servir la aplicación, ejecute el comando:
$ hexo server INFO Validando config INFO Iniciar procesamiento INFO Hexo se está ejecutando en http: // localhost: 4000 . Presione Ctrl + C para detener.Conclusión
Esta rápida y sencilla introducción le ha mostrado cómo utilizar el sitio estático de Hexo. Si necesita más información sobre cómo trabajar con Hexo, consulte la documentación principal que se proporciona a continuación:
https: // hexo.io / docs
