notion blog

Blog de notion

Ceci est un exemple de projet Next.js qui affiche le support SSG (génération de sites statiques) de Next.js à l'aide de l'API privée de Notion pour un backend.

Remarque : Cet exemple utilise les crochets SSG expérimentaux uniquement disponibles dans la succursale de Canary suivante! Les API utilisées dans cet exemple changeront avec le temps. Puisqu'il utilise une API privée et des fonctionnalités expérimentales, utilisez à vos propres risques car ces choses pourraient changer à tout moment.

Exemple en direct hébergé sur Vercel : https://notion-blog.vercel.app/

Commencer

Pour afficher les étapes pour configurer la notion pour travailler avec cet exemple, consultez le message sur https://notion-blog.vercel.app/blog/my-first-post ou suivez les étapes ci-dessous.

Déployez votre propre

Déployez votre propre blog de notion avec Vercel.

ou

1. Clone ce repo git clone https://github.com/ijjk/notion-blog.git
2. Configurer le projet avec vc
3. Ajoutez votre NOTION_TOKEN et BLOG_INDEX_ID comme variables d'environnement dans votre projet. Voir ici pour savoir comment trouver ces valeurs
4. Faire un déploiement final avec vc

Remarque: Si le redéployage avec vc localement et que vous n'avez apporté aucune modification à la source de l'application et uniquement édité dans la notion, vous aurez besoin d'utiliser vc -f pour contourner la dédoute

Création de votre table de pages

Remarque : Ceci est automatique si une table n'est pas détectée la première fois en visite /blog

Utilisation du script préconfiguré

1. Créer une page vierge en notion
2. Clone ce repo git clone https://github.com/ijjk/notion-blog.git
3. Installer les dépendances cd notion-blog && yarn
4. Exécutez le script pour créer une table NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js voir ici pour trouver l'ID pour la nouvelle page

Créer manuellement la table

1. Créer une page vierge en notion
2. Créez une table en ligne sur cette page, n'utilisez pas de table pleine page car elle nécessite l'interrogation différemment
3. Ajouter les champs ci-dessous à la table

Le tableau doit avoir les propriétés suivantes:

• Page : C'est la page du blog du blog
• Slug : Ceci est la limace du blog par rapport au /blog , ce devrait être une propriété texte
• Published : This Filters Blog Articles en production , il devrait s'agir d'une propriété à cocher
• Date : c'est à ce moment que le billet de blog apparaît comme affiché, ce devrait être une propriété de date
• Authors : Il s'agit d'une liste d'utilisateurs de notion qui ont écrit le message, ce devrait être une propriété de personne

Obtenir l'index de blog et le jeton

Pour obtenir la valeur de l'index de votre blog, ouvrez la notion et accédez à la page de notion avec le tableau que vous avez créé ci-dessus. Pendant que sur cette page, vous devriez pouvoir obtenir l'ID de la page à partir de:

• L'URL, si l'URL de votre page est https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqkupi7xjxtul alors votre BLOG_INDEX_ID est S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• La demande loadPageChunk , si vous ouvrez votre console de développeur et accédez à l'onglet réseau, rechargez la page, vous devriez voir une demande de loadPageChunk et dans la charge utile de demande, vous devriez voir un pageId et c'est votre BLOG_INDEX_ID

Pour obtenir votre jeton de notion, ouvrez la notion et recherchez le cookie token_v2 .

Créer des articles de blog

1. En notion, cliquez sur Nouveau sur la table pour ajouter une nouvelle ligne
2. Remplissez le nom de la page, la limace, la date et les auteurs
3. En haut de la zone de contenu, ajoutez le contenu que vous souhaitez afficher comme aperçu (gardez cela sous 2 paragraphes)
4. Ajoutez un bloc de diviseur sous votre contenu d'aperçu
5. Ajoutez le reste de votre contenu sous le bloc de diviseur

Courir localement

Pour exécuter le projet localement, vous devez suivre les étapes 1 et 2 du déploiement, puis suivre les étapes ci-dessous

1. Installer yarn des dépendances
2. Exposez NOTION_TOKEN et BLOG_INDEX_ID dans votre environnement export NOTION_TOKEN='<your-token>' et export BLOG_INDEX_ID='<your-blog-index-id>' ou set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>" pour Windows
3. Exécutez ensuite en mode de yarn dev
4. Construire et exécuter en mode de production yarn build && yarn start

Crédits

• Guillermo Rauch @rauchg pour l'idée initiale
• Shu ding @shuding_ pour l'aide de conception
• Luis Alvarez @LUis_fades pour l'aide de conception et la capture de bogues