ryosuke gatsby blog

Portfolio personnel et blog de Ryosuke

Un portefeuille et un blog personnel créés avec le framework Gatsbyjs pour générer un site Web statique à réaction. Il est rapide rapide, SEO et PWA Friendly, et se déploie directement sur un CDN comme GitHub Pages ou Netlify.

Il s'agit d'une alternative JavaScript aux solutions de générateur de sites statiques écrites en Go ou Ruby. Il est également plus étoffé que le blog Gatsby Starter avec des fonctionnalités telles que des archives de blog, une manipulation d'images, une optimisation du référencement et quelques autres.

Structure

• Maison
• Projets
• • Archive de pagination
• Blog
• • Archive de pagination
• Balises
• • Tag Archives
• À propos

Post Format / champs

 ---
title : Deploy a Static React Blog using GatsbyJS and Github
date : " 2018-03-21 "
section : blog
cover_image : " ./[email protected] "
tags : [ 'design', 'development', 'react', 'github', 'gatsbyjs', 'ssg', 'static site generator' ]
---

Your post here

• La section peut être blog ou project .
• Les balises doivent être un tableau
• Le contenu corporel peut inclure Markdown ou HTML.

Plugins

Codepen

Pour intégrer les modules de codepen, copiez simplement le code intégré et supprimez le script JS qui est importé.

Gazouillement

Intégrer de manière transparente les tweets dans les publications en copiant la partie Blockquote du code d'intégration dans votre fichier de démarrage. Ne copiez pas le fichier JS lié, le plugin le gère automatiquement.

Manifeste

Configurez dans gatsby-config.js .

RSS Feed

Configurez dans gatsby-config.js .

Développement

En fonctionnant sur Gatsbyjs, un SSG qui crée des applications React statiques.

1. npm install
2. npm run develop

Déploiement

Pages github

Nous construisons localement les fichiers, puis nous déplaçons à l'aide d'un script NPM qui met à jour une branche GIT spécifique appelée gh-pages .

Pour activer cela, initialisez simplement un repo git dans le projet, engagez vos modifications et ajoutez votre repo github en tant que référentiel distant. Assurez-vous d'étiqueter la télécommande comme origin , sinon le déploiement de Gatsby ne saura pas à quel référentiel pousse.

Déploiement du site à origin Remote Repo:

npm run deploy

Création ou modification du contenu

1. git pull d'origine éloignée pour vous assurer d'avoir les derniers messages et de fusionner tout conflit.
2. Ajoutez un nouveau dossier à src/content/projects ou src/content/blog nommé d'après votre publication. Ceci sera converti en limace de l'article - vous n'avez pas besoin de «case à kebab» votre titre, mais gardez le format à l'esprit.
3. Créez un fichier Markdown dans le dossier. Assurez-vous d'utiliser des fichiers précédents comme modèle pour inclure tous les champs appropriés (énumérés ci-dessus).
4. Remplissez le message, assurez-vous d'inclure une image de couverture (voir la prochaine étape pour gérer les images)
5. Pour toutes les images, incluez-les dans le même dossier que la marque du post et le lien localement en utilisant <img src="./my-image.jpg" /> .
6. Exécutez npm run deploy dans la racine du projet pour déployer dans les pages GitHub.

Gré

Ce site est également capable de déployer sur Netlify. Connectez-vous simplement sur Netlify, créez une nouvelle application et pointez vers ce référentiel. Suivez les étapes, assurez-vous que Netlify exécute gatsby build et pointe vers le répertoire /public . Cela vous permet également d'utiliser le CMS Netlify, car il nécessite un serveur pour la prise en charge et l'hébergement OAuth2 sur NetLify vous permet de réécrire sur chaque modification (plutôt que de construire à partir de votre machine personnelle et de déployer à partir de là).

Crédits

• Gatsbyjs
• Reactjs
• Icônes de Davide Pacilio