Lazy loaded image
教程
免费搭建网站/个人博客/快速搭建网站教程
字数 1155阅读时长 3 分钟
2026-2-14
2026-2-26
type
Post
status
Published
date
Feb 14, 2026
slug
20260226
summary
免费搭建个人网站
tags
教程
推荐
category
教程
icon
password
💡
搭建网站教程是参照 Notion Next ,搭建Notion网站的原文作者!

一、复制Notion模板

  1. 请先注册您的Notion账号。
  1. 打开链接:Notion模板 右上角点击Duplicate(复制),添加模板到您的工作区
    1. notion image
  1. 右上角点击Share(分享)Publish(发布)Publish(发布),开启页面分享,获取共享链
    1. notion image
  1. notion模板当前页面,网址url中间的一串32位字母与数字(ID属性名称为NOTION_ID,后面步骤需要用到)
    1. notion image

二、复制Github模板

  1. 请先注册您的Github账号。⚠️注意,请不要使用qq邮箱等国内邮箱,尽量使用hotmailgmail等国际邮箱,否则下一步登陆vercel后会提示账号被封禁。
  1. 进入 Github模板 点击Create fork
    1. notion image

三、Vercel部署

  1. 点击 Vercel 使用Github账号登录,然后点击 Continue
    1. notion image
      notion image
  1. 点击New Project 然后点击 Install
    1. notion image
  1. 选择Only select repositories 点击Select repositories,并选择.../NotionNext,然后点击 Install
    1. notion image
  1. 点击 Verify via email(通过电子邮箱验证) 去登录邮箱找到验证码填好后点击 Verify
    1. notion image
  1. 点击 Import 点开 Environment Variables KEY 填写:NOTION_PAGE_ID Value:您的NOTION_ID (NOTION_ID 是Notion网址url中间的一串32位字母与数字) 最后点击 Deploy
    1. notion image
      notion image
  1. 配置成功,点击 Continue to Dashboard
    1. notion image
  1. 部署是否成功,点击链接看下~ 右图是已经部署成功!
    1. notion image
      notion image
  1. 环境变量修改/增加 依次点击 SettingsEnvironment VariablesAdd Environment Variable
    1. notion image
  1. KEY 填写:NOTION_PAGE_ID Value:您的NOTION_ID (NOTION_ID 是Notion网址url中间的一串32位字母与数字)
notion image

四、Notion谷歌扩展程序(推荐)

推荐使用谷歌浏览器,并安装以下扩展程序
  1. Notion中文
  1. Notion Boost

五、Notion网站主题切换(三种方式)

  1. (推荐)登录Github 点击 blog.config.js
    1. 改动第8栏的代码,例如:example,fukasawa,gitbook,heo,hexo,landing,matery,medium,next,nobelium,plog,simple
      notion image
      notion image
  1. 在vercel后台添加环境变量(忘记怎么添加?) key填写: NEXT_PUBLIC_THEME value: hexo
    1. 添加环境变量后记得在Deployment中重新部署 如下图操作
      notion image
  1. 使用Notion_config,在您的notion笔记中配置默认主题(不推荐)
    1. notion image
      notion image

六、编辑/新增文章

编辑文章/新增文章需要在notion 操作
  1. 编辑文章:需要修改文章的title栏 点击 OPEN新增文章:右上角 点击 新增
    1. notion image
      notion image
  1. 排序文章:鼠标停在表格的左侧,并提示拖动以移动,此时即可拖动文章进行排序。
    1. notion image
  1. 文章模板属性
    1. 属性
      必填
      说明
      备注
      title
      文章标题
      status
      发布状态
      (仅当状态为Published 时会被 展示)
      type
      页面类型 (博文Post / 单页(Page)
      单页不会在博文列表显示 。
      summary
      内容摘要
      搜索和简略显示会用到,在文章列表会显示出
      date
      发布日期
      在V3.3.9之前的版本此项为必填。
      category
      文章分类
      可以自定义
      tags
      文章标签
      可多个,建议不要太多
      slug
      文章短路径
      (每篇文章唯一,请勿 重复)
      icon
      菜单栏图标(仅当Page/Menu类型有效)
      可以参考:图标库地址
      password
      文章加锁
      需要输入密码才允许访问
       
    2. type: 这条数据的类型 ,有 notice(公告)、post(文章)、page(单页)、menu(菜单)、submenu(子菜单)这几种类型
    3. slug ,根据数据类型,有不同的作用:
        • 在菜单(Menu\SubMenu)中表示跳转到哪个页面, 在文章中表示这篇文章在博客中的访问地址、也可以是外链。通常以左斜杆开头: /test-menu对应访问 → https://站点域名/testmenu。也可以设置成完整的外链,例如https://tangly1024.com
        • 在单页中(Page), 表示这个页面在站点根目录的文件名。不要以左斜杆开头: 例如 test-page → 对应 https://站点域名/test-page
        • 在博文中(Post),也表示文件路径,但是博文会自动添加一个前缀。例如: test-post 则可以通过 https://域名/article/test-post 访问到这个博客,这里的article是默认配置的前缀。
  1. 文章属性对照位置
    1. Notion编辑后台页面
      Notion编辑后台页面
      网站展示效果
      网站展示效果
  1. 图片封面设置 右上角点击 Change→上传
    1. notion image
      notion image
      文章封面图:1500X686    黄色区域为封面图/绿色区域为最新发布封面图
      文章封面图:1500X686 黄色区域为封面图/绿色区域为最新发布封面图
  1. 刷新/重新部署网站
    1. notion image
  1. URL构成
    1. notion image

七、网站配置

 
上一篇
铝合金桌面小台钳
下一篇
铝合金桌面小台钳

评论
Loading...