简明个人网站搭建指南

· · 科技·工程

写在最前

洛谷上的建站教程太杂了，建个网站要找好几个专栏，所以就有了本文，对之前洛谷上的文章进行了总结，也添加了自己的东西，欢迎添加和指正。

编写页面

静态页面：HTML + CSS + JS 示例

静态网页由 HTML 结构、CSS 样式和 JavaScript 交互组成。

index.html：

<!DOCTYPE html>
<html>
<head>
    <title>我的静态网站</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎访问我的网站</h1>
    <p id="intro">这是一个示例页面。</p>
    <button onclick="changeText()">点击这里</button>
    <script src="script.js"></script>
</body>
</html>

style.css：

body {
    font-family: Arial, sans-serif;
    margin: 40px;
    background-color: #f5f5f5;
}
h1 {
    color: #333;
}
button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

script.js：

function changeText() {
    document.getElementById("intro").innerText = "你刚刚点击了按钮！";
    alert("内容已更新");
}

建站框架（以 Hexo 为例）

Hexo 可快速生成静态博客，支持 Markdown 写作与主题更换。

安装与初始化

npm install -g hexo-cli
hexo init myblog
cd myblog
npm install
hexo server  # 本地预览

更换主题（以 butterfly 主题为例）

  1. 在 myblog 目录下安装主题： 
    npm install hexo-theme-butterfly
  2. 修改 _config.yml： 
    theme: butterfly
  3. 主题配置参考 _config.butterfly.yml，可自定义样式、侧栏等。

文章管理

动态页面（以 Vue 3 为例）

Vue 适合构建交互式单页应用（SPA）。

项目创建与运行

npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

基础 Vue 语法示例

App.vue：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">反转文本</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const message = ref('Hello Vue!')
const items = reactive([
  { id: 1, name: '项目一' },
  { id: 2, name: '项目二' }
])

