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

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

相关文章:

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

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

TensorFlow

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

【iOS RunLoop】

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

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

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

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…...

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…...

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

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

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

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

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

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

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

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

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/…...

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

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

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_…...

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

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

详解Spring中涉及的技术

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

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

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

利用OpenCV实现图像拼接

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

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

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

CSS 滚动条

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

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]这个解释,…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...