Netlify

1. Netlify

Netlify 平台配图

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 branch -M main
git push -u origin main

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：选择 main 分支。
  • 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 的文档和社区也提供了丰富的资源，帮助你进一步探索和学习。