美文网首页
notion搭建博客方法二:nextjs-notion-star

notion搭建博客方法二:nextjs-notion-star

作者: 就是无聊_ | 来源:发表于2021-06-09 10:48 被阅读0次

说明

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

演示

演示地址: Sky's Blog

搭建方法

  1. 首先注册一个GitHub账号。

  2. 注册一个Notion账号,创建一个页面,选择右上角Share,选择Share to web,选择Copy link,找到此页面的PageID,就是下图中Blog后面的一串字符。

    image-20210609101228904
  3. 打开此仓库 Fork一份,根据自己的情况修改**site.config.js**的相关内容。

  // 此处填写第二步中获取到的字符串
  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

    image-20210609101921941
  2. 选择 Select ->修改PROJECT NAME(可选)->点击Deploy

  3. 等待部署完成即可。

  4. 绑定域名,选择Domains,按描述进行域名解析即可绑定成功。

  5. 此方法搭建的博客,样式部分可以通过修改componentslibstylespagespublic等几个文件夹的内容来进行调整,比如将默认的twitter等海外SNS服务修改为QQ微博等国内服务。

相关文章

网友评论

      本文标题:notion搭建博客方法二:nextjs-notion-star

      本文链接:https://www.haomeiwen.com/subject/pbxeeltx.html