Crear contenido, obtener un sitio web altamente optimizado
css
y la etiqueta de plantilla css
Instalarlo usando npm o hilo con un comando simple
yarn add contentz
# npm install contentz
Después de haber instalado ContentZ, puede usarlo con un comando simple.
contentz build
Eso leerá sus archivos y generará su sitio web para usted.
Crear un archivo de configuración llamado config.yml
---
title : Sergio Xalambrí
description : Senior Software Engineer and Technical Writer
domain : https://sergiodxa.com
language : en
repository : https://github.com/sergiodxa/personal-site/
email : [email protected]
patreon : sergiodxa
analytics : UA-XXXXXXXXX-2
social :
twitter : sergiodxa
github : sergiodxa
npm : sergiodxa
linkedin : sergiodxa
dev : sergiodxa
meetup : 182915204
navigation :
- name : About
path : /about
- name : Services
path : /services
Opción | Descripción | Requerido |
---|---|---|
título | El título del sitio web, utilizado en el <title> y en la página de inicio | No (predeterminado: Just another Contentz site ) |
descripción | La descripción del sitio web, utilizada en el <meta> y en la página de inicio | No (predeterminado: descripción vacía) |
dominio | El dominio que utilizará para alojar el sitio web, utilizado en el feed RSS | Sí |
idioma | El idioma principal del sitio web, utilizado como retroceso para artículos y páginas | No (predeterminado: EN) |
repositorio | El repositorio de GitHub que aloja el sitio web, utilizado en el pie de página de artículos y páginas | No (predeterminado: ocultar el enlace a editar) |
correo electrónico | Su dirección de correo electrónico, utilizada en el icono de correo electrónico en la página de inicio | No (predeterminado: ocultar icono) |
patreón | Su nombre de usuario Patreon, utilizado en la página de inicio y el pie de página | No (predeterminado: mensaje Hiden Patreon) |
analítica | Tu análisis UA | No (predeterminado: ocultar análisis) |
social | Una lista de sus redes sociales, utilizadas para vincularlas en la página de inicio | No (predeterminado: ocultar íconos sociales) |
navegación | Una lista de páginas para vincular en el encabezado | No (predeterminado: no agregue enlaces adicionales) |
sudoeste | Establecerlo como false si desea deshabilitar la generación SW | No (predeterminado: verdadero) |
incremental | Establecerlo como false si desea deshabilitar la construcción incremental | No (predeterminado: verdadero) |
icono | Establezca el camino del favicón del sitio web | No (predeterminado: /static/favicon.png ) |
Para otras redes sociales, envíe un PR con un nuevo ícono y agregue una forma de formatear la URL para ese icono.
Cree una carpeta /articles
y coloque sus archivos .mdx
allí, aquí hay una publicación de ejemplo.
---
title : My super cool article
description : This is the description of the article
date : 2018-01-01T00:00:00.000Z
published : true
---
This is my content, here I could use markdown or import a component and render it.
Ahora ejecute contentz
y creará un directorio /public
con su página de inicio, página de archivo y artículo. Puede acceder a su archivo en /articles/
y cada artículo como /articles/:article/
, en el ejemplo, puede verlo en /articles/my-super-cool-article
.
Para páginas personalizadas, cree una carpeta A /pages
y coloque sus archivos .mdx
allí, aquí hay una página de ejemplo.
---
title : About me
---
Hi! I'm an example page.
Ahora ejecute contentz
y creará un directorio /public
con su página de inicio y páginas. Cada página se colocará en el nivel base del public
, que significa que su /pages/about.mdx
podría acceder a /about/
en su navegador y no /pages/about
.
En caso de que desee tener una página para compartir enlaces interesantes, puede crear un archivo link.yml
en la raíz de su proyecto. Luego ejecute contentz
y generará automáticamente un /link/
página para usted con una lista de todos sus enlaces. Cada enlace debe tener url
, title
, comment
y clave date
. Archivo de ejemplo:
---
- url : https://sergiodxa.com/
title : Sergio Xalambrí
comment : The website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
- url : https://sergiodxa.dev/
title : sergiodxa.dev
comment : The alias of the website of the creator of Contentz
date : 2019-01-28T19:44:10.945Z
ContentZ generará automáticamente una página de error en /404.html
, al implementarlo puede redirigir las páginas no encontradas a /404.html
.
Si implementa en NetLify, recogerá ese archivo automáticamente.
ContentZ genera un SW automáticamente para usted, este SW almacenará en caché cada solicitud a su propio sitio web (usando location.origin
). No almacenará en caché de la solicitud a otro dominio.
Este comportamiento podría desactivarse agregando sw: false
a su archivo config.yml
. Agregar esto también eliminará DE sw.js
y load-sw.js
para evitar el acceso en caché al y crear el archivo unload-sw.js
.
ContentZ generará una alimentación RSS Atom válida automáticamente con su lista de artículos, se colocará en /atom.xml
y una etiqueta <meta>
se agregará automáticamente para usted en cada página para que sea descubierto.
Si desea vincular a archivos estáticos como imágenes, videos, etc. Cree una carpeta /static
y coloque todos sus archivos allí. Al ejecutar content
se copiarán automáticamente a /public/static
En caso de que desee agregar una etiqueta HTML con estilos personalizados directamente en su contenido MDX, puede usar el accesorio css
y la etiqueta de emoción de la plantilla css
.
Ejemplo:
< div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div>
ContentZ detectará qué archivos cambiaron y solo actualizará los archivos relacionados. Esto significa que si agrega un nuevo enlace /link/
se regenerará, pero si cambia un artículo las páginas del artículo, se regenerará la lista de artículos y la alimentación RSS.
En el caso de que actualice la configuración o actualice la versión ContentZ, todas las páginas se regenerarán.
Si desea optar por no participar en este conjunto de características incremental: false
en su config.yml
. Esto invalidará automáticamente los cachés anteriores y siempre generará todas las páginas.
ContentZ también podría generar automáticamente imágenes sociales (también conocido como gráfico abierto) para que lo use en sus artículos y páginas. Para usarlo, ejecute el comando:
contentz social [path]
Donde [path]
es el archivo que se utilizará para generar la imagen social. También podría ser más de un archivo que agregue un espacio entre ellos.
contentz social [path1] [path2]
Una ruta podría ser una ruta para un artículo, una publicación o una de las páginas generadas automáticamente.
Si quieres generarlos inicialmente, ejecute
contentz social home articles links error
Después de generar las imágenes sociales, verá una carpeta /static/_social
con sus imágenes, las páginas se colocarán en /static/_social/pages
y artículos en /static/_social/article
, las páginas especiales estarán en la raíz de _social
.
Contentz Support i18n fuera del cuadro para los textos fijos del sitio web, texto como el soporte de Patreon o la edición en GitHub. Para cambiar el idioma principal de su sitio web, establezca el language
clave o la clave lang
(se prefiere el idioma) al código de idioma.
Los idiomas compatibles es
para español y en
para inglés (predeterminado al inglés en caso de código de idioma no válido).
Si no es compatible con su idioma, agregue un JSON con los mensajes y cargue en el I18N lib. Luego envíe un PR para agregarlo.