devblog
1.0.0
DevBlog es una plantilla de blog totalmente personalizable diseñada para desarrolladores (o cualquier otra persona) que desee iniciarse en los blogs. Viene listo para implementarse (con facilidad) o puede editarse y ampliarse como desee. El blog se genera completamente de forma estática a través de GatsbyJS, viene con resaltado de sintaxis (a través de PrismJS) listo para usar y tiene renderizado del lado del servidor incorporado, entre otras cosas.
Para ver una demostración en vivo, haga clic aquí.
config.js El primer paso es instalar localmente la CLI de GatsbyJS. Esto se puede lograr ejecutando el comando npm install --global gatsby-cli
Al crear un nuevo sitio de Gatsby, la CLI le permite especificar un iniciador; en este caso, simplemente proporcione la URL de este repositorio. Esto se puede lograr ejecutando el comando gatsby new YOUR_BLOG_NAME https://github.com/RyanFitzgerald/devblog
Ahora que está configurado, simplemente puede usar el blog o realizar las modificaciones necesarias. Por ejemplo, ejecute gatsby develop para iniciar un entorno de desarrollo recargado en caliente disponible en localhost:8000 o ejecute gatsby build para crear una compilación de producción optimizada. Para obtener una lista completa de los comandos CLI para Gatsby, consulte su documentación.
Alternativamente, si simplemente desea bifurcar este repositorio o clonarlo, simplemente necesita ejecutar npm install y luego gatsby develop y estará listo y funcionando.
La configuración básica se puede realizar a través del archivo config.js en la raíz del repositorio del proyecto. A través de este archivo puede realizar ediciones en el color principal del blog, agregar un autor y una descripción del blog, y más. Los valores predeterminados son los siguientes:
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'
}
} ;Nota: Cualquier opción de configuración etiquetada como "Obligatoria" es necesaria para fines de presentación básicos. Todo lo que no tenga el comentario "Obligatorio" se puede eliminar si no desea que se utilice.
Las variables de configuración a las que se hace referencia anteriormente se utilizan de la siguiente manera:
| Variable | Descripción de uso |
|---|---|
| título | El título del blog. Esto se utiliza principalmente para el título de la página. |
| autor | El autor del blog. Esto se utiliza para el nombre del encabezado y el título de la página. |
| descripción | La descripción del autor. Esto se utiliza para el encabezado debajo del autor. |
| color primario | El color principal del blog. |
| mostrar imagen de encabezado | Marcar para mostrar la imagen del encabezado o no. |
| mostrar botones compartir | Marcar para mostrar o no los botones para compartir en las redes sociales en cada publicación del blog. |
| publicaciones por página | El número de publicaciones por página en la página de inicio del blog. Esto se utiliza para la paginación. |
| social | Perfiles de redes sociales del autor del blog. Actualmente, solo se admiten sitios web personales, GitHub, Twitter y LinkedIn. |
Para cambiar la imagen del encabezado predeterminada, simplemente anule el archivo main.jpg en la carpeta /src .
Para cambiar el favicon predeterminado, simplemente anule el archivo favicon.ico en la carpeta /src .
Todas las publicaciones del blog se pueden encontrar en /src/pages y se crean estáticamente una vez que se ejecuta el comando gatsby build . Para crear una nueva publicación, simplemente cree una nueva carpeta en /src/pages con el nombre de la URL que desea tener. Por ejemplo, si desea que la URL aparezca como myblog.com/hello-world deberá crear la carpeta como hello-world . Una vez creada la carpeta, simplemente cree un archivo index.md dentro de ella.
La parte superior de las páginas debe contener todas las mismas rebajas que le indican a Gatsby la información necesaria sobre la publicación específica. La plantilla básica es:
---
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 --> En el fragmento de código anterior todo lo que se requiere es el título y la fecha . La imagen destacada es opcional y se puede agregar simplemente agregando una imagen a la carpeta de la página que acaba de crear y haciendo referencia como en el ejemplo anterior. La parte del extracto también es opcional y si no usa el marcador <!-- end --> , la primera parte de la publicación se usará como extracto automáticamente.
Esta plantilla se entrega con 3 ejemplos de publicaciones de blog que contienen todo, desde el uso de fragmentos de código, la inserción de imágenes, el uso de imágenes y extractos destacados, y más.
Una vez que esté listo para implementar el blog y publicarlo, tendrá un par de opciones disponibles.
La implementación manual del blog simplemente requiere que ejecute una gatsby build para poder crear una compilación de producción. Después de eso, puede usar cualquier servidor en el que normalmente usaría una aplicación React, como una gota de Digital Ocean o una instancia de AWS. Todo lo que se requiere es alguna forma de entregar los archivos estáticos.
Si no está familiarizado con la implementación de aplicaciones React, existen otras opciones.
Para implementar en páginas de GitHub, primero debe configurar el prefijo de ruta en gatsby-config.js . El valor predeterminado es pathPrefix: '/devblog' sin embargo, esto debe cambiarse al nombre del repositorio que elija. Por ejemplo, si tiene el blog ubicado en https://github.com/YOURUSERNAME/myblog y desea implementarlo en https://YOURUSERNAME.github.io/myblog , entonces deberá establecer el prefijo de ruta en pathPrefix: '/myblog' .
A continuación, simplemente ejecute npm run deploy y se implementará su blog.
Alternativamente, si desea implementarlo en https://YOURUSERNAME.github.io (es decir, el sitio de su usuario/organización y no el sitio de un proyecto), se requieren un par de cambios adicionales. La documentación oficial de Gatsby los describe bien aquí.
Uno de los métodos más sencillos para implementar el blog sería utilizar Netlify. Para implementar en Netlify, simplemente haga clic en el botón a continuación y siga las instrucciones.
Las opciones descritas anteriormente no son las únicas opciones disponibles para implementar el blog. La documentación oficial de Gatsby detalla otras opciones. Para leer más sobre las opciones de implementación, haga clic aquí.
Licenciado bajo licencia MIT. Consulte LICENCIA.md para obtener más información.
