发布网站

构建网站

项目经过 npm run build 编译后，所有可部署的静态文件将统一输出到 build 目录下。只需将此目录下的所有内容部署到您的 Web 服务器（或云存储服务），即可通过公网域名访问。

build 目录包含了网站运行所需的一切资源，这是一个典型的静态网站结构：

bash

zxzsk@debian ~/t/my-website> lsd build
 404.html   blog   img          markdown-page
 assets     docs   index.html   sitemap.xml

通过树状视图，可以清晰地看到 build 目录如何组织内容和资源：

bash

zxzsk@debian ~/t/my-website> lsd --tree build
 build                      # 📦 最终部署目录，包含网站所有静态文件
├──  404.html               # ❌ 错误页面
├──  assets                 # ⚡ 编译和打包后的静态资源（JS/CSS/图片）
│   ├──  css
│   │   └──  styles.665813eb.css # 优化后的 CSS 文件
│   ├──  images
│   │   ├──  docsVersionDropdown-35e13cbe46c9923327f30a76a90bff3b.png
│   │   ├──  docusaurus-plushie-banner-a60f7593abca1e3eef26a9afa244e4fb.jpeg
│   │   └──  localeDropdown-f0d995e751e7656a1b0dbbc1134e49c2.png
│   └──  js
│       ├──  0058b4c6.ff0d62d3.js # JavaScript 代码块文件
│       ├──  ...               
│       └──  runtime~main.43d73572.js # 网站运行时 JS
├──  blog                   # 📰 博客内容的路由目录
│   ├──  index.html         # 博客列表首页
│   ├──  atom.css
│   ├──  atom.xml           # Atom 订阅源
│   ├──  atom.xsl
│   ├──  archive
│   │   └──  index.html     # 博客归档页面
│   ├──  authors            # 作者页面
│   │   ├──  all-sebastien-lorber-articles
│   │   │   └──  index.html
│   │   ├──  index.html
│   │   └──  yangshun
│   │       └──  index.html
│   ├──  first-blog-post
│   │   └──  index.html     # 单篇文章页面
│   ├──  long-blog-post
│   │   └──  index.html
│   ├──  mdx-blog-post
│   │   └──  index.html
│   ├──  rss.css
│   ├──  rss.xml            # RSS 订阅源
│   ├──  rss.xsl
│   ├──  tags               # 标签页面
│   │   ├──  docusaurus
│   │   │   └──  index.html
│   │   ├──  facebook
│   │   │   └──  index.html
│   │   ├──  hello
│   │   │   └──  index.html
│   │   ├──  hola
│   │   │   └──  index.html
│   │   └──  index.html
│   └──  welcome
│       └──  index.html
├──  docs                   # 📚 文档内容的路由目录
│   ├──  category
│   │   ├──  tutorial---basics
│   │   │   └──  index.html # 文档分类页
│   │   └──  tutorial---extras
│   │       └──  index.html
│   ├──  intro
│   │   └──  index.html     # 文档页面（例如：/docs/intro）
│   ├──  tutorial-basics
│   │   ├──  congratulations
│   │   │   └──  index.html
│   │   ├──  create-a-blog-post
│   │   │   └──  index.html
│   │   ├──  create-a-document
│   │   │   └──  index.html
│   │   ├──  create-a-page
│   │   │   └──  index.html
│   │   ├──  deploy-your-site
│   │   │   └──  index.html
│   │   └──  markdown-features
│   │       └──  index.html
│   └──  tutorial-extras
│       ├──  manage-docs-versions
│       │   └──  index.html
│       └──  translate-your-site
│           └──  index.html
├──  img                    # 🖼️ 网站的静态图片资源（从源文件的 static 复制而来）
│   ├──  docusaurus-social-card.jpg
│   ├──  docusaurus.png
│   ├──  favicon.ico        # 网站图标
│   ├──  logo.svg
│   ├──  undraw_docusaurus_mountain.svg
│   ├──  undraw_docusaurus_react.svg
│   └──  undraw_docusaurus_tree.svg
├──  index.html             # 🏠 网站主页/根目录入口文件（/）
├──  markdown-page
│   └──  index.html         # 自定义 Markdown 页面
└──  sitemap.xml            # 🗺️ 网站地图文件（用于 SEO）

网站发布方案

Docusaurus 生成的是静态网站，相对容易部署，而许多平台支持免费部署静态网站，导致部署方案相对丰富。总的来说花钱的方案好用，不花钱的方案能用。

云服务器

购买域名和云服务器注意事项

