devblog
1.0.0
DevBlog est un modèle de blog entièrement personnalisable conçu pour les développeurs (ou toute autre personne) souhaitant se lancer dans les blogs. Il est prêt à être déployé (en toute simplicité) ou peut être modifié et étendu comme vous le souhaitez. Le blog est entièrement généré de manière statique via GatsbyJS, est livré avec une coloration syntaxique (via PrismJS) prête à l'emploi et intègre, entre autres, un rendu côté serveur.
Pour voir une démo en direct, cliquez ici.
config.js La première étape consiste à installer la CLI GatsbyJS localement. Cela peut être accompli en exécutant la commande npm install --global gatsby-cli
Lors de la création d'un nouveau site Gatsby, la CLI vous permet de spécifier un starter, dans ce cas fournissez simplement l'URL de ce dépôt. Cela peut être accompli en exécutant la commande gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
Maintenant que vous êtes configuré, vous pouvez simplement utiliser le blog ou apporter les modifications nécessaires. Par exemple, exécutez gatsby develop pour démarrer un environnement de développement rechargé à chaud disponible sur localhost:8000 ou exécutez gatsby build pour créer une version de production optimisée. Pour une liste complète des commandes CLI pour Gatsby, consultez leur documentation.
Alternativement, si vous souhaitez simplement créer ce dépôt ou le cloner, il vous suffit alors d'exécuter npm install , puis gatsby develop par la suite et vous serez opérationnel.
La configuration de base peut être effectuée via le fichier config.js à la racine du dépôt du projet. Grâce à ce fichier, vous pouvez modifier la couleur principale du blog, ajouter un auteur et une description du blog, et bien plus encore. Les valeurs par défaut sont les suivantes :
export default {
title : 'Dev Blog' , // Required
author : 'Ryan Fitzgerald' , // Required
description : 'Full-stack Web Developer' ,
primaryColor : '#3498db' , // Required
showHeaderImage : true ,
showShareButtons : true ,
postsPerPage : 5 , // Required
social : {
website : 'https://ryanfitzgerald.ca' ,
github : 'https://github.com/ryanfitzgerald' ,
twitter : 'https://twitter.com/ryanafitzgerald' ,
linkedin : 'https://ca.linkedin.com/in/ryanafitzgerald'
}
} ;Remarque : toute option de configuration étiquetée « Obligatoire » est nécessaire à des fins de présentation de base. Tout ce qui ne contient pas le commentaire « Obligatoire » peut être supprimé si vous ne souhaitez pas qu'il soit utilisé.
Les variables de configuration référencées ci-dessus sont utilisées comme suit :
| Variable | Description de l'utilisation |
|---|---|
| titre | Le titre du blog. Ceci est principalement utilisé pour le titre de la page. |
| auteur | L'auteur du blog. Ceci est utilisé pour le nom de l’en-tête et le titre de la page. |
| description | La description de l'auteur. Ceci est utilisé pour l'en-tête sous l'auteur. |
| Couleurprimaire | La couleur primaire du blog. |
| showHeaderImage | Indicateur pour afficher ou non l'image d'en-tête. |
| showShareButtons | Indicateur pour afficher ou non les boutons de partage sur les réseaux sociaux sur chaque article de blog. |
| messages par page | Le nombre d'articles par page sur la page d'accueil du blog. Ceci est utilisé pour la pagination. |
| sociale | Profils de réseaux sociaux de l'auteur du blog. Actuellement, seuls les sites Web personnels, GitHub, Twitter et LinkedIn sont pris en charge. |
Pour modifier l'image d'en-tête par défaut, remplacez simplement le fichier main.jpg dans le dossier /src .
Pour modifier le favicon par défaut, remplacez simplement le fichier favicon.ico dans le dossier /src .
Tous les articles de blog se trouvent dans /src/pages et sont construits de manière statique une fois la commande gatsby build exécutée. Pour créer une nouvelle publication, créez simplement un nouveau dossier dans /src/pages avec le nom de l'URL que vous souhaitez avoir. Par exemple, si vous souhaitez que l'URL apparaisse sous la forme myblog.com/hello-world vous devez créer le dossier sous la forme hello-world . Une fois le dossier créé, créez simplement un fichier index.md à l'intérieur.
Le haut des pages doit tous contenir la même démarque qui indique à Gatsby les informations nécessaires sur la publication spécifique. Le modèle de base est :
---
title : New Beginnings
date : " 2018-07-01 "
featuredImage : ' ./featured.jpg '
---
This top portion is the beginning of the post and will show up as the excerpt on the homepage.
<!-- end --> Dans l'extrait de code ci-dessus, tout ce qui est requis est le titre et la date . L'image présentée est facultative et peut être ajoutée en ajoutant simplement une image au dossier de pages que vous venez de créer et en faisant référence comme dans l'exemple ci-dessus. La partie extrait est également facultative et si vous n'utilisez pas le marqueur <!-- end --> , le premier morceau du message sera automatiquement utilisé comme extrait.
Ce modèle est livré avec 3 exemples d'articles de blog qui contiennent tout, de l'utilisation d'extraits de code à l'insertion d'images, en passant par l'utilisation d'images et d'extraits en vedette, et bien plus encore.
Une fois que vous êtes prêt à déployer le blog et à le mettre en ligne, plusieurs options s'offrent à vous.
Le déploiement manuel du blog nécessite simplement que vous exécutiez une gatsby build afin de créer une version de production. Après cela, vous pouvez utiliser n'importe quel serveur sur lequel vous utilisez normalement une application React, comme un droplet Digital Ocean ou une instance AWS. Tout ce qui est nécessaire est un moyen de servir les fichiers statiques.
Si vous n'êtes pas familier avec le déploiement d'applications React, il existe un certain nombre d'autres options.
Afin de déployer sur les pages GitHub, vous devez d'abord définir votre préfixe de chemin dans gatsby-config.js . La valeur par défaut est pathPrefix: '/devblog' mais elle doit être remplacée par le nom du référentiel que vous avez choisi. Par exemple, si votre blog est situé sur https://github.com/YOURUSERNAME/myblog et que vous souhaitez qu'il soit déployé sur https://YOURUSERNAME.github.io/myblog , vous devez définir le préfixe de chemin sur pathPrefix: '/myblog' .
Ensuite, exécutez simplement npm run deploy et votre blog sera déployé.
Alternativement, si vous souhaitez le déployer sur https: https://YOURUSERNAME.github.io (c'est-à-dire votre site utilisateur/organisation et non un site de projet), quelques modifications supplémentaires sont nécessaires. La documentation officielle de Gatsby les présente bien ici.
L'une des méthodes les plus simples pour déployer le blog serait d'utiliser Netlify. Pour déployer sur Netlify, cliquez simplement sur le bouton ci-dessous et suivez les instructions.
Les options décrites ci-dessus ne sont pas les seules options disponibles pour déployer le blog. La documentation officielle de Gatsby détaille un certain nombre d'autres options. Pour en savoir plus sur les options de déploiement, cliquez ici.
Sous licence MIT. Voir LICENSE.md pour en savoir plus.