function reverseMessage() {
  message.value = message.value.split('').reverse().join('')
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
button {
  margin-top: 10px;
}
</style>

文档框架（以 VitePress 为例）

VitePress 适合搭建技术文档，支持 Markdown 与 Vue 组件。

初始化项目

npm create vitepress@latest my-docs
cd my-docs
npm install
npm run docs:dev

编写文档

这是一个简单的文档示例。

::alert{type="info"} 这是一个提示框。 ::

<MyComponent />


#### 使用 Vue 组件
在 `.vitepress/theme` 目录下创建 `MyComponent.vue`：
```vue
<template>
  <div class="demo">这是一个自定义组件</div>
</template>

<style scoped>
.demo {
  color: blue;
}
</style>

托管网页（使用云服务，以 OCI 为例）

在云服务器上托管网站主要有两种方式，选择哪种取决于你的网站类型和技术偏好：

特性 计算实例 (VM) 对象存储 + API 网关
适用网站类型 静态、动态（如 PHP）、数据库驱动（如 WordPress） 纯静态网站（HTML/CSS/JS）
控制程度 高，拥有完整的服务器 root 权限 低，仅管理文件，无需配置服务器
配置复杂度 中高，需手动配置 Web 服务、防火墙等 低，通过控制台界面配置
免费层资源 2 台 AMD 实例（1/8 OCPU，1 GB 内存） 20 GB 对象存储
核心优势 灵活，可运行任何应用 简单，无需维护操作系统，直接托管编译后的文件

如果你的网站是纯静态的（例如由 Hexo、VuePress 生成），或希望极致简单，可以选择对象存储方案。若需要运行 WordPress、动态后端或追求全面控制，则计算实例方案更合适。以下重点介绍后者。

1. 注册 OCI 永久免费账户

  1. 访问 Oracle Cloud 官网，点击“开始免费试用”。
  2. 使用邮箱注册，需要填写个人信息并绑定信用卡以验证身份（对于永久免费套餐，通常不会产生费用，除非升级或超限）。
  3. 注册成功后，你会获得一个租户（Tenancy），包含“始终免费”资源，如 2 台 AMD 计算实例和 200 GB 存储等。

2. 创建并配置计算实例（虚拟机）

A. 创建实例

  1. 登录 OCI 控制台，导航到计算 > 实例。
  2. 点击“创建实例”。
  3. 关键配置：
    • 名称：自定义（如 MyWebServer）。
    • 镜像：选择 Canonical Ubuntu 22.04 或 Oracle Linux 等系统。
    • 形状：确保勾选 “始终免费符合条件”，选择 VM.Standard.E2.1.Micro（1/8 OCPU，1 GB 内存）。
    • SSH 密钥：上传或生成 SSH 密钥对。这是连接服务器的唯一凭证，务必妥善保管私钥文件。
    • 网络：保留默认创建的 VCN 和子网。
  4. 点击“创建”，等待几分钟实例进入“运行中”状态。

B. 配置网络安全（关键步骤） 创建后，必须开放 Web 服务端口，否则无法通过公网 IP 访问网站。

  1. 在实例详情页面，找到其所在的子网链接，点击进入。
  2. 找到关联的安全列表，点击进入。
  3. 添加入站规则：
    • 源 CIDR：0.0.0.0/0（允许所有 IP 访问，可按需限制）
    • 目标端口范围：80 (HTTP) 和 443 (HTTPS)
    • 协议：TCP

3. 连接实例并安装 Web 服务器

A. SSH 连接实例

B. 安装并启动 Nginx 以 Ubuntu 为例，连接后执行：

sudo apt update && sudo apt install nginx -y
sudo systemctl start nginx
sudo systemctl enable nginx

安装完成后，在浏览器输入你的实例公网 IP，应能看到 Nginx 欢迎页。

4. 部署你的网站文件

网站文件默认位于 /var/www/html。你可以通过多种方式上传文件：

上传后，可能需要调整文件权限：

sudo chown -R www-data:www-data /var/www/html/

:::warning[注意事项与免费层限制]{open}

  1. 资源限制：永久免费套餐提供 2 台微型实例，每月 10 TB 出站流量。超出后可能产生费用或限速。
  2. 实例停止：实例若被停止（Stopped），超过一定时间（如 7 天）后，其公共 IP 地址可能被回收。建议在不需要时选择终止（Terminate），需要时再创建新实例。
  3. 定期使用：长期不活动的免费账户可能被关闭，建议定期登录。 :::

托管网页（使用托管服务）

Netlify 是部署静态网站（如由 HTML/CSS/JS、VuePress、Hexo、Hugo 等框架生成）的绝佳选择。它提供自动化构建、全球 CDN 加速、免费 HTTPS 等一站式服务，非常适合个人项目。

1. 核心优势与准备工作

与手动配置服务器（如 OCI 实例）相比，Netlify 的优势在于极简和自动化：

特性 Netlify 托管 服务器
部署流程 连接 Git 仓库，自动构建和发布 手动上传文件，配置 Web 服务器
服务器维护 无需 需要自行维护系统、安全和更新
HTTPS 证书 自动申请并续签（Let's Encrypt） 需手动安装和配置（如 Certbot）
全球访问速度 通过全球 CDN 分发 依赖单一服务器地理位置
适合场景 静态网站、前端应用、Jamstack 项目 动态网站（需 PHP/Python 等后端）、需要深度自定义服务器环境

在开始前，请准备好：

2. 部署网站：三种主要方法

A. 从 Git 仓库部署（推荐，实现持续集成） 这是最强大、最常用的方式。每次你向 Git 仓库推送代码，Netlify 都会自动重新构建和部署。

  1. 在 Netlify 控制台点击 “Add new site” > “Import an existing project”。
  2. 选择你的 Git 提供商（如 GitHub），并授权 Netlify 访问权限。
  3. 选择你要部署的具体仓库。
  4. 关键配置（通常在部署时或之后的站点设置中）：
    • 构建命令：如果你的网站需要构建（如使用 Vue、React），在此填写。例如，Vite 项目是 npm run build，Hexo 是 hexo generate。
    • 发布目录：构建后生成的静态文件所在文件夹。例如，Vite 项目通常是 dist，Hexo 是 public。
  5. 点击 “Deploy site”。首次构建后，你的网站会获得一个随机的 xxx.netlify.app 子域名。

B. 手动拖拽上传（最快速） 如果只是快速测试一个简单的 HTML 网站，可以直接拖拽。

  1. 在控制台点击 “Add new site” > “Deploy manually”。
  2. 将包含网站文件的整个文件夹拖入指定区域。
  3. Netlify 会自动上传并提供一个访问地址。

C. 使用 Netlify CLI 部署（适合开发者） 通过命令行工具可以更灵活地部署，并与本地开发流程集成。

  1. 安装 CLI: 
    npm install -g netlify-cli
  2. 登录: 
    netlify login
  3. 初始化并部署（在你的项目目录中）: 
    netlify init # 按指引关联或创建新站点
netlify deploy --prod # 部署到生产环境

注册一个域名

域名是你网站的地址。你可以通过国内外众多域名注册商（如阿里云、腾讯云、Namecheap、GoDaddy 等）进行购买，也有很多免费域名提供商。

这里以 US.CI 域名为例，这是一个免费域名服务商。前往 DNSHE 注册一个账号，选择左侧的 Free Domain，进入管理面板，创建一个域名，格式为 YourDomain.us.ci

:::warning[不保证服务的稳定性]{open} 此服务只是我使用过，用于作为一个例子，可能存在安全问题，不建议用于托管大型和重要的网站，并且无法备案，对于大型网站请始终使用较大的域名服务商 :::

添加 DNS 到 Cloudflare

注册 Cloudflare，一般会让你添加域名，输入 YourDomain.us.ci 之类的域名。

选择计划，选择 Free。

选择“自动扫描 DNS 记录”，点击“激活”。

这时候会出现两个 DNS 服务器（形如 xxxxxx.ns.cloudflare.com），打开 DNSHE 管理，点击“DNS 服务器”，更新服务器地址。

回到 CF，点“继续激活”。

等待 DNS 扩散，这通常需要几分钟到几小时，最长可达 48 小时，你收到邮件就是成功了。

这里看一下你的服务器类型，有以下几种：

如果你使用云服务器，那么应该为 A 记录或 AAAA 记录，找到你的服务器的公网 IP，在 Cloudflare 添加一个 DNS 记录，方式选择 A/AAAA，值输入你的公网 IP。

如果你使用托管服务，那么应该是 CNAME 记录（类似 xxx.netlify.app 的子域名），按上面的方法添加即可

更改好后点击保存，再次等待 DNS 扩散，等到你能够访问网站是就可以了。

添加 SEO 优化

SEO 能帮助你的网站在搜索引擎中获得更好的自然排名，从而吸引更多访客。优化工作主要围绕“让搜索引擎更好地理解和推荐你的网站”展开。

1. 核心：关键词研究与页面优化

这是 SEO 的基础，目的是确保你的内容与用户搜索意图匹配。

2. 技术 SEO：让搜索引擎更顺畅地抓取

这部分确保搜索引擎机器人能顺利访问、理解和索引你的网站。

3. 站内优化与用户体验

这部分直接影响用户在网站上的行为和停留时间，搜索引擎非常看重。

4. 站外优化：建立外链

这被视为其他网站对你网站的“投票”，高质量的推荐能显著提升排名，但需要长期积累。

5. 针对特定建站方式的 SEO 提示

写在最后

恭喜你！如果你跟随本教程的步骤一路实践，那么你已经完成了一个网站从“零”到“一”的完整诞生过程：从构思、注册域名、选择托管方案，到编写和部署页面，最终进行基础的 SEO 设置。

建站不仅仅是技术的组合，更是一个不断学习和创造的旅程。你亲手搭建的这个小站，将成为你在互联网世界中的专属空间。无论是记录生活、分享技术、展示作品，还是尝试创业，它都是一个坚实的起点。

请记住，保持网站内容更新、积极与访客互动、持续学习并应用新的 Web 技术（例如探索 Web 性能优化、渐进式 Web 应用 PWA 等），你的网站会随着你的成长而愈加出色。

附注与致谢

重要说明：为提供一份相对完整的入门指引，本文在创作过程中参考、汇总并整理了来自洛谷社区及其他技术网站上的多篇优秀教程与分享。由于原始来源众多且格式不一，我们已尽力统一全文风格，并借助 AI 辅助进行了归纳与润色，旨在为初学者提供一条更清晰的学习路径。

我们衷心感谢所有原始内容的创作者与分享者。正是基于社区的知识共享，本文才得以形成。

尽管已尽力确保内容的准确性，但教程中涉及的平台界面、操作步骤或免费政策可能会随时变更。若您在阅读或实践过程中发现任何过时、存疑或错误之处，恳请通过评论或私信等方式提出指正，我们将非常感谢并乐于及时更新修正。

祝您建站顺利，探索愉快！