notion blog

Blog de noción

Este es un proyecto de ejemplo Next.js que muestra el próximo soporte SSG (Generación Static-Site) de Next.js utilizando la API privada de la noción para un backend.

NOTA : Este ejemplo utiliza los ganchos SSG experimentales disponibles solo en la rama canaria Next.js! Las API utilizadas dentro de este ejemplo cambiarán con el tiempo. Dado que está utilizando una API privada y características experimentales, use bajo su propio riesgo, ya que estas cosas podrían cambiar en cualquier momento.

Ejemplo en vivo alojado en Vercel : https://notion-log.vercel.app/

Empezando

Para ver los pasos para configurar la noción para funcionar con este ejemplo, vea la publicación en https://notion-log.vercel.app/blog/my-first-post o siga los pasos a continuación.

Despliegue el tuyo

Implemente su propio blog de noción con VERCEL.

o

1. Clon este repositorio git clone https://github.com/ijjk/notion-blog.git
2. Configurar el proyecto con vc
3. Agregue su NOTION_TOKEN y BLOG_INDEX_ID como variables de entorno en su proyecto. Vea aquí para encontrar estos valores
4. Hacer el despliegue final con vc

NOTA: Si se vuelve a desplegar con vc localmente y no ha realizado ningún cambio en la fuente de la aplicación y solo se editó en la noción, necesitará usar vc -f para evitar la reducción de la compilación

Creando su mesa de páginas

Nota : Esto se ejecuta automáticamente si una tabla no se detecta la primera vez que visite /blog

Usando el script preconfigurado

1. Crear una página en blanco en la noción
2. Clon este repositorio git clone https://github.com/ijjk/notion-blog.git
3. Instalar dependencias cd notion-blog && yarn
4. Ejecutar el script para crear la tabla NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js Consulte aquí para encontrar la ID para la nueva página

Creando manualmente la mesa

1. Crear una página en blanco en la noción
2. Cree una tabla en línea en esa página, no use una tabla de página completa, ya que requiere consultar de manera diferente
3. Agregue los campos a continuación a la mesa

La tabla debe tener las siguientes propiedades:

• Page : Esta página de la publicación del blog
• Slug : esta es la babosa de la publicación del blog en relación con /blog , debería ser una propiedad de texto
• Published : este blog de filtros en la producción , debería ser una propiedad de casilla de verificación
• Date : Esto es cuando la publicación del blog aparece según se publicó, debe ser una propiedad de fecha
• Authors : Esta es una lista de usuarios de la noción que escribieron la publicación, debería ser una propiedad de la persona

Obtener índice de blog y token

Para obtener el valor del índice de su blog, abra la noción y navegue a la página de noción con la tabla que creó anteriormente. Mientras esté en esta página, debería poder obtener la identificación de la página de cualquiera de los dos:

• La URL, si la URL de su página es https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqkupi7xjxtul, entonces su BLOG_INDEX_ID es S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• La solicitud loadPageChunk , si abre su consola de desarrollador y vaya a la pestaña de red, luego vuelva a cargar la página, debe ver una solicitud de loadPageChunk y en la solicitud de carga, debería ver un pageId y ese es su BLOG_INDEX_ID

Para obtener su token de noción, abra la noción y busque la cookie token_v2 .

Creación de publicaciones de blog

1. En la noción, haga clic en Nuevo en la tabla para agregar una nueva fila
2. Complete el nombre de la página, la babosa, la fecha y los autores
3. En la parte superior del área de contenido, agregue el contenido que desea mostrar como una vista previa (manténgase en 2 párrafos)
4. Agregue un bloque divisivo en su contenido de vista previa
5. Agregue el resto de su contenido en el bloque Divider

Ejecutando localmente

Para ejecutar el proyecto localmente, debe seguir los pasos 1 y 2 de la implementación y luego seguir los pasos a continuación

1. Instalar yarn de dependencias
2. Exponga NOTION_TOKEN y BLOG_INDEX_ID en su entorno export NOTION_TOKEN='<your-token>' y export BLOG_INDEX_ID='<your-blog-index-id>' o set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" para Windows para Windows
3. Ejecute el siguiente en modo de desarrollo yarn dev
4. Construir y ejecutar en modo de producción yarn build && yarn start

Créditos

• Guillermo Rauch @rauchg para la idea inicial
• Shu ding @shuding_ para la ayuda de diseño
• Luis Álvarez @Luis_Fades para ayuda de diseño y captura de errores