Netlify静态资源托管之部署自动化

article/2025/11/4 8:16:01

 关注「WeiyiGeek」公众号

将我设为「特别关注」,每天带你玩转网络安全运维、应用开发、物联网IOT学习!

f8b46d6a1fd33efc465640ede6554844.png

  • 0x00 基础介绍

  • 0x01 Netlify 使用

0x00 基础介绍

Q: Netlify 是什么?

Netlify 是一个提供静态资源网络托管的综合平台,一个直观的基于Git的工作流和强大的无服务器平台,用于构建、部署和协作web应用程序,即能够将托管 GitHub,GitLab 等网站上的 Jekyll,Hexo,Hugo 等代码自动编译并生成静态网站。

Markus Schork, CTO Hair Digital, Unilever: Netlify使CI/CD、部署和可扩展托管成为一种商品,并帮助企业专注于在Jamstack世界中创造出色的动态消费者体验。

官网地址: https://www.netlify.com/

Q: Netlify 功能介绍

  • 0.内置 CI/CD 支持自动构建拉取代码仓库,每次提交的自动构建并发布预览

  • 1.能够托管服务免费 CDN

  • 2.能够绑定自定义域名

  • 3.能够启用免费的TLS证书启用HTTPS

  • 4.提供 Webhooks 和 API

  • 5.通过内置应用程序添加动态功能

Q: Netlify 使用流程

  1. Connect your repository :Netlify 检测到要推送到git的更改并触发自动部署。

  2. Add your build settings : Netlify 为您提供了一个强大的、完全可定制的构建环境。

  3. Deploy your website : Netlify 发布与即时缓存失效和原子部署是无缝的。


0x01 Netlify 使用

  • Step 1.首先使用你的 GitHub 账号登陆 Netlify,登陆后进入空间管理中心,点击New site from git按钮开始部署你的博客:

  • Step 2.然后根据自己的托管平台,可以选择GitHub、GitLab或者BitBucket(以 GitHub 为例),

aaf69984634c629546372a2b30b8ed40.png

  • Step 3.之后点击GitHub之后会弹出一个让你授权的窗口,给 Netlify 授权后,就会自动读取你 GitHub 的仓库,如果没有看到你需要仓库则需在GitHub上配置Netlify应用程序访问权限。

ff9b954777b85c4828b39dd4fdabd2c7.png

  • Step 4.选择仓库后Netlify 会自动识别到项目,并填入相关信息,这时候只要无脑点击 Deploy site就可以,此时您可以设置定义环境变量,以便对构建进行更多的控制和灵活性。添netlify.toml 将配置文件添加到存储库以获得更大的灵活性。

775990ef2ae97040266ba9df5775999f.png

  • Step 5.从主服务器部署将自动发布, 在稍等一段时间就可以看到你的博客已经部署成功,并且给你分配了一个二级域名 :https://cranky-leakey-9306bd.netlify.app

10455b329a94fdacbbfc3f5cbcf296e4.png

  • Step 6.现在我们完成了第一步Deploy,之后我们可以自定义域名 Domain settings 作为主域名:例如 i.weiyigeek.top 域名设置完,Netlify提示你去域名DNS解析处修改域名的CNAME记录.

6551ebc3d1e33af5e09ef5b1022ca526.png

  • Step 7.我们得域名是托管在CloudFlare的我们登录后进行配置,同时访问i.weiyigeek.top验证搭建情况;

i CNAME cranky-leakey-9306bd.netlify.app

f4a0a81012381bbd48954ba7053fcdfb.png

  • Step 8.Netlify默认会启用 HTTPS而且不能关闭,如果你没有证书它会帮你去Let’s Encrypt申请免费的证书,当然你也可以自己申请证书,或者腾讯云阿里云的免费SSL证书, 下面以Apache的证书为例进行配置。

889bbfe74ea0bb4b91ea4ffd6640ab95.png

Tips : netlify.toml 配置文件编辑说明


WeiyiGeek Blog - 为了能到远方,脚下的每一步都不能少。

