← 返回教程文章

零基础部署网站到Netlify(拖拽搞定,无需命令行)

小卡拉米 · 2026-06-22 · 阅读约8分钟
💡 核心观点:部署网站不需要懂服务器、不需要买域名、不需要敲命令。Netlify Drop 让你把文件夹拖进去,网站就上线了。全程不超过3分钟。

我第一次部署网站的时候,Google了半天:要买服务器吗?要装Nginx吗?要会Linux命令吗?

答案是:都不需要

下面是我用 Netlify Drop 部署本站的全过程,零基础照着做就行。


准备工作:确保你的网站文件是完整的

在部署之前,先确认你的网站文件夹结构是这样的:

📁 my-website/
├── 📄 index.html      ← 必须有,这是首页
├── 📄 style.css        ← 样式文件(如果有)
├── 📄 main.js          ← JS文件(如果有)
└── 📁 articles/        ← 子页面文件夹(如果有)
    └── 📄 some-article.html
⚠️ 重要:必须要有一个 index.html 文件,而且必须在文件夹的根目录。Netlify 会自动把它当作首页。

如果你是用 AI(比如DeepSeek)生成的网站代码,通常会得到3个文件:index.htmlstyle.cssmain.js。把它们放在同一个文件夹里就行。

方法一:Netlify Drop(最快,推荐新手)

这是最简单的方法,不需要注册账号,拖进去就能用。

打开 Netlify Drop 页面

浏览器访问:https://app.netlify.com/drop

你会看到一个很大的拖拽区域,写着 "Drag and drop your site folder here"。

选择你的网站文件夹

有两种方式:

✅ 选择文件夹的正确姿势:在文件选择器里,单击选中文件夹,然后点右下角 "选择文件夹" 按钮。不是双击打开文件夹!

等待上传完成

上传进度会显示在页面上。文件越多、越大,时间越长。一般几十个文件的话,10-30秒搞定。

上传完成后,页面会自动跳转到你的新网站!

复制你的网站地址

Netlify 会给你一个随机的二级域名,格式像这样:

https://capable-cannoli-90df99.netlify.app

这个地址就是你的网站了!发给别人,他们就能访问。

✅ 到这一步,你的网站已经上线了!

⚠️ 注意事项:用 Drop(不注册账号)部署的网站,默认只有 1小时 的有效期。要想永久保留,必须注册 Netlify 账号(免费)。

方法二:注册账号,永久保留(推荐)

上面方法一的缺点是网站1小时后会过期。要永久保留,需要注册一个免费账号。

注册 Netlify 账号

访问 https://app.netlify.com/signup,可以用 Email 或 GitHub 账号注册。

推荐用 Email 注册,简单快捷:输入邮箱 → 设置密码 → 验证邮箱 → 完成。

重新 Drop 上传

注册并登录后,再走一遍方法一的步骤(打开 drop 页面 → 拖入文件夹)。

这次上传完成后,网站会永久保留,不会再过期了。

自定义网站名称(可选)

Netlify 默认给你的域名是一串随机英文(像 capable-cannoli-90df99),不太好记。

