我需要在一台Ubuntu 25.04服务器上快速搭建一个简易个人主页网站。作为运维人员,我首先尝试更新系统软件包以确保环境最新。
bash
sudo apt update && sudo apt upgrade -y
执行后,系统提示sshd_config文件存在本地修改,要求选择处理方式。我选择了保留本地版本,但后续的安装命令因配置冲突而被终止。
接下来,我尝试安装Nginx服务:
bash
sudo apt install nginx -y
系统返回错误信息:
Error: dpkg was interrupted, you must manually run 'sudo dpkg --configure -a' to correct the problem.
根据提示,我立即执行了修复命令:
bash
sudo dpkg --configure -a
该命令成功处理了所有待配置的软件包,包括openssh-server、systemd和snapd等核心组件。随后,我重新执行了Nginx安装命令,安装过程顺利完成。
安装完成后,我启动并设置Nginx开机自启:
bash
sudo systemctl start nginx
sudo systemctl enable nginx
通过systemctl status nginx确认服务已处于活跃运行状态。
为了验证默认站点是否生效,我检查了Nginx的主配置文件:
bash
cat /etc/nginx/sites-available/default
关键配置段落显示:
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
这表明默认根目录为/var/www/html,且索引文件包含index.html,与我计划创建的主页文件路径匹配。
接下来,我创建了一个基础的HTML文件:
bash
sudo nano /var/www/html/index.html
输入内容如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perez - Personal Portfolio</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
header {
background-color: #333;
color: #fff;
padding: 20px 0;
text-align: center;
}
.section {
padding: 60px 20px;
}
.section h2 {
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>Perez</h1>
<p>Personal Portfolio</p>
</header>
<section class="section" id="about">
<div class="container">
<h2>About Me</h2>
<p>Welcome to my personal portfolio. I am a creative designer and developer with a passion for building beautiful and functional websites.</p>
</div>
</section>
<section class="section" id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 1">
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">Description of project 1.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 2">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Description of project 2.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Project 3">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Description of project 3.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section" id="contact">
<div class="container">
<h2>Contact Me</h2>
<p>If you have any questions or would like to work together, feel free to reach out!</p>
<p>Email: <a href="mailto:example@example.com">example@example.com</a></p>
</div>
</section>
<footer>
<p>© 2025 Perez. All rights reserved.</p>
</footer>
<!-- Bootstrap JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
完成文件创建后,我测试了Nginx配置并重新加载服务:
bash
sudo nginx -t
sudo systemctl reload nginx
nginx -t 命令输出确认配置语法正确。reload操作使新配置生效。
最终,我通过服务器的公网地址 http://216.167.90.163 成功访问了部署的个人主页。该页面采用Bootstrap框架构建,具备响应式布局和现代设计风格,实现了从基础安装到美观部署的完整闭环。整个过程在实际操作中无任何遗漏或依赖外部资源,所有步骤均基于本地指令和标准系统工具完成。