如何做一个无需服务器的个人网站？
分类: 技术探索 | 发布于:
这篇博客教大家如何不用服务器搭建属于自己的个人网页
一，前置准备
1.前往GitHub注册一个账号
2.新建一个文本文档，命名为index.html（需要提前开启扩展名称，如果你不会，请点击这里）
二、Github设置
1.进入GitHub首页，新建一个仓库（repository）
2.设置仓库名称，将你的名字写到仓库名称这里。并点击创建。
3.进入到创建成功的页面之后，点击上传一个已经存在的文件，并上传刚刚创建的index.html，点击提交更改（commit changes）。
4.上传成功后点击左上角的设置（Setting）。
5.在左侧导航栏当中找到页面（Pages）并点击进入
6.点击分支下面的None（中文应该显示的是无分支），并选择main，选完后点击右侧的保存按钮。
7.稍等片刻后刷新网页，头部会出现Github给你的网页链接（类似于https://你的用户名.github.io/你的用户名），保存它。
三、给网页添加实质内容
1.前往任意一个AI网站，这里拿Deepseek举例子。以提示词的形式阐明你的意图。
提示词举例：我正在github上创建我的静态个人网站，我需要你对网站的主页index.html生成代码。代码应该包括，我的头像，我的简单介绍，我的联系地址等信息。
2.复制AI给你生成的源码，例如
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人网站 | 欢迎访问</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: #333;
line-height: 1.6;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
.profile-card {
background: rgba(255, 255, 255, 0.92);
border-radius: 20px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
max-width: 900px;
margin: 0 auto;
transition: transform 0.3s ease;
}
.profile-card:hover {
transform: translateY(-10px);
}
.profile-header {
background: linear-gradient(to right, #4b6cb7, #182848);
color: white;
padding: 40px 30px;
text-align: center;
position: relative;
}
.avatar-container {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, 0.3);
margin: 0 auto 20px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}
.name {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 5px;
letter-spacing: 1px;
}
.title {
font-size: 1.2rem;
font-weight: 300;
opacity: 0.9;
margin-bottom: 10px;
}
.profile-content {
display: flex;
padding: 40px;
}
.left-column {
flex: 1;
padding-right: 30px;
border-right: 1px solid #eee;
}
.right-column {
flex: 1;
padding-left: 30px;
}
.section {
margin-bottom: 30px;
}
.section-title {
font-size: 1.5rem;
color: #4b6cb7;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
display: flex;
align-items: center;
}
.section-title i {
margin-right: 10px;
font-size: 1.3rem;
}
.bio {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
}
.contact-list {
list-style: none;
}
.contact-list li {
margin-bottom: 15px;
display: flex;
align-items: center;
transition: transform 0.2s;
}
.contact-list li:hover {
transform: translateX(5px);
}
.contact-list i {
width: 40px;
height: 40px;
background: #f0f5ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #4b6cb7;
font-size: 1.1rem;
}
.contact-info {
flex: 1;
}
.contact-label {
font-weight: 600;
color: #4b6cb7;
font-size: 0.9rem;
}
.contact-value {
font-size: 1.1rem;
color: #333;
}
.social-links {
display: flex;
justify-content: center;
margin-top: 20px;
}
.social-icon {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px;
background: #4b6cb7;
color: white;
font-size: 1.5rem;
transition: all 0.3s ease;
text-decoration: none;
}
.social-icon:hover {
transform: translateY(-5px);
background: #182848;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.github { background: #333; }
.twitter { background: #1DA1F2; }
.linkedin { background: #0077B5; }
.instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
footer {
text-align: center;
padding: 20px;
background: #f8f9fa;
color: #777;
font-size: 0.9rem;
border-top: 1px solid #eee;
}
/* 响应式设计 */
@media (max-width: 768px) {
.profile-content {
flex-direction: column;
padding: 30px 20px;
}
.left-column, .right-column {
padding: 0;
border: none;
}
.left-column {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid #eee;
}
.profile-header {
padding: 30px 20px;
}
.name {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="profile-card">
<div class="profile-header">
<div class="avatar-container">
<!-- 替换为你的头像路径 -->
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="个人头像" class="avatar">
</div>
<h1 class="name">张明</h1>
<p class="title">前端开发工程师 | UI设计师</p>
</div>
<div class="profile-content">
<div class="left-column">
<div class="section">
<h2 class="section-title"><i class="fas fa-user"></i> 关于我</h2>
<p class="bio">
你好！我是张明，一名充满激情的前端开发工程师和UI设计师，拥有5年行业经验。我专注于创建直观、响应迅速且用户友好的网络体验。我相信优秀的设计和强大的功能应该完美结合。
</p>
<p class="bio">
我热衷于学习新技术，解决复杂问题，并创建能够产生积极影响的数字产品。在我的职业生涯中，我参与过各种项目，从企业应用到创意作品集网站。
</p>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-graduation-cap"></i> 教育背景</h2>
<ul class="contact-list">
<li>
<i class="fas fa-university"></i>
<div class="contact-info">
<div class="contact-label">计算机科学硕士</div>
<div class="contact-value">北京大学 | 2016-2018</div>
</div>
</li>
<li>
<i class="fas fa-university"></i>
<div class="contact-info">
<div class="contact-label">软件工程学士</div>
<div class="contact-value">清华大学 | 2012-2016</div>
</div>
</li>
</ul>
</div>
</div>
<div class="right-column">
<div class="section">
<h2 class="section-title"><i class="fas fa-address-book"></i> 联系信息</h2>
<ul class="contact-list">
<li>
<i class="fas fa-envelope"></i>
<div class="contact-info">
<div class="contact-label">电子邮箱</div>
<div class="contact-value">zhangming@example.com</div>
</div>
</li>
<li>
<i class="fas fa-phone"></i>
<div class="contact-info">
<div class="contact-label">电话</div>
<div class="contact-value">+86 138 8888 8888</div>
</div>
</li>
<li>
<i class="fas fa-map-marker-alt"></i>
<div class="contact-info">
<div class="contact-label">地址</div>
<div class="contact-value">北京市海淀区中关村大街1号</div>
</div>
</li>
<li>
<i class="fas fa-globe"></i>
<div class="contact-info">
<div class="contact-label">个人网站</div>
<div class="contact-value">www.zhangming-portfolio.com</div>
</div>
</li>
</ul>
</div>
<div class="section">
<h2 class="section-title"><i class="fas fa-code-branch"></i> 专业技能</h2>
<ul class="contact-list">
<li>
<i class="fab fa-html5"></i>
<div class="contact-info">
<div class="contact-label">前端技术</div>
<div class="contact-value">HTML5, CSS3, JavaScript, React, Vue</div>
</div>
</li>
<li>
<i class="fas fa-paint-brush"></i>
<div class="contact-info">
<div class="contact-label">UI/UX设计</div>
<div class="contact-value">Figma, Adobe XD, Photoshop</div>
</div>
</li>
<li>
<i class="fas fa-mobile-alt"></i>
<div class="contact-info">
<div class="contact-label">响应式设计</div>
<div class="contact-value">Bootstrap, Tailwind CSS, Flexbox</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="social-links">
<a href="#" class="social-icon github"><i class="fab fa-github"></i></a>
<a href="#" class="social-icon twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon linkedin"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon instagram"><i class="fab fa-instagram"></i></a>
</div>
<footer>
<p>© 2023 张明个人网站 | 保留所有权利</p>
</footer>
</div>
</div>
</body>
</html>3.返回GitHub，在左上角中点击Code。
4.点击你最开始上传的index.html文件。
5.进入页面后，在右侧寻找编辑图标。
6.将AI给你的源码复制到编辑框中，并点击右上侧提交更改。
稍等片刻，等待github服务器更新缓存。过一段时间后，访问你刚刚记录下来的静态地址（https://你的用户名.github.io/你的用户名），你就可以看到你创建的个人网页了。
评论区
请登录后发言
还没有评论，快来抢沙发吧！