Lazy loaded image
Article
1️⃣建站开篇
字数 2029阅读时长≈ 6 分钟
2025-5-5
2025-5-9
type
status
date
May 9, 2025 07:50 PM
slug
summary
tags
category
icon
password
Rating
Status

关于建站

2025-5-3 搭建了这个博客 编写了Github自动化 Action 会在每天 北京时间8点左右 自动部署刷新静态网页 通过Github pages 部署 私有仓库 drNotionSync 执行自动化操作刷新
下面说说有关这个的小知识

搭建过程

我忘记我是怎么发现的这个项目，可能是无聊逛Github看到的
NotionNext
tangly1024 • Updated May 5, 2025
参考别人的做法，我也将其部署到github pages / cloudflare pages

NotionNext

首先下载项目代码，然后搭建自己的。 我创建了新项目并将其发布到github仓库，私有仓库
他们的文档还是挺简单挺直观的：
NotionNext-快速免费建站 | NotionNext帮助手册
无需服务器、即使是小白也能几分钟搭建自己的独立博客站～如果你在使用Notion这款神级笔记本的话，不妨来试试顺手建个网站🤣🤣🤣，这是一款基于NotionAPI的博客系统。
NotionNext-快速免费建站 | NotionNext帮助手册
https://docs.tangly1024.com/about
NotionNext-快速免费建站 | NotionNext帮助手册
clone他人项目部署运行，环境是首要问题，我当前并没有这方面的知识 都是边做边学
拷贝Notion模板到自己Notion：
https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5?v=b7eb215720224ca5827bfaa5ef82cf2d&pvs=4
然后Notion部署上线 复制得到 pageId 也就是 site/后面到 问号区域的
项目代码根目录有个.env.example 自己创一个.env.local

环境配置

1.node安装
2.yarn安装
遇到什么问题自己解决，上网搜索很简单的
3.本地跑一下
命令
输出目录
用途
yarn build
.next/
SSR / 生产服务启动用
yarn export
out/
静态站点部署用（纯 HTML）
导出你通过本地计算机的files://访问 时，显示异常的
将out文件夹部署到github pages 时，要注意加个名为.nojekyll的空白文件
4.其他

部署上线

Github pages

在仓库的设置页面的左边导航栏选择pages即可看到
💡
起初我是部署到了github pages 上 新建一个仓库名github :【username.github.io】 其中username为你的用户名
然后将输出的静态文件打包到此仓库，我是放在docs文件夹内，方便根目录防止readme.md等文档
要特别注意在docs内加个.nojekyll 文件，不然访问时的网页静态文件无法正常显示，导致网页显示异常
等一会部署好之后，即可通过 username.github.io访问网页
有一点值得注意，比如我的仓库名非要是username.github.io吗？ 其实不用，只不过是主页面 如果你创建一个 mySoBlog 的仓库，启用pages服务，通过username.github.io/mySoBlog 也能访问
进阶玩法
  • Actions 自动化部署
下面操作基于 我的 drNotionSync 项目代码私有仓库
因为当前我们只是将自己本地通过命令生成的out文件夹内容放在了仓库下，本质上是静态页面，如果我们在Notion上进行了相关的修改，如发布了新文章之类的，那么它肯定无法更新。
我们不可能每次都在本地自己跑一边然后在push到仓库，这样太麻烦了。
所以这里通过自动化来部署
具体步骤如下：
  1. 在你的代码项目仓库根目录添加 .github/workflows文件夹，下面放个文件：deploy.yml
      2. notion image
  1. deploy.yml里写入部署的代码
      2. 下面执行的操作 其实就是和本地差不多，运行一些命令
      之后将其输出的out文件夹push到我的dr0006.github.io/docs下
      这里需要注意，因为我的部署代码放在私有仓库，想要push到我的另一个仓库，就得设置一下（相关的操作是GPT告诉我的，因为一开始我也不清楚）
      代码就不贴完整了，跟ai仔细描述需求，都能给你生成
      notion image
      在代码里除了那些生成命令和导出push到仓库dr0006.github.io的docs文件夹之外，还要注意先清理旧 docs，复制新构建内容
  1. 此外，还必须要添加一个.nojekyll的空白文件，因为导出的out文件夹内容并没有这个，所以也可以通过代码添加
  1. 如果你有域名，还要添加CNAME文件,比如我的：
    • 自定义域名的设置
    如果你购买了域名，那么还可以自定义域名
    在你的github pages 仓库找到：
    notion image
    不过在设置前，需要先进行域名解析。
    你可以ping 一下你的 username.github.io ，可以得到地址
    其实都一样 我在阿里云买的域名
    找到该域名 点击解析
    添加记录 @ 的类型 A
    185.199.108.153 - 185.199.111.153 四个最好都加上
    notion image
    还需要一个 www 的类型为CNAME的记录，至于记录值，就是你部署的地址 dr0006.github.io
    此外呢，我在 dash.cloudflare.com 可以通过配置dns来加速。
    不过经过测试，访问还是好慢滴
    最终呢，我决定部署到cloudflare pages上

    cloudflare pages

    notion image
    在左边导航栏的计算（Workers）子导航栏下
    连接到你的github的pages仓库
    （没开权限就开，推荐自己选择要用的，而不是全部）
    部署到cloudflare 呢，也记得获取一下dns,因为之前在阿里配置了，按理来说是可以快速自动获取的，没有的自己加记录
    同时把github pages 关掉
    CNAME类型 域名名称，内容为 cloudflare pages的地址（代理状态开启）
    总的来说，我还是很新手，毕竟是从零摸索
     
    国内访问速度，是否快速呢？要怎么设置好不出问题
    cloudflare pages比github相对较快 再看看优化吧。不过目前没太大需求
    notion image
    notion image

    小结

    我可能不会怎么更新，但是作为娱乐项目搞着玩玩而已也不错。 部署到境外服务器，不需要备案，我也不想去备案，有点麻烦 cloudflare pages 和github pages 都是境外的，不需要备案可以访问 后续可以试着看看动态网站的开发，不过需要有台服务器玩玩。 目前需求不大 到时候再看。看看是否闲着没事 搞来玩玩 访问速度时快时慢的 emmmm 开魔法还行
     
    上一篇
    观影咯
    下一篇
    已看影视—归档
    目录