如何用Notion搭建自己的博客

[utterances-bot]

如何用Notion搭建自己的博客

菜饼同学的技术博客

https://szufrank.top/create-notion-blog

[HandanYU]

你好我想问一下，如何将icon替换为自己的图片，我已经将public文件夹下所有的icon和png都替换为自己的啦。而且在电脑上打开时候网页icon也已经显示为自己的图片啦，但是通过手机分享的时候得到的icon还是没有改变，想请教一下这该如何修改。感谢。

[frankcbliu]

你好我想问一下，如何将icon替换为自己的图片，我已经将public文件夹下所有的icon和png都替换为自己的啦。而且在电脑上打开时候网页icon也已经显示为自己的图片啦，但是通过手机分享的时候得到的icon还是没有改变，想请教一下这该如何修改。感谢。

哈喽，你这个分享的场景是怎样的？ 如果是网页标签上的小图标的话，我理解如果电脑上打开的时候icon是正常的，那手机上应该也是没问题的，可能是由于缓存的问题？是否有链接之类的？这样我可以更好的了解你的问题发生的原因。

[HandanYU]

Hello，非常感谢能如此快的回复我。

就当我用手机打开我那个网页，然后通过网页直接分享到微信，得到的是像这样。这边的icon没有变成我自己的。感谢[Image.jpeg]

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: 在所不辞 @.> Sent: Friday, December 17, 2021 3:57:04 PM To: frankcbliu/awesome-nextjs-notion-blog @.> Cc: HandanYU @.>; Comment @.> Subject: Re: [frankcbliu/awesome-nextjs-notion-blog] 如何用Notion搭建自己的博客 (Issue #5)

你好我想问一下，如何将icon替换为自己的图片，我已经将public文件夹下所有的icon和png都替换为自己的啦。而且在电脑上打开时候网页icon也已经显示为自己的图片啦，但是通过手机分享的时候得到的icon还是没有改变，想请教一下这该如何修改。感谢。

哈喽，你这个分享的场景是怎样的？ 如果是网页标签上的小图标的话，我理解如果电脑上打开的时候icon是正常的，那手机上应该也是没问题的，可能是由于缓存的问题？是否有链接之类的？这样我可以更好的了解你的问题发生的原因。

― Reply to this email directly, view it on GitHubhttps://github.com/frankcbliu/awesome-nextjs-notion-blog/issues/5#issuecomment-996511251, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AVGFPBVGK6NH33ZOVCABL7TURLUNBANCNFSM5KH73Y7A. Triage notifications on the go with GitHub Mobile for iOShttps://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Androidhttps://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you commented.Message ID: @.***>

[frankcbliu]

Hello，非常感谢能如此快的回复我。 就当我用手机打开我那个网页，然后通过网页直接分享到微信，得到的是像这样。这边的icon没有变成我自己的。感谢[Image.jpeg] Get Outlook for iOShttps://aka.ms/o0ukef

很遗憾你的这张图片上传失败了， 不过我大概能明白你的意思了。回到问题本身，其实整个项目中，icon只存放在 public 文件夹下。我建议你可以清理下手机浏览器的缓存，然后重试。

[dingdingxia]

hello, 想请教下图片zoom具体是怎么实现的？在代码里好像没有搜到。我用了nobelium的template也想加图片zoom的功能但是不知道怎么实现..

[frankcbliu]

hello, 想请教下图片zoom具体是怎么实现的？在代码里好像没有搜到。我用了nobelium的template也想加图片zoom的功能但是不知道怎么实现..

@dingdingxia react-notion-x 这个库中用到了medium-zoom，我是给 medium-zoom做了个patch去实现放大功能的。patch代码

[dingdingxia]

@frankcbliu 谢谢！

[fqjun]

你好，我想请问一下怎么才能让vercel在部署的时候超时时间能延长一些，最近在更新完自己的博客之后发现无法重新部署，每次部署都说 Error: Collecting page data for /[pageId] is still timing out after 2 attempts. See more info here https://nextjs.org/docs/messages/page-data-collection-timeout 。 我尝试去修改 staticPageGenerationTimeout 为1000甚至更长的时间，但仍然不起效果。想请教一下这个问题是哪个板块出现了bug，感谢

[frankcbliu]

@fqjun 哈喽，你的博客内容很长嘛？一般来说，应该不至于因为内容过长导致超时的，这个问题我之前没遇到过，但看起来不像是因为内容过长导致的。其次可以考虑的是有无更改博客的根目录，超时问题有可能是因为地址无效引起的。此外，看看在本地进行build能否成功，排除下是否是vercel的问题，如果与vercel无关，那么需要断点调试下，才比较好确认问题来源。

[fqjun]

@fqjun 哈喽，你的博客内容很长嘛？一般来说，应该不至于因为内容过长导致超时的，这个问题我之前没遇到过，但看起来不像是因为内容过长导致的。其次可以考虑的是有无更改博客的根目录，超时问题有可能是因为地址无效引起的。此外，看看在本地进行build能否成功，排除下是否是vercel的问题，如果与vercel无关，那么需要断点调试下，才比较好确认问题来源。

很开心你能回复我。是的，我也考虑过这个问题，我的博客内容单篇不是很长，但分支比较多，可以理解为嵌套多层的文件夹结构。这是我的博客：https://fqjun.notion.site/FQJun-s-Blog-9f1e0dfab0a74c14955a2078f2e638eb 目前还未迁移完全，但他到一定数量之后就开始出现上面所说的错误，但在本地 build 运行是能正常进入所有文章的。不知道这能不能算是vercel的问题。而且我尝试通过加入各主页面的 ID 到站点地图中来缓解该问题，均尝试未果。vercel的官网、issue、google所给出的解决方案均尝试未果，所以顺便想问问大佬还有什么搜索渠道可以推荐的吗，我再尝试去找找答案。

[frankcbliu]

@fqjun 哈喽，我用你的 rootid 试了下，似乎没有问题，我建议你做以下几个尝试：

1. 在vercel 上 redeploy 下

2. 在你forked的仓库上，拉取合并我的最新版本的main代码，然后重试

我测试发布的地址：https://awesome-nextjs-notion-blog-5zh297rbs-frankcbliu.vercel.app/ 我修改后的config文件：https://github.com/frankcbliu/awesome-nextjs-notion-blog/blob/ae0b86a8b1e704d029f6f2ae6e85883e365ce9cb/site.config.js

---

我又试了下，虽然主界面能打开，但是跳转链接都打不开，确实有点奇怪。

[fqjun]

@frankcbliu 非常感谢你能帮我测试。对，我当时就是添加内容加着加着突然发现链接没有了反应，以为 redeploy 就行，然后就再也部署不上了。我目前还是卡在重新部署上，因为我发现用你的模板能部署上，但链接没有了反应，原作者的在少量的情况下可以部署成功且链接正常，但无法支撑量大的情况。我现在还在学这几门语言看看能不能把两个给结合起来。

[sunnydongbowen]

域名是在vercel里绑定的吗，如果博客嵌套了一级又一级，能部署成功吗

[with1874]

yarn dev 打开后显示 Internal Server Error，我在site.config.js修改了rootNotionPageId为我自己的。 还需要修改其他地方吗，我在博客没看到

[frankcbliu]

@sunnydongbowen 是的，在 vercel 绑定，嵌套多级是指希望用二级域名来访问这个博客吗？我理解是可以的。

[frankcbliu]

@with1874 确认下你的 notion 的页面是否放开了互联网访问（右上角 Share/Share to Web）

[wangyunzi]

hello,大佬你好，我fork了你的项目但是部署失败了，想请问你评论是直接添加你给的那个代码嘛？

[frankcbliu]

@with1874 @wangyunzi 关于Internal Server Error 的问题，我已经发现原因了。目前的代码默认要求配置 FireBase, 忘记做一些兼容性措施了。目前已简单修正，不会影响编译。你们可以获取最新代码重试下。目前可能还有一些小报错，可以先忽略，等我抽空再解决下这个问题。 如果你们按照博客后续的教程配置了Firebase，应该也不会出现编译问题。

[with1874]

@with1874 @wangyunzi 关于Internal Server Error 的问题，我已经发现原因了。目前的代码默认要求配置 FireBase, 忘记做一些兼容性措施了。目前已简单修正，不会影响编译。你们可以获取最新代码重试下。目前可能还有一些小报错，可以先忽略，等我抽空再解决下这个问题。 如果你们按照博客后续的教程配置了Firebase，应该也不会出现编译问题。

好的收到，我这就拉取最新代码看一下～

[wangyunzi]

@with1874 @wangyunzi 关于Internal Server Error 的问题，我已经发现原因了。目前的代码默认要求配置 FireBase, 忘记做一些兼容性措施了。目前已简单修正，不会影响编译。你们可以获取最新代码重试下。目前可能还有一些小报错，可以先忽略，等我抽空再解决下这个问题。 如果你们按照博客后续的教程配置了Firebase，应该也不会出现编译问题。

好的好的谢谢大佬

[with1874]

@with1874 @wangyunzi 关于Internal Server Error 的问题，我已经发现原因了。目前的代码默认要求配置 FireBase, 忘记做一些兼容性措施了。目前已简单修正，不会影响编译。你们可以获取最新代码重试下。目前可能还有一些小报错，可以先忽略，等我抽空再解决下这个问题。 如果你们按照博客后续的教程配置了Firebase，应该也不会出现编译问题。

实测已经可以了，谢谢大佬～

[wangyunzi]

大佬，部署到vercel上还是出现错误

[frankcbliu]

@wangyunzi 检查一下你的 site.config.js文件里有没有 footCounterList 这个配置项。理论上直接克隆我的项目部署是不会有代码内容上的错误才对，有点奇怪。

[JIeJaitt]

大佬，请问就是nextjs-notion-starter-kit 他默认显示图片，但是我不是很喜欢博客的文章显示太多头图，我希望就是简单纯粹的文字摘要替代头图的位置，但是貌似nextjs-notion-starter-kit 并没有关闭文章头图这个功能。另外就是nextjs-notion-starter-kit 自带的Automatic Social Images自动生成文章头图也没成功不知道怎么回事，我想知道这个功能究竟是如何使用的

[JIeJaitt]

另外就是，现在好像是site.config.ts而不是site.config.js了，作者的文档写的也不是很细，现在也不解答issue了，听说好像是去最近比较火的chatgpt那里工作去了

[ispacekid]

请问下能帮忙看看这是什么原因吗？

[JIeJaitt]

请问下能帮忙看看这是什么原因吗？

构建失败，一般是配置文件出错了，你再仔细检查一下自己的配置文件有没有写错，比如notionID或者看看你对应的页面有没有设置成公开

[frankcbliu]

大佬，请问就是nextjs-notion-starter-kit 他默认显示图片，但是我不是很喜欢博客的文章显示太多头图，我希望就是简单纯粹的文字摘要替代头图的位置，但是貌似nextjs-notion-starter-kit 并没有关闭文章头图这个功能。另外就是nextjs-notion-starter-kit 自带的Automatic Social Images自动生成文章头图也没成功不知道怎么回事，我想知道这个功能究竟是如何使用的

@JIeJaitt 如果想改头图这块，需要克隆他更上层的一个组件来改。react-notion-x 自动文章头图这个应该是指把文章转发到推特之类的社交媒体网站时，会通过 open meta 信息生成图片。

[JIeJaitt]

如果想改头图这块，需要克隆他更上层的一个组件来改。react-notion-x 自动文章头图这个应该是指把文章转发到推特之类的社交媒体网站时，会通过 open meta 信息生成图片。

谢谢，我懂了

[JIeJaitt]

大佬，请问就是nextjs-notion-starter-kit 他默认显示图片，但是我不是很喜欢博客的文章显示太多头图，我希望就是简单纯粹的文字摘要替代头图的位置，但是貌似nextjs-notion-starter-kit 并没有关闭文章头图这个功能。另外就是nextjs-notion-starter-kit 自带的Automatic Social Images自动生成文章头图也没成功不知道怎么回事，我想知道这个功能究竟是如何使用的

@JIeJaitt 如果想改头图这块，需要克隆他更上层的一个组件来改。react-notion-x 自动文章头图这个应该是指把文章转发到推特之类的社交媒体网站时，会通过 open meta 信息生成图片。

打扰了，大佬。我发现我把自己的文章发到推特之后还是没有自动生成头图。然后我观察作者的博客在目录的下面有转推的按钮，而我按照作者配置文档配置的却没有，我不知道哪里出错了。另外这个主题有转发到推特这个社交媒体这个功能吗？这是作者博客的链接：https://transitivebullsh.it/oss-twitter-algorithm-part-1

我查看了作者的配置文档之后仍然不知道问题出在哪儿

[frankcbliu]

打扰了，大佬。我发现我把自己的文章发到推特之后还是没有自动生成头图。然后我观察作者的博客在目录的下面有转推的按钮，而我按照作者配置文档配置的却没有，我不知道哪里出错了。另外这个主题有转发到推特这个社交媒体这个功能吗？这是作者博客的链接：https://transitivebullsh.it/oss-twitter-algorithm-part-1

我查看了作者的配置文档之后仍然不知道问题出在哪儿

参考你给的链接，自动申请图片的效果是这样的：

按道理原作者现在的代码就是内置这个能力的

[JIeJaitt]

打扰了，大佬。我发现我把自己的文章发到推特之后还是没有自动生成头图。然后我观察作者的博客在目录的下面有转推的按钮，而我按照作者配置文档配置的却没有，我不知道哪里出错了。另外这个主题有转发到推特这个社交媒体这个功能吗？这是作者博客的链接：https://transitivebullsh.it/oss-twitter-algorithm-part-1

我查看了作者的配置文档之后仍然不知道问题出在哪儿

参考你给的链接，自动申请图片的效果是这样的：

按道理原作者现在的代码就是内置这个能力的

阳了几天才好。我刚刚试了一下，我自己的利用notion复制的作者的两个博客文章，https://jiejaitt.vercel.app/custom-slug 和 https://jiejaitt.vercel.app/example-article 发到推特也无法生成头图不知道为啥 。但是我尝试了作者的和大佬你的博客文章，都是可以正常生成的，我对比了我和作者的配置文件，基本感觉没问题，这是啥情况呢？

[frankcbliu]

@JIeJaitt 感觉国内网络墙了vercel，我这边打不开vercel部署的网站了。你可以看下页面源码(chrome下按F12)，看是否有下面这几个meta标签，以及content是否能正常打开：

[JIeJaitt]

@JIeJaitt 感觉国内网络墙了vercel，我这边打不开vercel部署的网站了。你可以看下页面源码(chrome下按F12)，看是否有下面这几个meta标签，以及content是否能正常打开：

我试了一下，都有这两个标签，但是都是打不开的

[JIeJaitt]

@frankcbliu 大佬，这两个meta都有，但是都是无法正常打开的。请问问题出在哪儿呢，我试了你们的博客都是能正常打开的

[frankcbliu]

@frankcbliu 大佬，这两个meta都有，但是都是无法正常打开的。请问问题出在哪儿呢，我试了你们的博客都是能正常打开的

你比较下链接有啥区别，或者发出来看下。按道理这里应该是notion上的图片链接地址。

[JIeJaitt]

你比较下链接有啥区别，或者发出来看下。按道理这里应该是notion上的图片链接地

从上到下依次是我的，作者的和大佬你的。我觉得没什么区别，除了我的都可以正常显示

• https://jiejaitt.vercel.app/api/social-image?id=eee28de5-b751-4671-8766-59954a8deb51

• https://transitivebullsh.it/api/social-image?id=d1b5dcf8-b9ff-425b-8aef-5ce6f0730202

• https://www.notion.so/image/https%3A%2F%2Fwww.notion.so%2Fimages%2Fpage-cover%2Fmet_william_turner_1835.jpg?table=block&id=40362e4b-8973-491b-bbc1-47237f1e9227&cache=v2

[JIeJaitt]

@frankcbliu 大佬能看出啥原因吗，是不是因为我没有使用自定义域名。实在不行我这两天全部推倒重建一次吧

[roostinghawk]

请问下能帮忙看看这是什么原因吗？

是最新版本 node 问题，已经提了 PR：https://github.com/frankcbliu/awesome-nextjs-notion-blog/pull/11

[roostinghawk]

测试评论功能

[frankcbliu]

@JIeJaitt 看你提供的图片链接，感觉也没啥问题。实在不行就用自定义域名试试。

[BaldStrong]

请问firebase的三个文档具体怎么设置呢？我搞了一下，上传不上去图片，导致yarn build一直卡住

[VIkill33]

感谢博主大佬，已经部署成功了。提醒一下后面来的同学，如果绑定自己域名，打开后报错重定位次数过多的话，需要在cloudflare里把SSL安全模式设为完全（严格）。

[socekin]

@with1874 @wangyunzi 关于Internal Server Error 的问题，我已经发现原因了。目前的代码默认要求配置 FireBase, 忘记做一些兼容性措施了。目前已简单修正，不会影响编译。你们可以获取最新代码重试下。目前可能还有一些小报错，可以先忽略，等我抽空再解决下这个问题。 如果你们按照博客后续的教程配置了Firebase，应该也不会出现编译问题。

Internal Server Error，拉取最新的代码还是会有这个问题，改了自己的URL ID出现的

[murenren1]

当我的子页面标题包含英文和中文 就不能打开网站 当我的子页面标题只有中文 就可以打开 什么原因 我给你两个不同标题 的链接 分析什么原因造成的 https://www.hyhai.com/77c3c7845d94433188773a0a43713a3b 这是纯中文标题的链接 标题是“首届开发者大会重点速览” https://www.hyhai.com/openai 这是中英标题的链接 标题是“OpenAI首届开发者大会重点速览”

[frankcbliu]

@murenren1 这个问题有点奇怪哈，你看我这篇博客，本身名称上就是包含中英文的【如何用Notion搭建自己的博客】，并没有你说的这个问题。此外你目前这两个链接，我这边看都是 404，你看看是不是部署上有啥报错？

[zakokun]

请问在执行 yarn 命令的时候爆这个错误怎么办：

ERR! sharp Prebuilt libvips 8.9.1 binaries are not yet available for darwin-arm64v8

貌似 sharp 这个组件不能在苹果芯片下运行，于是我尝试在 node 16 版本的 linux 容器中运行，再执行 yarn 命令的时候又出现这个错误：

ERR! sharp Use with glibc 2.28 requires manual installation of libvips >= 8.9.1
info sharp Attempting to build from source via node-gyp but this may fail due to the above error
info sharp Please see https://sharp.pixelplumbing.com/install for required dependencies
gyp info it worked if it ends with ok
gyp info using node-gyp@9.1.0
gyp info using node@16.20.2 | linux | arm64
gyp info find Python using Python version 3.7.3 found at "/usr/bin/python3"
gyp http GET https://nodejs.org/download/release/v16.20.2/node-v16.20.2-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v16.20.2/node-v16.20.2-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v16.20.2/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v16.20.2/SHASUMS256.txt
gyp info spawn /usr/bin/python3
gyp info spawn args [
gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/app/notion-blog/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/local/lib/node_modules/npm/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/root/.cache/node-gyp/16.20.2/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/root/.cache/node-gyp/16.20.2',
gyp info spawn args   '-Dnode_gyp_dir=/usr/local/lib/node_modules/npm/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/root/.cache/node-gyp/16.20.2/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/app/notion-blog/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
make: Entering directory '/app/notion-blog/node_modules/sharp/build'
  CC(target) Release/obj.target/nothing/../node-addon-api/nothing.o
  AR(target) Release/obj.target/../node-addon-api/nothing.a
  COPY Release/nothing.a
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
<command-line>: warning: "_GLIBCXX_USE_CXX11_ABI" redefined
<command-line>: note: this is the location of the previous definition
../src/common.cc:23:10: fatal error: vips/vips8: No such file or directory
 #include <vips/vips8>
          ^~~~~~~~~~~~
compilation terminated.
make: *** [sharp.target.mk:139: Release/obj.target/sharp/src/common.o] Error 1
make: Leaving directory '/app/notion-blog/node_modules/sharp/build'
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:201:23)
gyp ERR! stack     at ChildProcess.emit (node:events:513:28)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:293:12)
gyp ERR! System Linux 6.10.4-linuxkit
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /app/notion-blog/node_modules/sharp
gyp ERR! node -v v16.20.2

有点头疼，请问有解决方案吗？