Tips : 本文章来源 Blog 站点或者 WeiyiGeek 公众账号 (友链交换请邮我哟):

  • 微信公众号-WeiyiGeek` # 精华文章发布地址

  • https://weiyigeek.top # 采用cloudflare CDN 国内有时访问较慢

  • https://weiyigeek.gitee.io # 国内访问快可能会有更新不及时得情况

  • 个人知乎-WeiyiGeek

Tips: 更多学习笔记文章请关注 WeiyiGeek 公众账号
【微信公众号关注(点击)】
【邮箱联系: Master#weiyigeek.top】


http://chatgpt.dhexx.cn/article/hA1hbjAl.shtml

相关文章

如何使用netlify部署vue应用程序

什么是Netlify? Netlify是一个现代网站自动化系统,其JAM架构代表了现代网站的发展趋势。所谓JAM,就是指基于客户端JavaScript、可重用API和预构建Markup标记语言的三者结合。 有了Netlify,我们只要在本机Git中写前端代码&#xff…

C语言:strlen() --- 计算字符串长度

C语言 基础开发----目录 一、strlen() 简介 1. 函数原型 unsigned int strlen(char *str);2. 参数 str - - 要计算长度字符串的地址指针 3. 功能 计算给定字符串的字节长度&#xff0c;直到空字符结束&#xff0c;但不包括空字符。 4. 头文件 #include <string.h>…

C语言 计算字符串的长度

方法一&#xff1a; #include<stdio.h> int length(char *s){char *ps;while(*p!\0){ //等同于 *pp;}return p-s; } void main(){char s[32];printf("请输入一个字符串&#xff1a;");scanf("%s",&s);printf("长度为&#xff1a;%d",l…

计算字符串长度的五种方法

方法一&#xff1b; ------------------------------------------------------------ 方法二; ------------------------------------------------------------ 方法三&#xff1b; ------------------------------------------------------------ 方法四利用sizeof()&#x…

计算字符串长度

用三种方法计算字符串的长度&#xff1a; 字符串&#xff1a;“abcd”&#xff0c;在储存的时候&#xff0c;字符串的最后一位会以一个终止符 \0&#xff0c;所以求取的就是终止符前的字符数。 1.计数器方式 通过设置一个计数器&#xff0c;然后用指针字符串从头扫描&#xf…

计算字符串长度的三种方法(库函数 指针 )【详解】

目录 求字符串长度的一般原理方法一&#xff1a;strlen函数函数原型使用方法 方法二:指针整数方法三&#xff1a;指针-指针总结&#xff1a; 求字符串长度的一般原理 求字符串长度简单来说就是计算一个字符串(字符数组)中元素的个数即从数组头部计数&#xff0c;直到遇到字符串…

微信小程序怎么开发(小程序开发文档)

微信小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。 2017年1月9日~2018年1月9日&#xff0c;小程序正式上线一周年。上线以来&#xff0c;小程序不断地释放新能力&#xff0c;迭代更新&#xff0c;…

【小程序】一文带你了解微信小程序开发(小程序注册/开发工具的下载)

&#x1f41a;作者简介&#xff1a;苏凉&#xff08;专注于网络爬虫&#xff0c;数据分析&#xff0c;正在学习前端的路上&#xff09; &#x1f433;博客主页&#xff1a;苏凉.py的博客 &#x1f310;系列专栏&#xff1a;小程序开发基础教程 &#x1f451;名言警句&#xff1…

小程序设计文档

状态码介绍 {status: 状态码msg: 消息data: 响应数据 }code解释0success1error10need_login2illegal_argument 介绍 用到的接口 小程序登陆能获取的信息有 wx.request的返回为 data里面包的是后端服务器返回的值 小程序登陆时序图 登陆流程 微信小程序wx.login()拿到…

微信小程序技术文档

1.只显示用户头像和名称&#xff08;简化代码&#xff09; <!-- 如果只是展示用户头像昵称&#xff0c;可以使用 <open-data /> 组件 --> <open-data type"userAvatarUrl"></open-data> <open-data type"userNickName"><…

微信小程序开发者文档 开放文档 地址

最好的微信小程序开发参考书籍——微信小程序开发者文档 开放文档 微信小程序开发者文档地址 &#x1f9e9;微信官方文档&#xff1a;https://developers.weixin.qq.com/doc

微信小程序(原生):基本开发相关文档

1、微信公众平台&#xff08;后台登录页&#xff09;&#xff1a; https://mp.weixin.qq.com/ 2、微信小程序官网文档&#xff08;组件api等&#xff09;&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/component/audio.html 3、微信开放社区&#xff08;问题…

【微信小程序】(一)开发工具下载与界面介绍

本系列文章主要介绍微信小程序基本的开发流程与基础内容 文章目录 前言 一、安装微信开发者工具 二、开发者工具基本介绍 1.创建项目 2.界面展示 3.目录结构介绍 前言 微信小程序作为一种开发成本低&#xff0c;开发门槛低&#xff0c;周期更短等优势&#xff0c;依托微信生态…

微信小程序入门文档

小程序入门文档 微信小程序介绍 微信小程序&#xff0c;简称小程序&#xff0c;英文名Mini Program&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用。 小程序官方文档地址&#xff1a…

微信小程序开发之官方文档学习(一)

小程序宿主环境 渲染层和逻辑层 小程序的运行环境分成渲染层和逻辑层&#xff1a;WXML 模板和 WXSS 样式工作在渲染层&#xff0c;JS 脚本工作在逻辑层。渲染层和数据相关&#xff1b;逻辑层负责产生、处理数据&#xff0c;通过 Page 实例的 data 属性传递数据到渲染层。 通信模…

微信-小程序-开发文档-开发:开发

ylbtech-微信-小程序-开发文档-开发&#xff1a;开发 1. 开发指南返回顶部 1.1、 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API&#xff0c;帮助开发者在微信中开发具有原生 APP 体验的服务。 本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容&…

微信小程序设计规范(官方)文档

为方便设计师进行设计&#xff0c;微信提供一套可供Web设计和小程序使用的基础控件库&#xff1b;同时提供方便开发者调用的资源。 基础样式库预览地址&#xff1a;https://weui.io 文末附规范文档PSD和sketch源文件下载。 视觉规范 1. 字体规范 常用字号为20&#xff0c;18…

微信小程序文档api

​ 本文档将带你一步步创建完成一个微信小程序&#xff0c;并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像&#xff0c;点击头像&#xff0c;可以在新开的页面中查看当前小程序的启动日志。下载源码 1. 获取微信小程序的AppID …

微信小程序设计文档

小程序方案设计 我设计的小程序名字叫“运动之参天大树”&#xff0c;大体上是想设计一个通过运动来种树的小程序。用户注册之后&#xff0c;可以在喜欢的地方种树&#xff0c;然后连通微信步数来换取浇水的水滴&#xff0c;对树进行浇水&#xff0c;树得到水滴之后会变大&…

微信小程序开发指南,接口文档,工具下载使用

相信前天&#xff0c;从事互联网行业人的朋友圈给刷爆了&#xff0c;前微信公众平台开始陆续对外发送小程序内测邀请&#xff0c;而小程序即被外界广为关注的微信“应用号”。 小程序的推出也并非一蹴而就&#xff0c;早在2016年1月的微信公开课上&#xff0c;微信之父张小龙就…