1. com 域名最具权威，价格较贵 ¥90/年
2. 最便宜的域名可能是 nameship 的 xyz 数字域名（6 位数以上），如 787878.xyz ，价格 ¥5/年。直接买 10 年，省心了。
3. 服务器价格：国内贵，国外便宜（也有贵的）。国内服务器续费有套路，2 c 2 g 服务器首年卖你 ¥100，续费 ¥300/年，贵的 ¥1000/年。国外服务器首年 ¥100/年，续费同价，这点比较好。
4. 服务器延迟：国内服务器因为距离较近，访问通常在 10~50 ms，丢包率可忽略。国外服务器，我只买实惠的，购买前先在网上了解一下是不是老牌厂商、机房位置、网友的使用体验。文档网站不吃延迟，只要不买到丢包率非常高的，用起来就没有什么影响。移动、联通、电信走的线路有所区别，可能用移动网络能跑 200 Mb 带宽，电信就只能跑 20 Mb 带宽。
5. 备案：国内服务器，必须备案。国外服务器，可以备案。国内厂商的续费套路就是抓住用户备案麻烦，不续费就要换服务器，换服务器就要重新备案。搞的非常折腾。许多小站接受不了高价续费，或者频繁更换服务器厂商及备案，直接搬到国外服务器，省心了。

假设你已经购买服务器和域名，并且会简单的 Linux 命令（cp、mv、scp、ssh），并且已经使用 npm run build 将网站文件构建到 项目/build/ 。接下来

1. 网站上传到服务器

bash

# 服务器上创建网站目录
mkdir -p /var/www/html/787878.xyz/

# 将网站文件上传到服务器
scp -r build/* username@remote-server:/var/www/html/787878.xyz/

确保 Web 服务用户对目录有读权限

2. 配置 Nginx

nginx/etc/nginx/sites-enabled/www.787878.xyz

server {
    listen 80;
    server_name example.com;

    root /var/www/html/787878.xyz/;
    index index.html;

    location / {
        try_files $uri /index.html;
        add_header Cache-Control "no-cache";
    }
}

如何安装 Nginx、配置网站 SSL 证书等，请查看 Nginx 文档。
配置完 Nginx 就可以通过域名访问你的网站。

---

GitHub Pages

tip

1. 创建 GitHub 仓库，然后才能使用 GitHub Pages
2. 如果不想开源的话，应当使用自己的服务器。

1. 安装部署工具

bash

npm install --save-dev gh-pages

2. 配置 package.json

json

{
  "homepage": "https://<username>.github.io/<repo-name>/",
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}

3. 构建并部署

bash

npm run build
npm run deploy

• 网站会自动发布到 GitHub Pages
• 默认分支 gh-pages 存放静态文件

---

免费静态网站托管服务

一些云服务厂商提供了限额的免费静态网站托管服务。例如 serv00

tip

serv00 是一个提供免费虚拟主机服务的平台，为用户提供 3 GB 存储、512 MB 内存、不限流量、支持多种数据库（MySQL、PostgreSQL、MongoDB）及免费二级域名的虚拟服务器。它适用于搭建小型网站和应用程序，但需要注意的是，其运行在 FreeBSD 系统上，免费账号有有效期，且账号在一段时间未登录后可能会被删除。

1. 构建静态文件

bash

npm run build

2. 上传到 serv00

使用 SSH 上传：

bash

scp -r build/* user@serv00:/path/to/webroot/

或者用 rsync 增量同步：

bash

rsync -avz build/ user@serv00:/path/to/webroot/

3. 访问网站

在浏览器访问 username.serv00.net 。如果你想通过自己的域名访问网站，serv00 支持配置为你的域名。
体验：serv00 的延迟是比较高的。

Cloudflare Tunnel

Cloudflare Tunnel 是一种创新的部署方式，它通过在您的私有源服务器（本地机器、虚拟机等）上运行一个名为 cloudflared 的轻量级连接器，主动向 Cloudflare 的全球边缘网络建立加密的出站隧道。这种方法彻底消除了在防火墙上打开入站端口（如 80/443）的必要性，从而隐藏了您的源站 IP 地址，极大地增强了安全性。一旦隧道建立，所有用户对您域名的请求都会先经过 Cloudflare 的安全防护（DDoS 防护、WAF 等），然后通过这条安全的隧道转发到您的本地服务器，实现了高安全性、易于管理且无需公网 IP 的网站部署。

缺点：国内访问慢。

---

回忆闪卡：

在 Docusaurus 项目中

• 目录 blog 生成博客，docs 生成文档，src/pages 生成独立页面。
• 目录 static 存放静态资源，在文章中引用图片、视频、其他资源。
• 文件 src/pages/index. js 生成网站首页。
• 文件 docusaurus. config. js 用于配置网站的标题、导航栏等。
• 文件 package. json 可以自定义 npm 命令。
• 文件 sidebars. js 控制侧边栏目录的生成。
• 命令 npm run start 启动预览
• 命令 npm run build 编译网站