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

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 应用啦。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/21951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[用go实现解释器]笔记1-词法分析

本文是《用go实现解释器》的读书笔记 ​ https://malred-blog​malred.github.io/2023/06/03/ji-suan-ji-li-lun-ji-shu-ji/shi-ti/go-compile/yong-go-yu-yan-shi-xian-jie-shi-qi/go-compiler-1/#toc-heading-6http://个人博客该笔记地址 ​github.com/malred/malanghttp:/…

SAS-数据集SQL垂直(纵向)合并

一、SQL垂直合并的基本语法 一个selectt对应一个表&#xff0c;select之间用set-operator连接&#xff0c;set-operator包括&#xff1a;except&#xff08;期望&#xff09;、intersect&#xff08;相交&#xff09;、union&#xff08;合并&#xff09;&#xff0c;outer un…

WAF绕过-AWVS+Xray+Goby+sqlmap-绕过宝塔防火墙

WAF绕过主要集中在信息收集&#xff0c;漏洞发现&#xff0c;漏洞利用&#xff0c;权限控制四个阶段。 1、什么是WAF&#xff1f; Web Application Firewall&#xff08;web应用防火墙&#xff09;&#xff0c;一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…

【2023】XXL-Job 具体通过docker 配置安装容器,再通过springboot执行注册实现完整流程

【2023】XXL-Job 具体通过docker 配置安装容器&#xff0c;再通过springboot执行注册实现 一、概述二、安装1、拉取镜像2、创建数据库3、创建容器并运行3、查看容器和日志4、打开网页 127.0.0.1:9051/xxl-job-admin/ 三、实现注册测试1、创建一个SpringBoot项目、添加依赖。2、…

【uniapp】样式合集

1、修改uni-data-checkbox多选框的样式为单选框的样式 我原先是用的单选&#xff0c;但是单选并不支持选中后&#xff0c;再次点击取消选中&#xff1b;所以我改成了多选&#xff0c;然后改变多选样式&#xff0c;让他看起来像单选 在所在使用的页面上修改样式即可 <uni-d…

Zabbix分布式监控快速入门

目录 1 Zabbix简介1.1 软件架构1.2 版本选择1.3 功能特性 2 安装与部署2.1 时间同步需求2.2 下载仓库官方源2.3 Zabbix-Server服务端的安装2.3.1 安装MySQL2.3.1.1 创建Zabbix数据库2.3.1.2 导入Zabbix库的数据文件 2.3.2 配置zabbix_server.conf2.3.3 开启Zabbix-Server服务2.…

Elasticsearch:如何将整个 Elasticsearch 索引导出到文件 - Python 8.x

在实际的使用中&#xff0c;我们有时希望把 Elasticsearch 的索引保存到 JSON 文件中。在之前&#xff0c;我写了一篇管如何备份 Elasticsearch 索引的文章 “Elasticsearch&#xff1a;索引备份及恢复”。在今天&#xff0c;我们使用一种 Python 的方法来做进一步的探讨。你可…

如何使用vue ui创建一个项目?

首先打开cmd 输入vue ui 等待浏览器打开一个窗口&#xff0c;按照下图操作 在"功能页面"中&#xff0c;各个插件代表以下意思&#xff1a; Babel&#xff1a;Babel是一个JavaScript编译器&#xff0c;用于将ES6代码转换为向后兼容的JavaScript版本&#xff0c;以确保…

华为推出手机系统云翻新服务:什么是云翻新?如何使用?

华为手机系统云翻新是华为推出的一项功能&#xff0c;旨在通过云服务提供系统翻新的服务。它可以帮助用户对手机的系统进行优化和更新&#xff0c;以提高手机的性能和流畅度。具体而言&#xff0c;华为手机系统云翻新功能提供了免费的云空间&#xff0c;用户可以将手机中的系统…

Matlab对TMS320F28335编程--SVPWM配置互补PWM输出

前言 F28335中断 目的&#xff1a;FOC的核心算法及SVPWM输出&#xff0c;SVPWM的载波频率10kHz&#xff0c;SVPWM的每个周期都会触发ADC中断采集相电流&#xff0c;SVPWM为芯片ePWM4、5、6通道&#xff0c;配置死区 1、配置中断SVPWM进ADC中断&#xff0c;查上表知CPU1,PIE1 …

