当前位置： 首页 > news >正文

Astro + Vercel 快速搭建自己的博客网站

news 2026/2/9 14:07:41

Astro 和 Vercel 彼此相得益彰，前者提供出色的开发者体验，用于构建现代静态站点，而后者负责部署和托管代码。

两者结合我们就可以轻轻松松零成本搭建自己的博客网站。查看示例。
在这里插入图片描述

步骤 1，创建评论仓库

在部署博客之前，我们先创建一个用于评论的 github 仓库（实际上使用了 dicussions 功能）。

  1. 登录 github ，点击 new repository。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QrxomnbP-1691134456396)(/assets/blog/astor_blog_create_comment.png)]

必须将仓库设置为 public，不然用户无法评论。

在这里插入图片描述

  1. 复制你的仓库名，打开 Gisucus 配置网站进行在线配置。

在这里插入图片描述

  1. 按照官方步骤依次设置，直到你的仓库满足所有条件。
    在这里插入图片描述

  2. 其中有两个点需要注意：

  • 页面和 discussion 映射关系：选择 og:title 的形式
    在这里插入图片描述
  • Discussion 分类选择 General
    在这里插入图片描述
  1. 处理好后，我们就可以获取一份 giscus 配置。关注 [repo]、[repo_id]、[category_id]、[lang]，待会儿部署的时候需要用到。
      <scriptsrc="https://giscus.app/client.js"data-repo="[repo]"data-repo-id="[repo_id]"data-category="General"data-category-id="[category_id]"data-mapping="og:title"data-strict="0"data-reactions-enabled="0"data-emit-metadata="0"data-input-position="top"data-theme="light"data-lang="[lang]"data-loading="lazy"crossorigin="anonymous"async></script>

步骤 2，创建 vercel 项目

  1. 点击 AstroBlog 创建项目。使用 GitHub 登录，然后创建一个仓库。
    在这里插入图片描述
    在这里插入图片描述

  2. 用步骤 1 中获取的 giscus 配置设置环境变量，，设置完之后点击 deploy 进行部署。
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PeoPNheD-1691134906742)(/assets/blog/astor_blog_vercel_deploy.png)]

  3. 静待部署完之后，就可以访问自己的博客啦！！🎉🎉🎉🎉
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LRCT3EQi-1691134906743)(/assets/blog/astro_blog_vercel_url.png)]

步骤 3，绑定域名（可选）

  1. 首先需要购买一个域名，这里选择了腾讯云。假设购买的域名是 youside.com。
  2. 跳转到 vercel，选择你的项目，依次添加域名。
    在这里插入图片描述
    此时域名还没有绑定到我们的 vercel，所以会显示校验失败。
  3. 复制 vercel 应用程序的 ip
    在这里插入图片描述
  4. 跳转到腾讯云 DNS 控制台，将刚才复制的 ip，添加解析（不同的供应商操作可能有差异）。
    在这里插入图片描述
    操作完成后过几分钟，就可以通过 youside.com 访问你的 vercel 应用啦。

相关文章：

Astro + Vercel 快速搭建自己的博客网站

Astro 和 Vercel 彼此相得益彰&#xff0c;前者提供出色的开发者体验&#xff0c;用于构建现代静态站点&#xff0c;而后者负责部署和托管代码。 两者结合我们就可以轻轻松松零成本搭建自己的博客网站。查看示例。 步骤 1&#xff0c;创建评论仓库 在部署博客之前&#xff…...

编程日记 2023/8/4 17:44:02

TensorFlow

什么是 TensorFlow TensorFlow是一个开源的机器学习框架&#xff0c;由Google于2015年推出。它被设计用来构建深度神经网络和其他机器学习模型&#xff0c;从而可以实现图像识别、语音识别、自然语言处理、推荐系统、搜索引擎、预测和控制等应用。TensorFlow是一个基于数据流图…...

编程日记 2023/8/4 17:42:59

【iOS RunLoop】

