2023-11-28 08:00:00
Astro.js提供了一个现代，高效，易于使用的框架，使得开发个人博客变得更加简单和直接。
主要特点：
组件群岛: 用于构建更快网站的全新 web 架构。
服务器优先的 API 设计: 移除客户端上高资源消耗的激活过程。
默认零 JS: 没有 JavaScript 运行时开销来减慢你的速度。
边缘就绪: 在任何地方部署，甚至像 Deno 或 Cloudflare 这样的全球边缘运行时。
可定制: Tailwind, MDX 和 100 多个其他集成可供选择。
不依赖特定 UI: 支持 React, Preact, Svelte, Vue, Solid, Lit 等等。
打开官网 Astro ，你可以从0开始构建你的博客。
我更加推荐从主题模板构建你的博客，下面我将介绍如何构建你的Astro博客；
打开Astro主题商城 Themes，挑选出你感兴趣的主题
2、选择感兴趣的主题，关联你新的博客仓库，我选择的主题是：
3、拉取刚刚关联仓库的代码，回到仓库目录安装依赖
npm install
这里注意，node版本必须 >=18.14.1，否则会报错
4、运行项目
npm run dev
这个时候astro的项目已在本地运行成功，接下来在src写构建你的博客内容，目录结构解释如下：
- .astro 这个目录是 Astro.js 项目的根目录，用于存放 Astro.js 的配置文件
- config.js Astro.js 的配置文件，用于指定全局配置选项，例如构建输出目录、插件等
- components 这个目录用于存放 Astro.js 组件，组件是 Astro.js 中最基本的构建单元
- Layout.astro 一个示例组件，用于定义网页的布局和结构。
- dist 这个目录是构建过程中生成的目标输出目录，包含最终生成的静态网页文件。
- pages 这个目录用于存放网站的页面文件，每个页面对应一个 Astro.js 组件。
- index.astro 一个示例页面文件，表示网站的首页。
- static 这个目录用于存放静态资源文件，例如图片、样式表、JavaScript 文件等。
- package.json 这个文件是 Node.js 项目的配置文件，其中包含了项目的依赖项和脚本命令等信息。
- README.md 这个文件是项目的说明文档，通常包含了项目的介绍、使用方法和其他相关信息。
更多配置项请阅读官网文档：https://docs.astro.build/zh-cn/getting-started/
5、基于Netlify自动化部署项目
进入Netlify 官网，导入刚刚的astro-blog仓库
点击 ：Deploy astrojs-blog 开始构建项目
项目构建完成后，修改一下项目域名
Site configuration > General > Site details > Change site name
这样基于astro的个人博客站点就构建好了，我们可以通过互联网访问刚刚配置的域名：https://astro-lzt.netlify.app/
6、自动化部署
接下来你只需要本地修改文件推送到你刚刚关联的仓库，Netlify就会自动检测并拉取你的最新代码进行自动部署，你要做的只是推送一下代码即可！
2023-11-24 15:51:22
当提到网站分析和用户行为追踪工具时，微软的Clarity绝对是世上最强大的埋点工具之一。Clarity是一款免费且开源的工具，旨在帮助网站管理员深入了解他们的用户行为，优化用户体验，并最终提升网站的转化率。
Clarity的强大之处在于它提供了全面而详细的数据分析功能，让网站管理员能够准确地了解用户在网站上的行为。以我博客为例：https://liuziting.netlify.app/
通过Clarity，你可以轻松追踪用户的点击、滚动、鼠标移动、键盘输入以及浏览器调整大小等操作。这些数据将以可视化的形式呈现，使你能够清晰地看到用户在网站上的交互方式和行为习惯。
Clarity还提供了独特的用户会话重放功能，这是一项非常有用的工具。它允许你回放真实用户在网站上的行为，就像观看视频一样。通过观察用户的操作，你可以更好地理解他们在网站上遇到的问题和困难，进而改善用户体验并提高转化率。
除了数据分析和用户会话重放外，Clarity还提供了一些其他有用的功能。例如，它可以帮助你检测页面加载速度，并提供优化建议。它还可以识别和报告出现错误的页面，帮助你及时解决问题。此外，Clarity还支持自定义事件跟踪，你可以根据自己的需求设置和追踪特定的用户行为。
需要注意的是，虽然Clarity提供了强大的数据收集和分析功能，但在使用过程中要确保遵守相关的隐私和数据保护法规。尽管Clarity的数据收集方式是匿名的，但你仍然需要明确告知用户并取得他们的同意。
总而言之，微软的Clarity是一款功能强大且易于使用的埋点工具，为网站管理员提供了全面的数据分析和用户行为追踪功能。通过深入了解用户行为，你可以优化网站的设计和功能，提升用户体验，并最终实现更高的转化率。
最后Clarity承诺永久免费，个人开发者简直狂喜！
使用起来也是十分简单，只需要输入你需要埋点的站点，将 Clarity 代码复制并粘贴到网站或应用的 <head> 元素中，一些第三方应用如WordPress，也同样支持，博客党再次狂喜！
Clarity地址：https://clarity.microsoft.com
2023-11-07 08:00:00
在JavaScript中，我们经常会遇到需要处理可能为空或未定义的变量的情况。这时，如果直接访问对象的属性，往往会导致程序崩溃。为了防止这种情况发生，JavaScript引入了一些新的操作符：可选链操作符(?.)、空值合并操作符(??)和逻辑赋值操作符(??=)。
可选链操作符允许我们安全地读取深层次的属性值，而不必每次都检查中间的对象是否存在。例如：
const user = {};
console.log(user?.address?.title); // undefined, 错误未发生
const arr= {
foo: {
bar: {
baz: 42
}
},
xyz: []
};
const value1 = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined
//除了对属性的检查，还可以用于对数组下标及函数的检查
const value2 = obj?.xyz?.[0]?.fn?.();
// 传统写法
const value1 = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性
const value2 = obj && obj.xyz && obj.xyz[0] && obj.xyz[0].fn && obj.xyz[0].fn();使用场景
链式访问对象属性，而不必手动检查每个属性是否存在。
调用可能不存在的函数。
空值合并操作符是当左侧的表达式结果为null或undefined时，返回右侧的表达式。例如：
const a = null;
const b = undefined;
const c = 0;
const d = '';
cosnt e = false;
const value1 = a ?? 'default'; // 'default'，因为 a 是 null
const value2 = b ?? 'default'; // 'default'，因为 b 是 undefined
const value3 = c ?? 'default'; // 0，因为 c 不是 null 或 undefined
const value4 = d ?? 'default'; // ''，因为 d 不是 null 或 undefined
const value5 = e ?? 'default'; // false，因为 e 不是 null 或 undefined
//可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = a || 'default'; // 'default'
const value2 = b || 'default'; // 'default'
const value3 = c || 'default'; // 'default'，因为 0 转布尔类型是 false
const value4 = d || 'default'; // 'default'，因为 '' 转布尔类型是 false
const value5 = e || 'default'; // 'default'使用场景
提供默认值，而不使用 false 值（如空字符串、0 等）。
在处理可能为 null 或 undefined 的变量时，选择性地提供备用值。
当变量为null或undefined时，使用空值合并赋值操作符可以给变量赋一个默认值。例如：
let a = null;
let b = undefined;
let c = 0;
a ??= 'default'; // 'default'，因为 a 是 null
b ??= 'default'; // 'default'，因为 b 是 undefined
c ??= 'default'; // 0，因为 c 的初始值不是 null 或 undefined
总的来说，这些新的操作符大大增强了JavaScript处理可能为空或未定义的情况的能力，使我们的代码更安全，更易于阅读和维护。
使用场景
在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量
这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持。
2023-11-02 14:27:21
首先Fork一个仓库，地址如下：
https://github.com/ddiu8081/chatgpt-demo
https://github.com/ourongxing/chatgpt-vercel
注册并登录 Vercel ，关联上自己的GitHub
这个网站很强大，用于部署前端服务很方便，也可自行部署在其他平台，或本地部署
1、创建一个Project；
2、选择刚刚Github Fork的 chatgpt 项目 ，点击Import ；
3、编辑项目名，框架预设会默认：Astro，不用修改，点击Deploy；
4、编辑成功后即可看到如下界面，点击 Continue to Dashboard ，打开仪表板；
5、你就会看到已经构建成功，并且Vercel分配了域名；
vercel默认分配的域名已经被墙了，国内不能直接访问。
6、因为默认域名不能访问，所以要配置域名转发，用自己的域名进行访问，点击View Domains；
7、添加一个子域名，例如我的域名是lihail.cn，我添加一个chatgpt.lihail.cn，点击Add；
8、这个时候Vercel会检测你这个域名有没有配置域名解析，解析到chatgpt.lihail.cn，记住下面Type、Name、Value；
9、打开你的域名管理后台：DNS 解析 DNSPod，例如我是腾讯云购买的域名，输入主机记录=Name；记录类型=Type；记录值=Value；最后点击保存；
10、回到Vercel后台，这个时候你会发现，检测到你域名已经解析完成；
点击访问 chatgpt.lihail.cn，就成功了！
11、打开 Openai 官网，登录并且获取自己的API key并复制；
12、点击设置，在OpenAI API Key的位置填入刚刚复制的key并回车；
这个时候就可以愉快的使用chatGPT了~
输入 / 或者 空格 搜索 Prompt 预设例如：周报生成器
基于Vercel部署chatGPT的所有流程已经完成。最后，我们要感谢OpenAI、开源社区和开源工作者的贡献，因为他们让我们能够更加高效地开发和部署自己的项目。
源代码由ddiu提供，ourongxing修改。
2023-03-18 16:58:42
Cursor是一款文本编辑器，但是现在不仅仅是一款文本编辑器了，它集成了GPT-4，除了基础的文本编辑功能外，现在的Cursor还集成了最新的人工智能技术GPT-4。GPT-4是一种强大的深度学习模型，它可以根据用户提供的主题和关键词自动生成高质量的文章和内容。通过Cursor，用户可以轻松地生成各种文本内容，无论是写作、编程、还是其他领域，都能够得到极大的帮助和支持。GPT-4的强大功能使得Cursor成为了一款非常具有竞争力的文本编辑器，它可以帮助用户提高工作效率、节省时间和精力，同时还可以生成高质量的内容，满足用户对于内容质量的要求
接下来我们来试一下他的代码能力：
优化代码
当选中代码时，会弹出提示框，其中包括Edit Ctrl+K和Chat Ctrl+L的选项。如果想要对代码进行优化，可以先使用Ctrl+K快捷键来输入优化命令。
此时，你会惊奇地发现，Cursor迅速对代码进行了优化和精简，只需选择“Accept”即可完成插入。GPT-4的速度非常快，让你的工作变得更加高效。接下来，你可以使用Ctrl+L快捷键，在右侧得到代码优化的建议和相应的代码，这种友好的交互方式让你的编程体验更加愉悦和高效。
编写代码能力
你可以通过点击“新建页面”来创建一个空白页面，然后使用Ctrl+L快捷键，在弹出的提示框中输入“用Vue写一个表单提交页面，UI框架使用Ant，表单包含姓名、性别、身份证、出生年月等字段，且需要验证必填项，最后点击提交按钮进行验证。”，即可快速生成对应的代码。这段代码使用Vue框架编写，UI框架为Ant，表单包含多个字段，并设置了必填项验证，最终需要点击提交按钮进行验证。
这个编辑器生成代码的速度太快了，令人惊叹。而且，生成的代码也非常优秀，几乎没有任何问题。
您可以从Cursor 的官方网站下载编辑器，目前支持Windows、Mac和Linux等多个操作系统。此外，目前该编辑器完全免费，无需支付任何费用，你可以放心使用。（至少目前是这样~）
2023-03-10 08:00:00
为什么用Vercel?
快速部署：Vercel是一个serverless平台，可以快速部署各种类型的应用程序，而且无需担心服务器的配置和管理问题。
自动构建：Vercel支持自动构建，只需要在Github或Gitlab上提交代码，Vercel就会自动构建和部署应用程序。
免费托管：Vercel提供免费的托管服务，可以免费托管静态网站、单页应用程序和服务器端渲染应用程序，并且没有流量限制。
CDN加速：Vercel使用全球CDN加速，可以提高应用程序的访问速度和稳定性。
移动端优化：Vercel支持移动端优化，可以自动适配不同的移动设备和屏幕尺寸，让应用程序在移动端展示更加优美。
支持多种语言和框架：Vercel支持多种编程语言和框架，如React、Vue、Next.js、Gatsby等，可以满足不同开发者的需求。
安全可靠：Vercel提供了高级的安全功能，如SSL证书、DDoS防护、安全扫描等，可以保障应用程序的安全性和可靠性。
什么是Railway?
Railway是一个基于Docker的云原生应用托管平台，可以让开发者轻松地将应用部署到云端。它支持多种编程语言和框架，如Node.js、Python、Ruby等，同时也支持多种数据库和缓存服务，如MySQL、PostgreSQL、Redis等。开发者可以通过简单的命令行操作，快速部署和管理自己的应用程序。
Railway还提供了一些有用的功能，如自动扩展、自动备份、SSL证书、日志管理等，可以帮助开发者更好地管理和维护自己的应用程序。此外，Railway还提供了一个应用市场，开发者可以在市场中找到各种有用的应用程序和服务，如Wordpress、Ghost、Discourse等，以及各种API服务，如短信、邮件、推送等。
总之，Railway是一个功能强大、易于使用、灵活扩展的云原生应用托管平台，可以帮助开发者更好地构建、部署和管理自己的应用程序。
1、首先基于Railway创建数据库
点击 Start a New Project；
选择 Provision MySQL；
点击Connect 下滑，找到Available Variables，这里就是你数据库的信息，复制保存相关信息；
2、配置 Typecho
下载Typecho，点击正式版下载；
解压下载下来的压缩包；
编辑 install.php，定位到第773行至775行，把这3行注释掉（前面加个#）；
添加 vercel.json；
{
"functions": {
"api/index.php": {
"runtime": "[email protected]"
}
},
"routes": [{ "src": "/(.*)", "dest": "/api/index.php" }]
}创建 api 目录并在目录下添加 index.php；
<?php
$file= __DIR__ . '/..'.$_SERVER["PHP_SELF"];
if(file_exists($file))
{
return false;
}
else
{
require_once __DIR__ . '/../index.php';
}
#echo $_SERVER["PHP_SELF"];创建 config.inc.php；
<?php
/**
* Typecho Blog Platform
*
* @copyright Copyright (c) 2008 Typecho team (http://www.typecho.org)
* @license GNU General Public License 2.0
* @version $Id$
*/
/** 开启https */
define('__TYPECHO_SECURE__',true);
/** 定义根目录 */
define('__TYPECHO_ROOT_DIR__', dirname(__FILE__));
/** 定义插件目录(相对路径) */
define('__TYPECHO_PLUGIN_DIR__', '/usr/plugins');
/** 定义模板目录(相对路径) */
define('__TYPECHO_THEME_DIR__', '/usr/themes');
/** 后台路径(相对路径) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');
/** 设置包含路径 */
@set_include_path(get_include_path() . PATH_SEPARATOR .
__TYPECHO_ROOT_DIR__ . '/var' . PATH_SEPARATOR .
__TYPECHO_ROOT_DIR__ . __TYPECHO_PLUGIN_DIR__);
/** 载入API支持 */
require_once 'Typecho/Common.php';
/** 程序初始化 */
Typecho_Common::init();
/** 定义数据库参数 */
$db = new Typecho_Db('Pdo_Mysql', 'typecho_');
$db->addServer(array (
'host' => '数据库地址',
'user' => '数据库用户名',
'password' => '数据库密码',
'charset' => 'utf8mb4',
'port' => '数据库端口号',
'database' => '数据库名称',
'engine' => 'MyISAM',
), Typecho_Db::READ | Typecho_Db::WRITE);
Typecho_Db::set($db);注意，定义数据库参数的位置，就是Railway创建的数据库信息，填入并保存！
3、配置 Vercel
通过 npm 安装 Vercel CLI；
npm -g install vercel
登录，命令行输入 vc login，选择GitHub；
点开这个链接，如果出现下图，说明登录成功；
接着在命令行输入 vc，按照提示一步步Yes；
现在打开你的Vercel，你会发现刚刚创建的项目已经出现了；
4、绑定域名
因为Vercel 部署分配的子域名被墙了，所以需要绑定我们自己的域名
点击 View Domains；
添加一个子域名，例如我的域名是lihail.cm，我添加一个typecho.lihail.cn，点击Add；
打开你的域名管理后台：DNS 解析 DNSPod，例如我是腾讯云购买的域名，输入主机记录=Name；记录类型=Type；记录值=Value；最后点击保存；
接下来返回Vercel ，你会发现，已经配置成功，点击打开分配的地址：typecho.lihail.cn；
如果地址中出现下面的界面，说明部署成功了；
5、安装 Typecho
在地址栏后面加上 /install.php 例如：typecho.lihail.cn/install.php；
确认安装，设置用户名密码，继续安装；
到这里就说明已经安装成功，点击进入后台页面和博客页面，就可以开始写你的博客了；
默认主题不是很好看，可以在主题模板选择自己的主题进行安装。
以上内容详细介绍了如何利用Vercel和Railway两个云平台来部署Typecho动态博客，让您的博客更加高效和稳定。通过使用Vercel的自动部署功能，您可以轻松地将博客代码上传到Vercel的服务器上，实现自动更新和快速部署。而Railway则提供了强大的数据存储和管理功能，让您的博客数据更加安全可靠。通过这种方式，您可以快速构建一个具有高性能和可靠性的博客平台，为读者提供更好的阅读体验。
