Cómo construir un blog simple con el generador de sitios estáticos hexo
Este tutorial le mostrará cómo puede configurar un blog simple utilizando un generador de sitios estático que sea muy rápido y fácil de usar.
¿Qué es un SSG??
SSG, o generador de sitios estático, es una aplicación web que convierte el contenido dinámico en una página web en contenido estático que generalmente se almacena localmente. Los generadores de sitios estáticos no requieren bases de datos y backends, eliminando así la necesidad de aprender cómo 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 utilizar CMS o sistemas de gestión de contenido como WordPress, Drupal, Joomla, etc.
Los sistemas CMS funcionan creando y administrando contenido directamente utilizando 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 obtiene y 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 medios de contenido fuera de línea como editores de texto y ofrecen la vista de página final sobre la publicación. Dado que el contenido está renderizado localmente, sin necesidad de una base de datos, la página se vuelve 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 un motor para representar el contenido publicado.
Cómo construir 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 poderosa escrita en NodeJS. Aunque hay otras opciones para construir 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, necesitamos configurar los requisitos de Hexo e instalarlo. Para esto, requerimos NodeJs y Git.
Comience actualizando su sistema:
actualización de sudo apt-get
actualización de sudo apt-get
Una vez que tenga su sistema actualizado, instale git
sudo apt-get install git
A continuación, instale NodeJS desde Nodesource usando el comando:
curl -sl https: // deb.nodource.com/setup_14.x | sudo -e Bash -
apt -get install -y nodejs
Una vez que tenga instalado NodeJS, podemos proceder a instalar HEXO usando el comando:
NPM instalación -g hexo -cli
Trabajando 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 simple. Consulte la documentación para obtener más información.
Creando un sitio
Para crear un nuevo sitio hexo, use el comando a continuación:
hexo init hexosite
CD Hexositice
instalación de NPM
Comprender la estructura del directorio hexo
Una vez que inicialice un nuevo sitio HEXO, obtendrá una estructura de directorio como la siguiente:
-RW-R-R-- 1 CS CS 0 Feb 8 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 Lock.JSON DRWXR-XR-X 1 CS CS 4096 8 de febrero 20:51 andamios DRWXR-XR-X 1 CS CS 4096 FEB 8 20:51 Fuente DRWXR-XR-X 1 CS CS 4096 Feb 8 20:51 Temas
El primer archivo es el _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.Archivo JSON que contiene los datos y configuraciones de la aplicación NodeJS. Aquí, encontrará paquetes instalados y sus versiones.
Puedes aprender más sobre el paquete.JSON de la página de recursos a continuación:
https: // documentos.npmjs.com/cli/v6/configuración-npm/paquete-json
Creando un blog
Para crear un blog simple en Hexo, use el comando:
Hexo nuevo blog "Hello World Blog"
Una vez creado, puede archivar el archivo Markdown en el directorio /_posts Directory. Deberá usar el lenguaje Markdown Markup para escribir contenido.
Creando una nueva página
Crear una página en Hexo es simple; Use el comando:
hexo nueva página "página-2"
La fuente de la página está ubicada en/Source/Page-2/Index.Maryland
Generar y servir contenido
Una vez que publique su contenido en Hexo, deberá ejecutar la aplicación para generar el contenido estático.
Use los comandos a continuación:
$ HEXO Generar
Configuración de validación de información
Información iniciar el procesamiento
Archivos de información cargados en 966 ms
Información generada: archivos/índice.html
Información generada: página-2/índice.html
Información generada: Archivos/2021/índice.html
Información generada: índice.html
Información generada: Archivos/2021/02/índice.html
Información generada: JS/Script.js
Información generada: Fancybox/jQuery.caja lujosa.mínimo.CSS
Información generada: 2021/02/08/Hello-World-Post/Index.html
Información generada: CSS/Style.CSS
Información generada: 2021/02/08/hola-world/índice.html
Información Generada: CSS/Fonts/Fontawesome.OTF
Información Generada: CSS/Fonts/Fontawesome-Webfont.ruidón
Información Generada: CSS/Fonts/Fontawesome-Webfont.eot
Información generada: Fancybox/jQuery.caja lujosa.mínimo.js
Información Generada: CSS/Fonts/Fontawesome-Webfont.Woff2
Información generada: JS/JQuery-3.4.1.mínimo.js
Información Generada: CSS/Fonts/Fontawesome-Webfont.TTF
Información generada: CSS/Images/Banner.JPG
Información Generada: CSS/Fonts/Fontawesome-Webfont.SVG
Información 19 Archivos generados en 2.08 S
Para servir a la aplicación, ejecute el comando:
$ hexo servidor información de validación de la información de configuración iniciar información de procesamiento hexo se ejecuta en http: // localhost: 4000 . Presione Ctrl+C para detenerse.
Conclusión
Esta introducción rápida y simple le ha mostrado cómo usar el sitio estático 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/documentos