想改成自己想要的的名字:

  1. 登录 Netlify 后台,找到你的站点
  2. 点击 "Site settings" → "Change site name"
  3. 输入你想要的名称(比如 my-ai-tools
  4. 保存,你的域名就变成了 https://my-ai-tools.netlify.app

注意:名称不能跟别人的重复,得碰运气。

更新网站内容

修改了网站代码后,怎么更新到线上?

很简单,重新 Drop 上传一次就行:

  1. 在 Netlify 后台找到你的站点
  2. 点击 "Deploys" 标签
  3. 把更新后的文件夹再拖进 "Drag and drop your files" 区域
  4. 自动部署,通常30秒内完成

每次部署,Netlify 都会保留历史版本。如果更新后出问题了,可以随时"回滚"到之前的版本。

常见问题 & 解决方案

❓ 上传后打开网站显示 404?

99% 是因为文件夹里没有 index.html,或者 index.html 不在根目录。

检查:打开你的文件夹,确认 index.html 直接在里面,不是藏在子文件夹里。

❓ 网站样式丢了(没有CSS效果)?

检查 index.html 里引用 CSS 的路径是否正确。

如果 CSS 文件跟 index.html 在同一个文件夹里,引用应该是:

<link rel="stylesheet" href="./style.css">

如果路径写错了(比如写了绝对路径 C:\Users\...),部署到 Netlify 后就找不到了。

❓ Netlify 免费版有哪些限制?

对个人项目来说,免费版完全够用。

❓ 国内访问 Netlify 慢怎么办?

Netlify 的服务器在国外,国内访问有时会慢或打不开。

备选方案:

我的最终方案

本站目前部署在 Netlify,域名是 capable-cannoli-90df99.netlify.app

选择 Netlify 的原因:

如果后续国内访问问题严重,我会迁移到 GitHub Pages 或 Cloudflare Pages。

🎯 一句话总结:部署网站 = 把文件夹拖进 Netlify Drop。剩下的事情(服务器、带宽、HTTPS)Netlify 全包了。专注做内容,别在部署上浪费时间。

— 小卡拉米,2026.06.22(最后更新:2026.06.23)

← Back to Tutorials

Deploy a Website to Netlify with Zero Experience (Drag & Drop, No Command Line)

Xiao Kalami · 2026-06-22 · ~8 min read
💡 Key point: deploying a website doesn't require knowing servers, buying a domain, or typing commands. Netlify Drop lets you drag a folder in and your site goes live. The whole thing takes under 3 minutes.

The first time I deployed a website, I Googled forever: do I need to buy a server? Install Nginx? Learn Linux commands?

The answer: none of the above.

Below is the exact process I used to deploy this site with Netlify Drop—just follow along, no experience needed.


Preparation: Make Sure Your Site Files Are Complete

Before deploying, confirm your website folder structure looks like this:

📁 my-website/
├── 📄 index.html      ← required, this is the homepage
├── 📄 style.css        ← stylesheet (if any)
├── 📄 main.js          ← JS file (if any)
└── 📁 articles/        ← subpage folder (if any)
    └── 📄 some-article.html
⚠️ Important: you must have an index.html file, and it must be in the root of the folder. Netlify automatically treats it as the homepage.

If you generated your site code with AI (e.g., DeepSeek), you'll usually get 3 files: index.html, style.css, main.js. Just put them in the same folder.

Method 1: Netlify Drop (Fastest, Recommended for Beginners)

This is the simplest method—no account needed, just drag and go.

Open the Netlify Drop Page

Visit in your browser: https://app.netlify.com/drop

You'll see a big drag-and-drop area that says "Drag and drop your site folder here".

Select Your Website Folder

Two ways to do it:

✅ The right way to select a folder: in the file picker, single-click to select the folder, then click the "Select Folder" button at the bottom-right. Do NOT double-click to open the folder!

Wait for the Upload to Finish

Upload progress shows on the page. More/larger files take longer. For a few dozen files, it's usually done in 10-30 seconds.

Once the upload finishes, the page automatically redirects to your new website!

Copy Your Website Address

Netlify gives you a random subdomain in a format like this:

https://capable-cannoli-90df99.netlify.app

That address is your website! Send it to anyone and they can visit it.

✅ At this point, your website is live!

⚠️ Heads-up: sites deployed via Drop (without an account) only stay live for 1 hour by default. To keep it permanently, you must register a Netlify account (free).

Method 2: Register an Account to Keep It Forever (Recommended)

The downside of Method 1 is that the site expires after 1 hour. To keep it permanently, you need a free account.

Register a Netlify Account

Visit https://app.netlify.com/signup—you can sign up with Email or a GitHub account.

Email is the quickest: enter your email → set a password → verify the email → done.

Drop Upload Again

After registering and logging in, repeat the Method 1 steps (open the drop page → drag in the folder).

This time, once the upload finishes, the site is kept permanently and won't expire.

Customize the Site Name (Optional)

By default Netlify gives you a random English string as your domain (like capable-cannoli-90df99), which is hard to remember.

To change it to a name you like:

  1. Log in to the Netlify dashboard and find your site
  2. Click "Site settings" → "Change site name"
  3. Enter the name you want (e.g., my-ai-tools)
  4. Save, and your domain becomes https://my-ai-tools.netlify.app

Note: the name can't clash with anyone else's—you'll need some luck.

Updating Your Website

After changing your site's code, how do you push updates live?

Easy—just Drop upload again:

  1. Find your site in the Netlify dashboard
  2. Click the "Deploys" tab
  3. Drag the updated folder into the "Drag and drop your files" area
  4. It deploys automatically, usually within 30 seconds

Netlify keeps a history of every deploy. If an update breaks something, you can "roll back" to a previous version anytime.

FAQ & Solutions

❓ Site shows 404 after uploading?

99% of the time it's because the folder has no index.html, or index.html isn't in the root.

Check: open your folder and confirm index.html is directly inside it, not hidden in a subfolder.

❓ Site styles missing (no CSS effect)?

Check whether the CSS path referenced in index.html is correct.

If the CSS file is in the same folder as index.html, the reference should be:

<link rel="stylesheet" href="./style.css">

If the path is wrong (e.g., an absolute path like C:\Users\...), it won't be found after deploying to Netlify.

❓ What are the limits of Netlify's free plan?

For personal projects, the free plan is more than enough.

❓ Netlify slow to access from mainland China?

Netlify's servers are overseas; access from mainland China can be slow or fail sometimes.

Alternatives:

My Final Setup

This site is currently deployed on Netlify at capable-cannoli-90df99.netlify.app.

Why I chose Netlify:

If access from mainland China becomes a serious problem later, I'll migrate to GitHub Pages or Cloudflare Pages.

🎯 One-line summary: deploying a website = dragging a folder into Netlify Drop. Everything else (servers, bandwidth, HTTPS) is handled by Netlify. Focus on making content—don't waste time on deployment.

— Xiao Kalami, 2026.06.22 (last updated: 2026.06.23)