devii
v0.5.0
Un iniciador de blog de desarrolladores para 2020.
Next.js
Reaccionar
Mecanografiado
Reducción
Destacación de sintaxis
SEO
Generación RSS
Si eres feliz y lo sabes, estrella este repositorio
/md/blogMarkdown.tsx con soporte para resaltar de sintaxis al estilo GitHubLea más sobre la motivación + diseño detrás de Devii en https://colinhacks.com/blog/devii.
Este repositorio contiene el código para https://devii.dev.
devii.dev sirve como la documentación y una demostración de trabajo de Devii. Después de clonarlo/bifurcarlo, puede mirar el código para aprender cómo funciona Devii. Luego, puede arrancar todo lo que no le gusta, personalizar todo lo demás y construir sus propias herramientas y componentes sobre la base que proporciona Devii.
Su sitio web personal es la manifestación en línea de usted. Devii realmente no proporciona mucho de la caja. Proporciona algunos estilos predeterminados de estilo mediano para las publicaciones de su blog y algunas herramientas para cargar/representar el descuento. Pero tendrá que implementar su propia página de inicio más o menos desde cero. ¡Y ese es el punto! No te conformes con algún tema. Construye algo que te represente.
Para comenzar:
git clone [email protected]:yourusername/devii.git my-blog
cd my-blog
yarn
yarn dev . Esto debería iniciar un servidor en http://localhost:3000 . El núcleo de este repositorio es Next.js. Elegimos Next.js porque es la forma más simple y elegante de generar una versión estática de un sitio web basado en React. La documentación es excelente; Léelo primero: Next.js Documation.
Aquí es una versión abreviada de la estructura del proyecto. Ciertos archivos de configuración ( next.config.js , next-end.d.ts , .gitignore ) se han eliminado por simplicidad.
.
├── README.md
├── public // all static assets (images, css, etc) go here
├── pages // every .tsx component in this dir becomes a page of the final site
| ├── index.tsx // the home page (which has access to the list of all blog posts)
| ├── blog
| ├── [blog].md // a template component that renders the blog posts under `/md/blog`
├── md
| ├── blog
| ├── devii.md // this page!
├── whatever.md // every MD file in this directory becomes a blog post
├── components
| ├── BlogPost.tsx
| ├── Code.tsx
| ├── Footer.tsx
| ├── Header.tsx
| ├── Markdown.tsx
| ├── Meta.tsx
| ├── <various>
├── loader.ts // contains utility functions for loading/parsing Markdown
├── node_modules
├── tsconfig.json
├── package.json
Next.js genera una nueva página web para cada archivo en el directorio pages . Si desea agregar una página Acerca de su blog, simplemente agregue acerca pages interiores about.tsx y comience a escribir la página.
De forma predeterminada, el repositorio solo contiene dos páginas: una página de inicio ( /pages/index.tsx ) y una página de blog ( /pages/[blog].md ).
El archivo [blog].ts sigue la convención Next.js de usar soportes cuadrados para indicar una ruta dinámica.
La página de inicio es intencionalmente mínima. Puedes poner lo que quieras en index.tsx ; Uno de nuestros objetivos en el diseño de DeVII fue no imponer restricciones al desarrollador. ¡Usa tu imaginación! Su sitio web es la manifestación en línea de usted. Puede usar los paquetes de NPM o las bibliotecas de estilo que desee.
Devii no tiene opinuación sobre el estilo. Debido a que su sitio Devii es una aplicación React estándar debajo del capó, puede usar su biblioteca favorita desde npm para hacer un estilo.
DeVII proporciona ciertos estilos por defecto, especialmente en el renderizador de Markdown ( /components/Markdown.tsx ). Esos estilos se implementan utilizando la solución de estilo incorporada de Next styled-jsx . Desafortunadamente, era necesario hacer que esos estilos sean globales, ya que styled-jsx no juega bien con los componentes de terceros (en este caso react-markdown ).
Siéntase libre de volver a simplificar los estilos incorporados con su biblioteca de elección si elige usar una biblioteca de estilo separada (la emoción es bastante gloriosa), entonces podría volver a implementar los estilos predeterminados
Simplemente agregue un archivo de Markdown en md/blog/ para crear una nueva publicación de blog:
foo.md dentro del directorio /md/bloghttp://localhost:3000/blog/foo . Deberías ver la nueva publicación. Cada archivo de markdown puede incluir un "bloque de frontmatter" que contiene varios metadatos. Devii proporciona una utilidad loadPost que carga un archivo de markdown, analiza sus metadatos de frontmatter y devuelve un objeto PostData estructurado:
type PostData = {
path : string ;
title ?: string ;
subtitle ?: string ;
description ?: string ; // used for SEO
canonicalUrl ?: string ; // used for SEO
datePublished ?: number ; // Unix timestamp
author ?: string ;
authorPhoto ?: string ;
authorHandle ?: string ; // twitter handle
tags ?: string [ ] ;
bannerPhoto ?: string ;
thumbnailPhoto ?: string ;
} ; Por ejemplo, aquí está el blog de Frontmatter de la publicación de blog de muestra ( md/blog/the-ultimate-tech-stack.md ):
---
title: Introducing Devii
subtitle: Bringing the power of React, TypeScript, and static generation to dev blogs everywhere
datePublished: 1589064522569
author: Ben Bitdiddle
tags:
- Devii
- Blogs
authorPhoto: /img/profile.jpg
bannerPhoto: /img/brook.jpg
thumbnailPhoto: /img/brook.jpg
---
Ver /loader.ts para ver cómo funciona esto.
Simplemente agregue su ID de Google Analytics (por ejemplo, 'UA-9999999999-1') a globals.ts y DeVII agregará automáticamente el fragmento de Google Analytics apropiado a su sitio. Vaya a /pages/_app.ts para ver cómo funciona o personalizar este comportamiento.
El renderizador de Markdown ( Markdown.tsx ) proporciona un estilo predeterminado inspirado en Medium. Simplemente modifique el CSS en Markdown.tsx para personalizar el diseño a su gusto.
Puede eliminar fácilmente los bloques de código en las publicaciones de su blog utilizando la sintaxis triple de retroceso (al igual que GitHub). ¡No más incrustaciones de CodePen iframes!
Funciona fuera de la caja para todos los lenguajes de programación. Especifique su idioma con una "etiqueta de idioma". Entonces esto:
`` `TS
// bastante ordenado ¿eh?
const test = (arg: string) => {
regresar arg.length> 5;
};
`` `` ``se convierte en
// pretty neat huh?
const test = ( arg : string ) => {
return arg . length > 5 ;
} ; Ver /components/Code.tsx para ver cómo funciona o personalizar este comportamiento.
No necesita comprender todo esto para usar DeVII. Considere esto como una "guía avanzada" que puede usar si desea personalizar la estructura del sitio.
Las publicaciones de Markdown se cargan durante el siguiente paso de construcción estática. JS. Consulte la documentación de obtención de datos para obtener más información sobre esto.
Aquí está la versión corta: si exportar una función llamada getStaticProps desde uno de los componentes de su página, Next.js ejecutará esa función, tomará el resultado y pasará la propiedad props (que debería ser otro objeto) a su página como accesorios.
Puede cargar y analizar dinámicamente un archivo de Markdown utilizando loadMarkdownFile , una función de utilidad implementada en loader.ts . Es una función async que devuelve un objeto PostData TypeScript que contiene todas las claves de metadatos enumeradas anteriormente:
Para obtener un ejemplo de esto, consulte la implementación getStaticProps desde la página de inicio. La función llama loadBlogPosts : una función de utilidad que carga todas las publicaciones de blog en /md/blog/ Directory, los analiza y devuelve PostData[] .
export const getStaticProps = async ( ) => {
const posts = await loadBlogPosts ( ) ;
return { props : { posts } } ;
} ; Hay algunas funciones de utilidad en loader.ts que usa DeVII. ¡Todas las funciones son asíncronas ! Todas las funciones aceptan una ruta relativa que se espera que sea _relativa para el directorio md/ . Por ejemplo loadPost('blog/test.md' ) se cargaría /md/blog/test.md .
loadPost Cargue/analiza un archivo de markdown y devuelve un PostDataloadBlogPosts : carga/analiza todos los archivos en /md/blog/ . Devuelve PostData[] . Utilizado en index.tsx para cargar/renderizar una lista de todas las publicaciones de blog publicadasloadMarkdownFile : carga un archivo de Markdown pero no lo analiza. Devuelve el contenido de cadena. Útil si desea implementar algunas partes de una página en Markdown y otras partes en ReactloadMarkdownFiles : acepta un patrón de globo y carga todos los archivos dentro /md/ cuyos nombres coinciden con el patrón. Utilizado internamente por loadBlogPosts Puede generar una versión totalmente estática de su sitio utilizando yarn build && yarn export &&. Este paso está completamente alimentado por Next.js. El sitio estático se exporta al directorio out .
Después de generarlo, use su servicio de alojamiento de archivos estático de elección (Vercel, Netlify, Firebase Hosting, Amazon S3) para implementar su sitio.
Hay un archivo globals.ts en la raíz del proyecto que contiene algunos metadatos de configuración/configuración sobre su sitio:
yourName : Su nombre, utilizado para las etiquetas de derechos de autor en el pie de página y el feed RSS, por ejemplo, Alyssa P. HackersiteName : el título de tu blog, por ejemplo, Alyssa's Cool Blog ;siteDescription : una breve descripción, utilizada en la etiqueta de meta descripción, por ejemplo, 'escribo sobre el código' n cosas ';siteCreationDate : utilizado en la alimentación RSS generada. Use este formato: '3 de marzo de 2020 04:00:00 GMT';twitterHandle : el mango de Twitter para usted o su blog/empresa, utilizado en las metaetiquetas de Twitter. Incluya el símbolo @, por ejemplo, '@alyssaphacker';email : su correo electrónico, utilizado como el campo "webmaster" y "gestión de editor" del feed RSS generado, por ejemplo, [email protected] ;url : La URL base de su sitio web, utilizada para "calcular" los enlaces canónicos predeterminados de las rutas relativas, por ejemplo, 'https://alyssaphacker.com';accentColor : el color de fondo del encabezado y el pie de página, por ejemplo, #4fc2b4 ; Un feed RSS se genera automáticamente de la alimentación de su blog. Esta alimentación se genera utilizando el módulo rss (para convertir JSON en formato RSS) y showdown para convertir los archivos de Markdown en HTML compatible con RSS.
Para que funcione la generación RSS, todas sus publicaciones deben contener una marca de tiempo de datePublished en sus metadatos de primera hora de frente. Para examinar o personalizar la generación RSS, consulte el archivo rssUtil.ts en el directorio raíz.
Cada página de publicación de blog se poblaron automáticamente meta etiquetas basadas en los metadatos de la publicación. Esto incluye una etiqueta title , meta , og: etiquetas, metadatos de Twitter y una etiqueta link que contiene la URL canónica.
El valor predeterminado de la URL canónica se calcula concatenando el valor de su configuración url (consulte las configuraciones globales anteriores) y la ruta relativa de su publicación. Verifique que la URL canónica sea exactamente equivalente a la URL en el navegador al visitar su sitio en vivo, de lo contrario el SEO de su sitio puede sufrir.
No hay nada "debajo del capó" aquí. Puede ver y modificar todos los archivos que proporcionan la funcionalidad enumerada anteriormente. Devii solo proporciona un andamio de proyecto, algunas utilidades de carga de carga de markdown (en loader.ts ) y algunos valores predeterminados de estilo sensato (especialmente en Markdown.tsx ).
Para comenzar a personalizar, consulte el código fuente de index.tsx (la página de inicio), BlogPost.tsx (la plantilla de publicación de blog) y Markdown.tsx (el renderizador de markdown).
Dirígete al repositorio de GitHub para comenzar: https://github.com/colinhacks/devii. Si te gusta este proyecto, deja un ️Star️ para ayudar a más personas a encontrar Devii?
yarn dev Inicia el servidor de desarrollo. Equivalente al next dev .
yarn build Crea una construcción optimizada de su sitio. Equivalente a next build .
yarn export Exporta su sitio a archivos estáticos. Todos los archivos están escritos para /out . Use su servicio de alojamiento de archivos estático (Firebase Hosting, Amazon S3, Vercel) para implementar su sitio. Equivalente a next export .
