morethan-log

<img width="1715" alt="image" src="https://yellow-cdn.veclightyear.com/ab5030c0/2b6c7bfd-ed51-42b5-a67a-7e6b78bd7b43.png">

使用Notion作为内容管理系统(CMS)的Next.js静态博客。支持博客格式的文章以及简历用的页面格式。使用Vercel部署。

演示博客 | 演示简历

特点

📒 使用Notion撰写文章

• 无需提交到Github即可在您的网站上发布内容。
• 在Notion上创建的文章会自动更新到您的网站上。

📄 将页面用作简历

• 适用于使用Notion生成全页面网站。
• 可用于简历、作品集等。

👀 对SEO友好

• 为文章动态生成OG图像（缩略图！）。（og-image-korean）
• 动态创建文章的站点地图。

🤖 可定制，并通过配置支持各种插件

• 可以通过配置更新您的个人资料信息。（site.config.js）
• 插件支持包括Google Analytics、Search Console，以及使用Github Issues（Utterances）或Cusdis进行评论。

开始使用

1. 为此仓库加星。

2. Fork此仓库到您的个人资料。

3. 复制这个Notion模板，并分享到网络。

4. 复制网络链接，并记下链接中的Notion页面ID，格式为[username.notion.site/NOTION_PAGE_ID?v=VERSION_ID]。

5. 克隆您fork的仓库，然后根据您的偏好自定义site.config.js。

6. 在Vercel上部署，设置以下环境变量。

   • NOTION_PAGE_ID（必需）：从"分享到网络"URL获得的Notion页面ID。这不是完整的URL，而只是如上所示的NOTION_PAGE_ID部分。
   • NEXT_PUBLIC_GOOGLE_MEASUREMENT_ID：用于Google Analytics插件。
   • NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION：用于Google Search Console插件。
   • NEXT_PUBLIC_NAVER_SITE_VERIFICATION：用于Naver搜索顾问插件。
   • NEXT_PUBLIC_UTTERANCES_REPO：用于Utterances插件。

10步构建您自己的morethan-log（截至23.06.23）

<details> <summary> 点击查看指南 </summary>

0. 准备Notion和Vercel账户。

1. ⭐ Star并Fork此仓库。

   <img src='https://github.com/jhk0530/morethan-log/assets/6457691/b0421776-2bfe-42bc-ae31-d90206fd5789' width = '500'>

<img src='https://github.com/jhk0530/morethan-log/assets/6457691/185a8e4c-4ae2-4a38-b6f4-dc2a06a45c28' width = '500'>

2. 当您点击Notion模板时，您将在浏览器中看到这个Notion页面。点击右上角的复制按钮（图中为"复制"）。

   <img src='https://github.com/jhk0530/morethan-log/assets/6457691/a5375429-28f0-4bba-a355-0d391cad58db' width = '500'>

3. 然后您将在您的账户中看到Notion应用中的Notion页面。

   <img src='https://github.com/jhk0530/morethan-log/assets/6457691/09af5533-43d9-48e5-95eb-dcac84c97c1f' width = '500'>

4. 点击右上角的"共享"和"发布",并检查网页链接。(复制网页链接) <img src='https://github.com/jhk0530/morethan-log/assets/6457691/886fe4a2-79ca-4dbc-b1e1-93984e7e3f44' width = '500'>

   5. 在您fork的仓库中修改 site.config.js 文件。

   💡 注意：我更改了2个红色部分

   <img src='https://github.com/jhk0530/morethan-log/assets/6457691/3d9c0da5-92bc-4372-8752-7bfc810b4986' width = '500'>

   6. 转到 vercel 并登录。

      <img src='https://github.com/jhk0530/morethan-log/assets/6457691/07742ad0-4766-43b0-9ebd-5311f9711bc2' width = '500'>

   7. 使用添加新项目来构建新项目。

      <img src='https://github.com/jhk0530/morethan-log/assets/6457691/517d46be-c9bf-4181-aaa5-e9bd2fcdc822' width = '500'>

   8. 导入您fork的morethan-log仓库

      <img src='https://github.com/jhk0530/morethan-log/assets/6457691/07742ad0-4766-43b0-9ebd-5311f9711bc2' width = '500'>

   9. 向vercel项目添加环境变量

      <img src='https://github.com/jhk0530/morethan-log/assets/6457691/703b50a3-3a90-4915-ab73-1baca4c285f8' width = '500'>

   10. 等待部署完成。部署成功后，您应该会看到如下图所示的画面。

       <img src='https://github.com/jhk0530/morethan-log/assets/6457691/a7d72caa-4354-4f81-9577-c773faeed7c6' width = '500'>

   🥳 恭喜。现在检查您的博客

   <img src='https://github.com/jhk0530/morethan-log/assets/6457691/3876a273-a270-47ef-a2ad-663519d9e537' width = '500'>

常见问题

<details> <summary> 点击查看常见问题 </summary> 问题1：如果您完成了avatar.svg的制作，如何制作favicon.ico和apple-touch-icon.png？

答案1：请查看 https://www.favicon-generator.org/

问题2：是否需要设置sitemap文件？
答案2：系统会动态创建sitemap.xml，所以无需手动设置。

问题3：为什么Notion帖子不会自动更新？
答案3：请在site.config.js中设置revalidateTime，并观察需要多长时间才能更新。

问题4：site.config.js中的NEXT_PUBLIC_GOOGLE_MEASUREMENT_ID和NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION应该输入什么？ 答案4：您可以查看 https://github.com/morethanmin/morethan-log/issues/203。请注意，设置后可能需要一些时间才能生效。

如果您遇到任何其他问题，请随时将它们添加到GitHub的README中，以帮助未来的用户。我们期待您的贡献！

</details>

贡献

查看贡献指南。

贡献者

<a href="https://github.com/morethanmin/morethan-log/graphs/contributors"> <img src="https://contrib.rocks/image?repo=morethanmin/morethan-log" /> </a>

支持

morethan-log 是一个MIT许可的开源项目。它能够成长要归功于赞助商和令人惊叹的支持者的支持。

赞助商

<p> <a href="https://github.com/siyeons"><img src="https://avatars.githubusercontent.com/u/35549653?v=4" width="50px" alt="siyeons" /></a>&nbsp;&nbsp; </p>

许可证

MIT 许可证。