Créer du contenu, obtenir un site Web hautement optimisé
css
et de la balise de modèle css
Installez-le à l'aide de NPM ou de fil avec une commande simple
yarn add contentz
# npm install contentz
Après avoir installé Contentz, vous pouvez l'utiliser avec une commande simple.
contentz build
Qui lira vos fichiers et générera votre site Web pour vous.
Créer un fichier de configuration appelé 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
Option | Description | Requis |
---|---|---|
titre | Le titre du site Web, utilisé dans le <title> et dans la page d'accueil | Non (par défaut: Just another Contentz site ) |
description | La description du site Web, utilisée dans le <meta> et dans la page d'accueil | Non (par défaut: description vide) |
domaine | Le domaine que vous allez utiliser pour héberger le site Web, utilisé dans le flux RSS | Oui |
langue | La langue principale du site Web, utilisée comme report pour les articles et les pages | Non (par défaut: en) |
dépôt | Le référentiel GitHub hébergeant le site Web, utilisé dans le pied de page d'articles et de pages | Non (par défaut: masquer le lien pour modifier) |
Votre adresse e-mail, utilisée sur l'icône d'e-mail dans la page d'accueil | Non (par défaut: icône masquer) | |
patreon | Votre nom d'utilisateur Patreon, utilisé dans la page d'accueil et le pied de page | Non (par défaut: message Hiden Patreon) |
analytique | Vos analyses UA | Non (par défaut: masquer l'analyse) |
sociale | Une liste de vos réseaux sociaux, utilisés pour les relier dans la page d'accueil | Non (par défaut: masquer les icônes sociales) |
navigation | Une liste de pages à lier dans l'en-tête | Non (par défaut: n'ajoutez pas de liens supplémentaires) |
swin | Réglez-le comme false si vous souhaitez désactiver la génération SW | Non (par défaut: true) |
progressif | Réglez-le comme false si vous souhaitez désactiver la construction incrémentielle | Non (par défaut: true) |
icône | Définissez le chemin du Favicon du site Web | Non (par défaut: /static/favicon.png ) |
Pour d'autres réseaux sociaux, envoyez un RP avec une nouvelle icône et ajoutez un moyen de formater l'URL pour cette icône.
Créez un dossier /articles
et mettez vos fichiers .mdx
là-bas, voici un exemple de message.
---
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.
Maintenant, exécutez contentz
et il créera un répertoire /public
avec votre page d'accueil, votre page d'archives et votre article. Vous pouvez accéder à vos archives à /articles/
et chaque article AS /articles/:article/
, dans l'exemple, vous pouvez le voir à /articles/my-super-cool-article
.
Pour les pages personnalisées, créez un dossier A /pages
et placez vos fichiers .mdx
, voici un exemple de page.
---
title : About me
---
Hi! I'm an example page.
Maintenant, exécutez contentz
et il créera un répertoire /public
avec votre page d'accueil et vos pages. Chaque page sera placée au niveau de base du public
, ce qui signifie que votre /pages/about.mdx
pourrait être accessible en tant que /about/
dans votre navigateur et non /pages/about
.
Dans le cas où vous souhaitez avoir une page pour partager des liens intéressants, vous pouvez créer un fichier link.yml
à la racine de votre projet. Ensuite, exécutez contentz
et il générera automatiquement A /link/
Page pour vous avec une liste de tous vos liens. Chaque lien doit avoir url
, title
, comment
et une clé date
. Exemple de fichier:
---
- 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 générera automatiquement une page d'erreur sur /404.html
, lors du déploiement, vous pouvez rediriger les pages non trouvées vers /404.html
.
Si vous déployez sur Netlify, il ramassera ce fichier automatiquement.
Contentz génère un SW automatiquement pour vous, ce SW mettra en cache chaque demande à votre propre site Web (en utilisant location.origin
). Il ne mettra pas en cache à un autre domaine.
Ce comportement pourrait être désactivé en ajoutant sw: false
à votre fichier config.yml
. L'ajout de ce qui supprimera également de sw.js
et load-sw.js
pour éviter l'accès en cache et créer le fichier unload-sw.js
.
Contentz générera automatiquement un flux d'atomes RSS valide avec votre liste d'articles, il sera placé dans /atom.xml
et une balise <meta>
sera automatiquement ajoutée pour vous dans chaque page pour la rendre découvrable.
Si vous souhaitez créer un lien vers des fichiers statiques comme des images, des vidéos, etc. Créez un dossier /static
et y mettez tous vos fichiers. Lors de l'exécution content
ils seront automatiquement copiés sur /public/static
Dans le cas où vous souhaitez ajouter une balise HTML avec des styles personnalisés directement dans votre contenu MDX, vous pouvez utiliser l'hélice css
et la balise d'émotion du modèle css
.
Exemple:
< div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div>
Contentz détectera ce que les fichiers ont changé et mettront à jour uniquement les fichiers connexes. Cela signifie que si vous ajoutez un nouveau lien uniquement /link/
sera régénéré, mais si vous modifiez un article, l'article pages, la liste des articles et le flux RSS seront régénérés.
Dans le cas, vous mettez à jour la configuration ou vous mettez à jour la version Contentz, toutes les pages seront régénérées.
Si vous souhaitez désactiver cette fonctionnalité incremental: false
dans votre config.yml
. Cela invalidera automatiquement les caches précédentes et générera toujours toutes les pages.
Contentz pourrait également générer automatiquement des images sociales (alias Open Graph) à utiliser dans vos articles et pages. Pour l'utiliser, exécutez la commande:
contentz social [path]
Où [path]
est le fichier à utiliser pour générer l'image sociale. Il pourrait également s'agir de plus d'un fichier ajoutant un espace entre eux.
contentz social [path1] [path2]
Un chemin pourrait être un chemin pour un article, un poste ou l'une des pages générées par l'auto.
Si vous souhaitez les générer initialement, exécutez
contentz social home articles links error
Après avoir généré les images sociales, vous verrez un dossier /static/_social
avec vos images, les pages seront placées dans /static/_social/pages
et articles dans /static/_social/article
, les pages spéciales seront à la racine de _social
.
Contentz Support I18n Out of the Box pour les textes fixes du site Web, text comme le support Patreon ou modifier GitHub. Pour modifier la langue principale de votre site Web, définissez la language
clé ou le lang
clé (la langue est préférée) au code de la langue.
Les langues prises en charge sont es
pour l'espagnol et en
pour l'anglais (par défaut à l'anglais en cas de code de langue non valide).
Si votre langue n'est pas prise en charge, ajoutez un JSON avec les messages et chargez-le dans la LIB i18n. Ensuite, envoyez un PR pour l'ajouter.