Netlify

1- Netlify

image

2- 什么是 Netlify？

Netlify 是一个强大且易于使用的网站托管和自动化部署平台，专为静态网站和现代 Web 应用程序设计。它提供了以下主要功能：

  • 自动化部署：通过与 GitHub、GitLab 等版本控制系统集成，Netlify 可以自动检测代码更改并触发构建和部署流程。
  • 全球 CDN：Netlify 使用全球分布式的内容分发网络（CDN），确保你的网站在全球范围内快速加载。
  • HTTPS 支持：Netlify 自动为每个域名生成和管理 SSL 证书，确保安全连接。
  • 无服务器功能：支持无服务器函数，允许开发者在边缘节点运行代码，增强网站的功能性。
  • 表单处理：内置表单处理功能，方便收集用户输入。

3- Netlify 部署网站的详细步骤

3.1- 步骤 1：注册 Netlify 账户

3.1.1- 访问 Netlify 官网

3.1.2- 创建账户

  • 点击右上角的"Sign up"按钮。
  • 选择使用 GitHub、GitLab 或邮箱注册。推荐使用 GitHub，因为它可以方便地与代码仓库集成。

3.2- 步骤 2：准备你的项目

如果你还没有项目，可以创建一个简单的 HTML 文件：

3.2.1- 创建文件夹

  • 在你的计算机上创建一个新文件夹，例如 my-website。

3.2.2- 创建 HTML 文件

  • 在该文件夹中创建一个名为 index.html 的文件，并添加以下基本内容：
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网站</title>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是我使用 Netlify 部署的第一个网站。</p>
</body>
</html>
  • 这段代码创建了一个简单的网页，包含一个标题和一段文本。

3.3- 步骤 3：将项目上传到 GitHub

3.3.1- 创建 GitHub 仓库

  • 登录到你的 GitHub 账户。
  • 点击右上角的"+“号，选择"New repository”。
  • 输入仓库名称（如 my-website），选择"Public"，然后点击"Create repository"。

3.3.2- 上传文件

  • 在你的本地文件夹中，打开终端（命令行）。
  • 进入到你的项目文件夹：
cd path/to/my-website

3.3.3- 初始化 Git 仓库并添加文件

git init
git add index.html
git commit -m "初始提交"

3.3.4- 将本地仓库连接到 GitHub

git remote add origin https://github.com/你的用户名/my-website.git

3.3.5- 推送到 GitHub

git push -u origin master

3.4- 步骤 4：在 Netlify 上部署网站

3.4.1- 登录 Netlify

  • 使用你的账户登录 Netlify。

3.4.2- 创建新站点

  • 点击"New site from Git"按钮。

3.4.3- 连接到 GitHub

  • 选择 GitHub 作为源，授权 Netlify 访问你的 GitHub 账户。

3.4.4- 选择仓库

  • 在授权后，选择你刚才创建的 my-website 仓库。

3.4.5- 配置部署设置

  • Branch to deploy：选择 master 分支。
  • Build command：如果你的项目是静态文件，可以留空。
  • Publish directory：同样可以留空。
  • 点击"Deploy site"开始部署。

3.4.6- 查看部署状态

  • 部署完成后，Netlify 会为你生成一个随机的子域名（如 cute-n-simple.netlify.app），你可以点击链接查看你的网站。

3.5- 步骤 5：自定义域名（可选）

3.5.1- 绑定自定义域名

  • 在 Netlify 控制面板中，找到"Domain settings"。
  • 点击"Add custom domain"，输入你的域名并保存。

3.5.2- 设置 DNS 记录

  • 根据提示在你的域名注册商处设置 DNS 记录，通常需要添加 A 记录和 CNAME 记录。

3.6- 步骤 6：启用 HTTPS

Netlify 会自动为你的网站提供 HTTPS 支持。你可以在"Domain settings"中找到相关选项，确保 HTTPS 已启用。

3.7- 步骤 7：更新网站内容

每次你更新 GitHub 仓库中的代码时，Netlify 会自动检测并重新构建你的网站，确保你的网站始终保持最新状态。

3.8- 附加资源

4- 总结

通过以上步骤，你已经成功在 Netlify 上部署了一个简单的网站。你可以继续修改 index.html 文件，添加更多内容和样式，或者学习如何使用更复杂的框架和工具。Netlify 的文档和社区也提供了丰富的资源，帮助你进一步探索和学习。