基于Notion+Hugo部署个人博客

type
status
date
slug
summary
tags
category
icon
password
旧文重发，时隔半年决定进一步开源我自己的博客仓库来辅助理解。
 
由于对上一次博客的构建方式不满，这一次尝试了通过 Notion + Hugo作为内容管理的方式来构建，方便自己写博客。
 
以下是我部署的教程。
notion image

1、使用模板创建仓库

首先你要注册 github账号，注册后点击复刻我的Notion模板仓库 ，创建一个新的仓库，选择"public" 权限。
 
有经验的话，可以将仓库重命名为 （你的用户名）.github.io，不要使用中文命名。
 
注意，这里的命名和你后面部署生成的 github Pages 地址有关系：
  1. 如果是 你的github用户名.github.io，那就访问生成的地址就会是 https://你的github用户名.github.io/
  1. 如果是其他命名比如 yuantest，那访问生成的地址就会是 https://你的github用户名.github.io/yuantest/
notion image
 
 

2、创建 Noiton 集成

使用你的 Noiton 账户访问 my integrations ，点击“Create new integration”。
notion image
 
在能力项中，选择“Read Content”和“Read user information including email address”。这个"Read Content"权限是 Notion-Hugo 获取 Notion 必须的权限。
 
这个“Read user information including email address”权限可以用来填充 MD 中的“Front Matter 的作者信息”。
 
notion image
 
勾选完成后，点击提交按钮就创建好 Notion 集成了。
 
 

3、创建 Github Actions 的密钥

 
这一步主要是将你的 Notion 集成的令牌提供 github 仓库使用，这意味着这个仓库可以通过集成调用你的 Noiton 内容。
 
首先，复制你创建集成中的“Internal Integration Token”。
notion image
 
打开你之前克隆模板后的仓库，点击此仓库的“Settings”，找到“Secrets-Actions”。在这里你需要点击右侧的“New Repository Secre”按钮，来创建 github Action 的密钥。
 
notion image
 
在弹出窗口中，命名新密钥为 NOTION_TOKEN 并把之前复制的“Internal Integration Token”粘贴进“Secret”里，点击“Add secret”。
 
notion image
 
这样，你已经完成了 github Action 的配置了。
 
 

4、创建 Notion 模板副本和连接

 
浏览器打开链接： https://www.notion.so/dearlaywer/hugo-f5630360bbaf4c569c9fabe254a32516
 
在页面的右上角点击“Duplicate”，把当前 Notion 模板拷贝到自己的 Notion 账户中（在你的空间里）。
 
找到刚才你创建副本的模板，点击“更多”图标，找到“Add connections”，点击它并选择你之前创建的 Notion 集成。
notion image
 
这样，你就完成 Notion 页面到 Notion 集成的配置了。
 
内容传播的思路就是“Notion 页面连接到 Notion 集成， Noiton 集成密钥到 Github 仓库。”
 
 

5、配置你的 Hugo 站点

 
在正式配置之前，你还需要点击 Notion 模板的“Share”按钮，将这个页面发布到互联网中，Notion 会给你一个公开链接。
 
点击这个链接右侧的“copylink”，开始配置站点。
notion image
现在请你打开你的模板仓库，找到配置文件 notion-hugo.config.ts 文件，点击右侧的“edit the file”按钮。
notion image
 
将你在 Notion 模板点击 share 得到的链接，替换掉 page_url 字段后面的值，注意将链接完整地放进双引号中。
 
notion image
 
点击“commit changes”按钮，提交保存当前修改。
notion image
 
接下来你需要打开当前仓库的“Setting”，从左侧找到“Pages”选项，点击。
notion image
 
在“Build and deployment”中，找到“Source”选项，将其从“Deploy from a branch”设置为“Github Acitons（Beta）”，这样你就完成了 github Pages 的配置了。
 
最后一步是绑定域名。
 
如果你有自己的域名，除了完成你自己的服务商注册意外，你还需要两件事：
  1. 在你的主题目录下比如我这里是 paper，找到路径 paper/static，在这个目录下创建一个名为 CNAME 的文件，接着在 paper/static/CNMAE 里，填写“你的访问域名”，并提交保存。
  1. 把你的访问域名添加到文件 config/_default/config.toml 中，替换里面的 baseURL 的值。比如你的域名是 www.happyfou.com，你就需要把这个替换 baseURL 的值。
 
如果你没有购买域名的话，就会被 github Pages 分配一个域名，你只需要把对应生成的地址比如 https://yuanfoudev.github.io 替换掉 baseURL 的值即可。
 
这样，你就可以获得一个基于 Notion 的博客了。此后你需要在 Notion 模板中写作，剩下的交给自动化即可。由于本博客系统是集成 Hugo 的，如果你对博客的主题不满意的话，还可以访问 Hugo主题，深入了解并进行主题的配置。
 
我这个教程使用的主题是“Paper”，并做了一些改进，你可以点击访问了解我的 demo站点。
 
 
🎉也欢迎你直接联系我，来咨询有关于 Notion + Hugo的问题。

© 元否 2023-2024