文章目录 前言-什么是RunLoop&#xff1f;默认情况下主线程的RunLoop原理 1. RunLoop对象RunLoop对象的获取 CFRunLoopRef源码部分&#xff08;引入线程相关&#xff09; 2. RunLoop和线程3. RunLoop相关的类RunLoop相关类的实现CFRunLoopModeRef五种运行模式CommonModes CFRun…...

编程日记 2023/8/4 17:41:58

阿里云平台注册及基础使用

首先进入阿里云官网&#xff1a; 阿里云-计算&#xff0c;为了无法计算的价值 点击右上角“登录/注册”&#xff0c;如果没有阿里云账号则需要注册。 注册界面&#xff1a; 注册完成后需要开通物联网平台公共实例&#xff1a; 注册成功后的登录&#xff1a; 同样点击右上角的…...

编程日记 2023/8/4 17:40:57

Mr. Cappuccino的第58杯咖啡——MacOS配置Maven和Java环境

MacOS配置Maven和Java环境 查看Mac使用的是哪个shell下载并准备Maven下载Maven配置前准备 下载并安装JDK下载JDK安装JDK 配置Maven和Java环境添加配置加载配置 验证环境 查看Mac使用的是哪个shell echo $SHELL如果使用的是bash&#xff0c;则使用以下命令 open ~/.bash_profi…...

编程日记 2023/8/4 17:39:55

linux Ubuntu 更新镜像源、安装sudo、nvtop

1.更换镜像源 vi ~/.pip/pip.conf在打开的文件中输入: pip.conf [global] index-url https://pypi.tuna.tsinghua.edu.cn/simple按下:wq保存并退出。 2.安装nvtop 如果输入指令apt install nvtop报错&#xff1a; E: Unable to locate package nvtop 需要更新一下apt&a…...

编程日记 2023/8/4 17:38:50

LUN映射出错导致写操作不互斥的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 某公司的光纤SAN存储系统&#xff0c;6块硬盘组建一组RAID6&#xff0c;划分若干LUN&#xff0c;MAP到不同的SOLARIS操作系统服务器上。 服务器故障&分析&#xff1a; 由于业务增长需要新增应用&#xff0c;工作人员增加了一台IBM服务器&am…...

编程日记 2023/8/4 17:37:49

Android 仿京东头部滚动头像动态变化

UI出了一个新需求&#xff0c;仿京东头部滚动&#xff0c;头像需要动态变化&#xff0c;先来看下京东的是什么效果 我们知道什么效果以后&#xff0c;接下来就想想怎么实现吧&#xff0c;Android常规吸顶折叠布局是由CoordinatorLayoutAppBarLayoutCollapsingToolbarLayout组成…...

编程日记 2023/8/4 17:36:47

高频交易学习——上期SimNow开通

property 是 Python 中的一个装饰器&#xff08;decorator&#xff09;&#xff0c;用于定义类的属性。它可以将方法转换为相应的特性&#xff08;property&#xff09;&#xff0c;从而实现属性的访问和修改控制。 property 装饰器的作用是将一个方法变成一个只读属性&#x…...

编程日记 2023/8/4 17:35:46

电力巡检无人机助力迎峰度夏，保障夏季电力供应

夏季是电力需求量较高的时期&#xff0c;随着高温天气的来临&#xff0c;风扇、空调和冰箱等电器的使用量也大大增加&#xff0c;从而迎来夏季用电高峰期&#xff0c;电网用电负荷不断攀升。为了保障夏季电网供电稳定&#xff0c;供电公司会加强对电力设施设备的巡检&#xff0…...

编程日记 2023/8/4 17:34:45

UOS环境python3.7及pyqt5安装

解决方案尝试 先安装pyqt5依赖项: 1、更新python3.7 sudo add-apt-repository ppadeadsnakes/ppa sudo apt-get update sudo apt-get upgrade sudo apt-get autoremove sudo apt-get install python3.7 sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/…...

编程日记 2023/8/4 17:33:43

SEO优化：提升网站排名与流量的关键策略

导言&#xff1a; 在如今竞争激烈的互联网时代&#xff0c;网站的排名和流量对于企业的在线可见性和业务发展至关重要。搜索引擎优化&#xff08;SEO&#xff09;是一种关键的策略&#xff0c;旨在提高网站在搜索引擎结果页面上的排名&#xff0c;从而增加网站的曝光率和有针对…...

编程日记 2023/8/4 17:32:41

flutter-GridView使用

先看效果 代码实现 import package:app/common/util/k_log_util.dart; import package:app/gen/assets.gen.dart; import package:app/pages/widget/top_appbar.dart; import package:flutter/cupertino.dart; import package:flutter/material.dart; import package:flutter_…...

编程日记 2023/8/4 17:31:39

Unity Shader编辑器工具类ShaderUtil 常用函数和用法

Unity Shader编辑器工具类ShaderUtil 常用函数和用法 Unity的Shader编辑器工具类ShaderUtil提供了一系列函数&#xff0c;用于编译、导入和管理着色器。本文将介绍ShaderUtil类中的常用函数和用法。 编译和导入函数 CompileShader 函数签名&#xff1a;public static bool C…...

编程日记 2023/8/4 17:30:38

详解Spring中涉及的技术

注解 介绍&#xff1a; 注解(Annotation)很重要&#xff0c;未来的开发模式都是基于注解的&#xff0c;JPA是基于注解的&#xff0c;Spring2.5以上都是基于注解的&#xff0c;Hibernate3.x以后也是基于注解的&#xff0c;现在的Struts2有一部分也是基于注解的了&#xff0c;注…...

编程日记 2023/8/4 17:29:37

阿里云ssl免费数字证书快过期 如何更换

1.登陆阿里云 找到ssl 查看快过期的证书 数字证书管理服务-ssl证书 2.创建免费的证书&#xff0c;对应过期证书的域名 3.下载新证书 pem key放在本地 此处记录本地的下载路径 /Users/dorsey/Downloads/10791167_lzzabc.cn_nginx/lzzabc.cn.pem /Users/dorsey/Downloads/1…...

编程日记 2023/8/4 17:28:34

利用OpenCV实现图像拼接

一、介绍 图像拼接. 二、分步实现 要实现图像拼接&#xff0c;简单来说有以下几步&#xff1a; 对每幅图进行特征点提取对对特征点进行匹配进行图像配准把图像拷贝到另一幅图像的特定位置对重叠边界进行特殊处理 PS&#xff1a;需要使用低版本的opencv&#xff0c;否则无法使…...

编程日记 2023/8/4 17:27:32

【java安全】无Commons-Collections的Shiro550反序列化利用

文章目录 【java安全】无Commons-Collections的Shiro550反序列化利用Shiro550利用的难点CommonsBeanutils1是否可以Shiro中&#xff1f;什么是serialVersionUID&#xff1f;W 无依赖的Shiro反序列化利用链POC 【java安全】无Commons-Collections的Shiro550反序列化利用 Shiro5…...

编程日记 2023/8/4 17:26:29

CSS 滚动条

一、滚动条样式属性 ::-webkit-scrollbar {width: 6px; /* 竖向滚动条宽度 */height: 6px; /* 横向滚动条高度 */ }::-webkit-scrollbar-thumb {border-radius: 10px; /* 滚动条样式 */-webkit-box-shadow: inset 0 0 3px red; /* 内阴影 */background-color: blue; /* 滚动条…...

编程日记 2023/8/4 17:25:28

Linux: security: openssh: sshd 出现defunct的一种情况

最近遇到了一个问题，就出现了一对遗留进程对，类似于下面这两个 root 77399 19100 77399 0 1 01:46 ? 00:00:00 sshd: \mzhan017 [priv] sshd 77400 77399 77400 0 1 01:46 ? 00:00:00 sshd: [defunct] 人生中的第一次遇到这种情况。一定要记录一下！ 关于[priv]这个解释，…...

编程日记 2023/8/4 17:24:27

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/8 5:11:39

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2026/2/8 22:56:45

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/11/18 0:32:13

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2026/1/26 2:22:24

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2026/1/31 8:25:07

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51