配置入门

category
tags
type
status
slug
date
password
Last edited time
Aug 18, 2023 10:51 AM
summary
icon

如何配置站点

💡
首次部署成功后,不需要每次都重新导入Vercel。您可以在笔记或Github代码中快速更新您的站点,诸如切换主题、开启音乐组件、开启评论插件、开启动画特效、修改网站字体等等。

1. 在Notion中修改

在Notion页面中,以下四个元素将会直接同步到网页作为站点信息:
Notion元素
站点信息
图标
作者头像
标题
站点标题
描述
站点描述
封面图
封面大图
关于封面大图,Matery和Hexo主题首页 有一张背景大图,对应修改此处的封面图4即可。
图标①、标题②、描述③及封面图④ 分别对应站点的作者头像、站点标题、站点描述和封面大图。
图标、标题、描述及封面图分别对应站点的作者头像站点标题站点描述封面大图
 

关于网站图片

如何修改网站的头像
notion image
如何修改每篇文章的封面图
notion image
💡
注意!网站图片的大小直接影响整个站点的访问性能。建议在保证图片清晰可见的前提下,尽可能压缩文件大小。建议调整图片尺寸并进行压缩,最好能转换成webp格式后上传。

2. 修改源代码

💡
重要:站点的大部分配置都可以在blog.config.js文件中找到; 您只需修改对应的配置,Vercel将自动部署您Github仓库中的最新代码。
配置方法:在您的github中找到此文件,点击右上角的编辑按钮,可以任意修改参数。
notion image
💡
每次修改代码后,Vercel自动创建一个部署任务以打包部署您的最新代码,且每次部署任务都有唯一的网址提供预览
  • 若编译成功:您的线上域名会更新为此次部署的最新版本
  • 若部署失败:例如代码格式错误、拼写错误,则这次部署则会作废,线上原先运行中的旧版网站不受任何影响。您可以查看后台部署日志找到错误原因。
附-如何获取部署日志
截图您的部署日志,向群友寻求帮助
  1. 在Vercel的后台看到您的每次部署记录(点击展开)
    1. notion image
  1. 请截图部署的错误日志,错误信息越完整越好;
    1. notion image

3. 在环境变量中配置(推荐)

除了直接修改blog.config.js ,可以在vercel后台添加环境变量;这样做的好处是减少对代码的改动,也避免了后续升级时代码发生冲突的概率。
  • blog.config.js 文件中可以看到类似 process.env.NEXT_PUBLIC_THEME 的格式,这意味着此类参数支持在Vercel中使用环境变量来配置。
    • 网站优先读取环境变量配置、其次是文件中的配置。
      • 💡
        用后台环境变量配置的好处:有些敏感信息不适合直接在代码中修改,例如一些第三方插件的key,这时候推荐通过环境变量来配置。

    Vercel环境变量如何操作

    1. 项目主页点击Settings,并选择Environment Variables配置环境变量
      1. notion image
    1. 找到Setting → Environment Variables
      1. notion image
    1. 在Key中填写配置名称,Value中填写配置的值,如下图:
      1. notion image
    1. 环境变量修改后,点击顶部Deployments标签,将列表中最上面的一条部署记录Redeploy即可(如下图)
      1. notion image
     

    VPS本地部署如何操作环境变量

    直接在项目更根录的 .env.local 文件中添加环境变量即可:
     

    注意事项

    💡
    网站优先读取环境变量,最后读取代码配置。
    隐藏单页基础信息
    • Twikoo
    • Giscus
    • Cusdis