开源这个博客的源码 — Notionic

GitHub - izuolan/notionic: Notion + Craft.do + Next.js = Notionic

Notionic is a static blog that updates in real time, synchronizing changes to Notion pages without rebuilding the deployment.

https://github.com/izuolan/notionic

快速部署

1. 复制下面的 Notionic 模板到你的空间下, 并分享给所有人.
Notionic Template
A new tool for teams & individuals that blends everyday work apps into one.

https://zuolan.notion.site/dea4de63b4aa4efb87174591936f0bde

2. 点击 Fork 分叉这个项目到你的 Github 账号下.
• 替换 /public 目录下的资源, 使用你自己的图标 Logo 等等.

3. 在 Vercel 中部署项目, 并设置以下环境变量:
• NOTION_PAGE_ID (必填), 你公开分享的 Notion 页面 ID (如图所示).
• NOTION_SPACES_ID (可选), 你的 Notion 空间 ID, 详情请看下面 子页面解析 部分内容.
• TELEGRAM_TOKEN (可选), 新增评论和联系表单通知会发到 Telegram 上.

4. 稍等一会就部署完成了.

文章大纲

多语言

• 如果你在 lang.js 中新增了新语言, 名为 zh-HK

// lib/lang.js
export const lang = {
  zh: { ... },
  zh-HK: { ... },
  en: { ... },
  ja: { ... },
  es: { ... }
}

• 那么在 next.config.js 中也需要配置一样的语言缩写 zh-HK 才会生效

// next.config.js
  i18n: {
    locales: ['en', 'zh', 'zh-HK', 'ja', 'es'],
    // 如果想修改默认语言, 可以改动 defaultLocale 这个配置.
    defaultLocale: 'zh',
    localeDetection: false
  },

<Link locale={locale === 'en' ? 'zh' : 'en'} passHref href={asPath}>

子页面和外部页面解析

周刊 Newsletter

评论区

id - int8
name - text
email - text
postURL - text
comment - text
created_at - timestamp
show - boolean

provider: 'supacomments', // leave it empty if you don't need any comment plugin
supaCommentsConfig: {
  supabaseUrl: '', // The url of your Supabase instance
  supabaseAnonKey: '', // The anonymous key of your Supabase instance
},

目前评论区的代码还没开源, 因为有一些细节还没搞定, 但是并不影响使用. 打包后的代码我放在了 public/comment 目录, 目前已经适配了中英两个语言.

💡

更新于 2022 11-22

我发现 Supabase 数据库现在要强制开启 RLS(行级安全) 了, 可以参考下图:

📌

行级安全配置详细说明

联系表单

Craft.do 分享页面

GitHub - izuolan/next-craft: Using Craft.do pages as a blog

Using Craft.do API and Next.js to generate a static site, and manage all content in Craft.do. Create a new page in Craft.do, with a title of your choice (e.g. "Site Configuration"), and make it public, the content of the page should follow this format: Refer to this page for the format: Demo Config, You can use backlinks in the title.

https://github.com/izuolan/next-craft

扩展 1: 自定义 Logo

扩展 2: Open Graph 生成器

GitHub - izuolan/og

🍇 Open Graph Generator made using @vercel/og for personal use. Feel free to fork it and use it for your website! You can achieve deployment fully from the website without cloning the repository. Fork the repository Replace the public/favicon.png and public/favicon.ico with your logo. Make sure it has the same file name.

https://github.com/izuolan/og

扩展 3: 图片链接失效

name: auto-update-cron
on:
  schedule:
    - cron: '0 0 * * *'
jobs:
  build:
    name: Trigger Site Rebuild
    runs-on: ubuntu-latest
    steps:
      - name: Call Vercel Hook
        run: curl -X POST "https://api.vercel.com/v1/integrations/deploy/prj_xxxxxxxxx/ooooooooo?buildCache=false"