手把手教你用Notion搭建博客
手把手教你用Notion搭建博客
status
Published
date
Jun 9, 2021
slug
NotionBlog
summary
notion搭建博客的方法很多,今天介绍一个Notion+Vercel+Next.js搭建博客的方法。
category
技术分享
tags
notion

说明

notion搭建博客的方法很多,今天介绍一个Notion+Vercel+Next.js搭建博客的方法,作者的Github

演示

演示地址: Sky's Blog

搭建方法

  1. 首先注册一个GitHub账号。
  1. 注册一个Notion账号,创建一个页面,选择右上角Share,选择Share to web,选择Copy link,找到此页面的PageID,就是下图中Blog后面的一串字符。
    1. notion image
  1. 打开此仓库 Fork一份,根据自己的情况修改*site.config.js**的相关内容。
    1. module.exports = {
        // 此处填写第二步中获取到的字符串
        rootNotionPageId: '78fc5a4b88d74b0e824e29407e9f1ec1',
      
        // if you want to restrict pages to a single notion workspace (optional)
        // (this should be a Notion ID; see the docs for how to extract this)
        rootNotionSpaceId: null,
      
        // 站点基础设置
        name: '名称',
        domain: '域名',
        author: '作者',
      
        // 一些其他设置 (可选)
        description: 'Example site description',
        socialImageTitle: 'Transitive Bullshit',
        socialImageSubtitle: 'Hello World! 👋',
      
        // SNS设置 (可选)
        twitter: 'transitive_bs',
        github: 'transitive-bullshit',
        linkedin: 'fisch2',
      
        // default notion icon and cover images for site-wide consistency (optional)
        // page-specific values will override these site-wide defaults
        defaultPageIcon: null,
        defaultPageCover: null,
        defaultPageCoverPosition: 0.5,
      
        // image CDN host to proxy all image requests through (optional)
        // NOTE: this requires you to set up an external image proxy
        imageCDNHost: null,
      
        // Utteranc.es comments via GitHub issue comments (optional)
        utterancesGitHubRepo: null,
      
        // whether or not to enable support for LQIP preview images (optional)
        // NOTE: this requires you to set up Google Firebase and add the environment
        // variables specified in .env.example
        isPreviewImageSupportEnabled: false,
      
        // map of notion page IDs to URL paths (optional)
        // any pages defined here will override their default URL paths
        // example:
        //
        // pageUrlOverrides: {
        //   '/foo': '067dd719a912471ea9a3ac10710e7fdf',
        //   '/bar': '0be6efce9daf42688f65c76b89f8eb27'
        // }
        pageUrlOverrides: null
      }
  1. 打开Vercel,使用Github账号登录,选择New Project,找到Frok过来的库,点击Import
    1. notion image
  1. 选择 Select ->修改PROJECT NAME(可选)->点击Deploy
  1. 等待部署完成即可。
  1. 绑定域名,选择Domains,按描述进行域名解析即可绑定成功。
  1. 此方法搭建的博客,样式部分可以通过修改componentslibstylespagespublic等几个文件夹的内容来进行调整。
  • notion
  • python三要素实名认证接口notion API使用