10分钟理解React生命周期

前言 学习React&#xff0c;生命周期很重要&#xff0c;我们了解完生命周期的各个组件&#xff0c;对写高性能组件会有很大的帮助。 一、简介 React /riˈkt/ 组件的生命周期指的是组件从创建到销毁过程中所经历的一系列方法调用。这些方法可以让我们在不同的时刻执行特定的…

数据可视化(六)多个子图及seaborn使用

1.多个子图绘制 #绘制多个子图 #subplot&#xff08;*args&#xff0c;**kwargs&#xff09; 每个subplot函数只能绘制一个子图 #subplots&#xff08;nrows&#xff0c;ncols&#xff09; #fig_add_subplot(行&#xff0c;列&#xff0c;区域) #绘制子图第一种方式 plt.subp…

HTTP——五、与HTTP协作的Web服务器

HTTP 一、用单台虚拟主机实现多个域名二、通信数据转发程序 &#xff1a;代理、网关、隧道1、代理2、网关3、隧道 三、保存资源的缓存1、缓存的有效期限2、客户端的缓存 一台 Web 服务器可搭建多个独立域名的 Web 网站&#xff0c;也可作为通信路径上的中转服务器提升传输效率。…

aop实现加注解,自动存入数据库功能

1、建包、创类、建数据库 2 、数据库对应实体类 PcOperateLog import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;Data AllArgsConstructor NoArgsConstructor public class PcOperateLog {private Integer id;private String name;pri…

SQL 语句中 left join 后用 on 还是 where,区别大了!

目录 情况 小结 举例 情况 前天写SQL时本想通过 A left B join on and 后面的条件来使查出的两条记录变成一条&#xff0c;奈何发现还是有两条。 后来发现 join on and 不会过滤结果记录条数&#xff0c;只会根据and后的条件是否显示 B表的记录&#xff0c;A表的记录一定会显…

网络基础1

文章目录 网络基础11. 计算机网络背景1.1 网路发展1.2 认识 "协议" 2. 网络协议初识2.1 协议分层2.2 OSI七层模型2.3 TCP/IP五层(或四层)模型协议栈与OS的关系 3. 网络传输基本流程3.1 同一个局域网两台主机通信3.2 同一个路由器的两个子网通信 4. 网络中的地址管理4…

一文辨析,性能分析top命令中进程NI和PR

分析 Linux 服务器性能&#xff0c;首先想到的命令肯定是 top, 通过它&#xff0c;我们可以看到当前服务器资源使用情况和进程运行资源占用情况。 如果你想学习自动化测试&#xff0c;我这边给你推荐一套视频&#xff0c;这个视频可以说是B站播放全网第一的自动化测试教程&…

靶形数独

题目描述 小城和小华都是热爱数学的好学生&#xff0c;最近&#xff0c;他们不约而同地迷上了数独游戏&#xff0c;好胜的他们想用数独来一比高低。但普通的数独对他们来说都过于简单了&#xff0c;于是他们向 Z 博士请教&#xff0c;Z 博士拿出了他最近发明的“靶形数独”&am…

企业数字化转型:信息化还是数字化?

面对巨大的数字经济市场&#xff0c;全球大部分企业都开始了数字化转型进程&#xff0c;国内一半以上的企业已经将数字化转型视为下一步发展重点&#xff0c;并制定了清晰的数字化转型战略规划。 但是&#xff0c;相当一部分传统行业&#xff0c;如制造、金融、能源、化工等非数…

Dockerfile面试题(CMD、ENTRYPOINT与RUN命令对比)

目录 Dockerfile面试题 CMD、ENTRYPOINT与RUN命令对比 &#xff08;一&#xff09;CMD命令 &#xff08;二&#xff09;RUN命令 &#xff08;三&#xff09;ENTRYPOINT &#xff08;四&#xff09;RUN和CMD、ENTRYPOINT支持参数形式命令 &#xff1a; Dockerfile面试题 …