![]() Fathom Analyticsįathom provides a lightweight alternative to Google Analytics. If you want to copy some of the fancier elements of my site, then you’ll have to set up a few extras. ExtrasĪll extra dependencies are optional - the project should work just fine out of the box. Dark Modeĭark mode is fully supported and can be toggled via the sun / moon icon in the footer. It should be pretty easy to customize most styling-related things, especially with local development and hot reload. They mainly target global CSS classes exported by react-notion-x styles.css. ThemingĪll CSS styles that customize Notion content are located in styles/notion.css. NOTE: if you have multiple pages in your workspace with the same slugified name, the app will throw an error letting you know that there are duplicate URL pathnames. See mapPageUrl and getCanonicalPageId from for more details. Just keep in mind that if you plan on changing page titles over time, you probably want to make sure old links will still work, and we don’t currently provide a solution for detecting old links aside from Next.js built-in support for redirects. The mapping of Notion ID to slugified page titles is done automatically for you as part of the build process. In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter. I’ve found that it’s really useful to always have the Notion Page ID front and center during local development. In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page’s title suffixed with its Notion ID. The app defaults to slightly different pathnames in dev and prod (though pasting any dev pathname into prod will work and vice-versa). There are a few parts of the code with logic to only show comments on blog post pages (collection item detail pages). There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion. ![]() I recommend setting up a collection on your home page (optional I use an inline gallery here) that contains all of your articles / projects / content. There will be a global variable that you can access called block which is the Notion data for the current page, and you just have to type block.space_id which will print out your page’s workspace ID. In order to find your Notion workspace ID (optional), just load any of your site’s pages into your browser and open up the developer console. Then extract the last part of the URL that looks like d1b5dcf8b9ff425b8aef5ce6f0730202, which is your page’s Notion iD. You’ll want to make your root Notion page public and then copy the link to your clipboard. It defaults to rendering my site’s public notion page 78fc5a4b88d74b0e824e29407e9f1ec1. I tried to make configuration as easy as possible.Īll you really need to do to get started is edit rootNotionPageId. Responsive for desktop / tablet / mobile.Quick search via CMD+P just like in Notion.Robust support for Notion content via react-notion-x.Setup only takes a few minutes ( single config file) ?.It uses Notion as a CMS, fetching content from Notion and then uses Next.js and react-notion-x to render everything. This repo is what I use to power my personal blog / portfolio site. The perfect starter kit for building websites with Next.js and Notion.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |