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

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

news 2025/6/16 19:29:37

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/11 15:58:14

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2025/6/15 1:42:50

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/6/15 17:28:06

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/6/15 13:06:02

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/6/15 17:22:58

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/6/15 1:35:38

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

编程新知 2025/6/15 9:43:18

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/6/16 17:24:43

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

编程新知 2025/6/16 7:12:28

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/6/15 19:53:11