一个基于nextjs的静态博客程序Nobelium

A static blog built on top of Notion and Nextjs, deployed on Vercel.

Demo: https://nobelium.vercel.app/  (支持换页）

🚀  Fast and responsive

• Fast page render and responsive design
• Fast static generation with efficient compiler

🤖  Deploy instantly

• Deploy on Vercel in minutes
• Incremental regeneration and no need to redeploy after update the content in notion

🚙  Fully functional

• Comments, full width page, quick search and tag filter
• RSS, analytics, web vital... and much more

🎨  Easy for customization

• Rich config options, support English & Chinese interface
• Built with Tailwind CSS, easy for customization

🕸  Pretty URLs and SEO friendly

Quick Start

• Duplicate this Notion template, and share it to the public
• Fork this project
• Customize blog.config.js (此步可以不做）

• (Optional) Replace favicon.svg, and favicon.ico in /public folder with your own
• Deploy on Vercel, set following environment variables：
  • NOTION_PAGE_ID (Required): The ID of the Notion page you previously shared to the web, usually has 32 digits after your workspace address
  • NOTION_ACCESS_TOKEN (Optional, not recommended): If you decide not to share your database, you can use token to let Nobelium grab data from Notion database. You can find it in your browser cookies called token_v2
    • Keep in mind Notion token is only valid for 180 days, make sure to update manually in vercel dashboard, we probably switch to Official API to resolve this issue in the future. Also, images in Notion database will not properly rendered
• That's it! Easy-peasy?

Wait for a sec, what is Page ID？

Roadmap

Check out our roadmap here

• Better SEO
• Dark mode
• Open Graph support
• Switch to react-notion-x
• Sitemap

Technical details

• Generation: Next.js and Incremental Static Regeneration
• Page render: react-notion-x
• Style: Tailwind CSS and @tailwindcss/jit compiler
• Comments: Gitalk, Cusdis and more

from https://github.com/craigary/nobelium 

（我安装的nobelium blog: https://nobelium-indol-eta.vercel.app/)

----------------------------------------------

使用 NextJS + Notion API 实现的，支持多种部署方案的静态博客，无需服务器、零门槛搭建网站，为Notion和所有创作者设计。 (A static blog built with NextJS and Notion API, supporting multiple deployment options. No server required, zero threshold to set up a website. Designed for Notion and all creators.)

tangly1024.com 

NotionNext

中文文档 | README in English

一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为Notion和所有创作者设计。

预览效果

在线演示：https://preview.tangly1024.com/ ，项目支持多主题切换，没找到喜欢的主题？贡献一个吧~

Next	Medium	Hexo	Fukasawa
预览NEXT	预览MEDIUM	预览HEXO	预览FUKASAWA

我要如何开始？

只需几分钟即可搭建您的个人站点：

• 部署教程 (支持多方案)

• 配置手册 - (自定义插件)

• 二次开发 - (开发手册)

• 更新指南 - (升级您的代码)

• 版本汇总 - (查询变动功能)

致谢

感谢Craig Hart发起的Nobelium项目

Craig Hart

from https://github.com/tangly1024/NotionNext 

（https://github.com/briteming/NotionNext）

(示范博客：https://blog.tangly1024.com

每页的帖子数量为12个：

https://github.com/tangly1024/NotionNext/blob/307dd428b58b0d04a090d74ebfefdd2408953f92/blog.config.js#L143）

教程：

http://web.archive.org/web/20230325053616/https://www.haixin.io/article/notion-next-on-cf

https://blog.tangly1024.com/article/notion-next-cloud-flare。注意其评论区。

（我duplicate了这个
https://craigary.notion.site/866916e3b939468b9b6f1d47dce99f9c?v=73fd891cab654e35b44893608a23760e，得到自己的：
https://luckypoem.notion.site/luckypoem/e31b3f462dfb47fab104277ed48050ea?v=7c86f37e0f404790ae8435d1301ebfc8
然后知道我的NOTION_PAGE_ID的值是e31b3f462dfb47fab104277ed48050ea ）

(我duplicate了这个https://tanghh.notion.site/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d,得到自己的：https://luckypoem.notion.site/luckypoem/c95bdae28270407b82fe5d2c8bbfdfb1?v=8b728a017dd94b9f858fd683d8a9b460，

然后知道我的NOTION_PAGE_ID的值是c95bdae28270407b82fe5d2c8bbfdfb1）

演示网站：https://notionnext-b0l.pages.dev/

https://docs.tangly1024.com/article/notion-next-cloud-flare

https://blog.tangly1024.com/article/notion-next-guide说：

"如何开始写作？

将鼠标指向数据库表中的title这一栏，会浮现一个OPEN按钮，点击即可查看/编写文章；点击右上角的蓝色NEW按钮创建新文章。"

 

(我安装的notionnext blog: https://notion-next-jsj8.vercel.app)

-------------------------------------------------------------------------

A static site builder. Powered by Notion and Next.js

osmium-blog.vercel.app  

 

Osmium

A static blog site builder. Powered by Notion and Next.js

Osmium is a heavily-modded version of the awesome Nobelium

Highlights

🚀 It’s fast

• Fully leverage SSR/SSG to pre-render pages as much as possible
• Use Notion’s private API to ensure data-fetching efficiency

😌 It’s easy

• Use only Notion and you got a fully functional blog
• Manage your blog and posts in familiar Notion way

🤖 It’s smart

• Auto-build-and-deploy your blog without any manual commands (if you are using Vercel or Netlify)
• Once deployed, just write your blog and posts will automatically update thanks to ISR

Quick Start

• In GitHub
  • Fork this project
• In Notion
  • Duplicate this Notion Database, and share to web (optional but recommended)
  • In the newly created database, find Config and open it
  • Open the Osmium configurator, fill the form with your preferences and click the top-right button to copy your config
  • Back to the page Config in Notion, remove the content of the code block and paste your config into it
  • (Optional) Change the icon of the Config page. You can choose whichever type you like, no matter emoji or icon or image. That will be the logo and favicon of you blog
• In Vercel (recommended) or other platform you choose to deploy to
  • If you use Vercel, create a new project and link to your Osmium fork, then set the following environment variables:
    • NOTION_DATABASE_ID: The ID of the Notion Database you just created, usually a 32-digit or 36-digit hex code. You can find it from the page link in the share menu of the page. If you find two IDs, use the first one
    • NOTION_ACCESS_TOKEN (optional, not recommended): If you decide not to share your database, you can make Osmium grabbing data privately with the token. You can find it after the name token_v2 in your browser cookies
      • Notes: Notion token is only valid for 180 days. Don’t forget to update it in Vercel project settings before expiry. We’ll probably switch to the Notion Public API to resolve this issue in the future. Also, images may not be properly displayed in this case
  • If you are not a Vercel user, just build and deploy your fork as a normal Next.js app with the environment variables described above
• You are all set! Would you star this project?

Migrate from Nobelium

See https://osmium-blog.vercel.app/migrate-from-nobelium

FAQs

See https://osmium-blog.vercel.app/faqs

from https://github.com/osmium-blog/osmium 

(注意：这里的环境变量名是NOTION_DATABASE_ID ，不是NOTION_PAGE_ID)

 (my demo blog: https://osmium-aafv.vercel.app/)

--------------------------------------------------------------

rauchg.com

This is the blog source that powers rauchg.com, built on next.js and deployed to the cloud via Vercel.

How to run

First, install Vercel CLI.

Development

vc dev

Deployment

Staging

vc

This is the equivalent of submitting a PR with the GitHub integration

Production

vc --prod

This is the equivalent of git push to master (or merging a PR to master)

Architecture

Pure components

Every stateless pure component is found under ./components.

Every component that has to do with styling the post's markup is found under ./components/post/

These components make up the style guide of the application.

Blog posts

Every blog post is a static page hosted under pages/$year/.

This allows every post to load arbitrary modules, have custom layouts and take advantage of automatic code splitting and lazy loading.

This means that the bloat of a single post doesn't "rub off on" the rest of the site.

An index of all posts is maintained in JSON format as ./posts.json for practical reasons.

from  https://github.com/rauchg/blog