一个简单的个人网站模板

在的网站效果多样而功能复杂，技术栈也多种多样，react\vue\jquery等层出不穷，对于编程爱好者初学者入门极不友好。我这里有一个简单的个人网站模板，包括主页、项目和联系方式、关于我四个部分。你可以根据自己的需求进行调整。

模板效果展示：

主页 (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>欢迎来到我的个人网站</h1>
            <p>我是一个充满激情的程序员，热衷于学习和分享知识。</p>
        </section>
    </main>
    <footer>
        <p>© 2024 我的名字</p>
    </footer>
</body>
</html>

关于我 (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我 - 我的个人网站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="about.html">关于我</a></li>
      <li><a href="projects.html">项目</a></li>
      <li><a href="contact.html">联系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="about">
    <h1>关于我</h1>
    <p>你好！我是[一周一志程序员]，一名经验丰富的Java程序员，致力于能源电力SaaS和系统架构设计。</p>
    <p>目前我正在备考2024年11月6日的《系统架构设计师》考试，并在着手成为独立开发者，轻创业准备中。</p>
  </section>
</main>
<footer>
  <p>© 2024 一周一志程序员</p>
</footer>
</body>
</html>

项目 (projects.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目 - 我的个人网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="about.html">关于我</a></li>
                <li><a href="projects.html">项目</a></li>
                <li><a href="contact.html">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="projects">
            <h1>项目</h1>
            <ul>
                <li><strong>电力SaaS平台开发</strong> - 开发用电考核模块。</li>
                <li><strong>系统架构设计</strong> - 为不同客户提供系统架构解决方案。</li>
                <li><strong>Spring Boot 项目</strong> - 创建和管理多个Spring Boot项目。</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2024 我的名字</p>
    </footer>
</body>
</html>

联系方式 (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>联系方式 - 我的个人网站</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <nav>
    <ul>
      <li><a href="index.html">主页</a></li>
      <li><a href="about.html">关于我</a></li>
      <li><a href="projects.html">项目</a></li>
      <li><a href="contact.html">联系方式</a></li>
    </ul>
  </nav>
</header>
<main>
  <section class="contact">
    <h1>联系方式</h1>
    <p>如果你有任何问题或合作意向，请随时联系我。</p>
    <p>Email: <a href="mailto:1184795629@qq.com">your-email@domain.com</a></p>
    <p>公众号: <a href="#">一周一志程序员</a></p>
    <p>抖音: <a href="#">麦冬会开花</a></p>
  </section>
</main>
<footer>
  <p>© 2024 我的名字</p>
</footer>
</body>
</html>

样式文件 (styles.css)

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

header {
    background: #06362B;
    color: #fff;
    padding: 1rem 0;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    background: #f4f4f4;
    padding: 2rem;
    text-align: center;
}

.about, .projects, .contact {
    padding: 2rem;
}

footer {
    background: #06362B;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

你可以将这些文件保存为index.html、about.html、projects.html、contact.html和styles.css，并将它们放在同一目录下。然后，你可以通过浏览器打开index.html来查看你的个人网站。

学习使用，希望这对你有帮助把！如果你有其他需求或需要进一步定制，请告诉我。

先，我霸都傲天申明绝对是完全免费，不会在文章中推销什么云服务器，虚拟主机等。而且操作步骤上手简单，即使非IT人员也很容易实现。

局限：只能是静态网站的个人网站
面向读者：所有人包括非IT人员

首先如果你无法理解“静态网站”的话，那么相信我，静态网站就可以满足你大部分个人网站的需求。其次这篇文章更多的是面向非IT人员，因为我写这篇文章的原因是我的一个同学的故事：

我同学小A是律师，他想把自己处理过的一些案件记录在自己的个人博客中，他已经注册了公众号。但是他始终觉得有个网站或者个人博客会显得专业一些，而且还可以展示自己的个人履历，把这个网站链接放在公众号里面会显得跟专业一些。“好吧，我明白了~”

而且学会自己搭建一个静态网站是一个很酷的事情，你可以做一些很漂亮的宣传页，或者表达自我主张的个人博客，或者在我以前的文章里面给别人做一个网页版生日祝福or纪念日等等。

所以开始吧~

前言

首先我们要用到的工具是著名的开源社区Github，我们做的静态网站最终要托管在上面，这个功能叫做“Github Pages”，是一项免费的静态文件部署服务。

虽然Github是国外的网站，但是在国内可以访问并且速度还不错！

有人担心，如果以后Github被墙了怎么办？
放心，即使被墙了，你学会如下的操作依然可以在类似的国内平台，例如码云等

1.申请Github账号

（如果有账号请直接登录然后跳转到教程下一步）

访问Github，点击SIGN UP按钮。（Sign in是登录的意思，应该都很好理解）还有Github是全英文的，没有中文的哦亲，但这不影响我们使用的。

注册很简单，只需要用户名，密码，邮箱即可，不需要手机号。（对了，用户名用一个酷一点或者有意义一点的，因为它会出现在你的网址中）

注册填写Github用户名密码邮箱

接着，Github会问你是否需要付费使用。这里选择不用，因为Github提供的免费服务已经能满足大部分人包括开发者的需要了。付费服务主要是面向团队以及企业。

后面还会有一些步骤，大概意思就是问你想用Github做什么，你对Git的熟练程度，（感觉像是moba游戏新手调研都会这么做）因为Github网站迭代的原因可能会稍有不同。比如笔者这里试的时候是这样子的。

然后Github会给你注册的邮箱发送一个确认链接，请点击链接确认，不激活的话是无法正常使用Github的服务的。这个是Github的反爬虫系统。（题外话：Github的反爬虫系统很强很强！）

如果收件箱没有看到，那么不用想了，一定在垃圾箱里面！

到这里我们的注册就完成了。

2.创建一个仓库

接下来我们要创建一个仓库，仓库就是保存代码的地方，也就是保存网站的地方。这里我们做一个最简单的网站：个人简历。

1，首先点击“Your repositories”，查看个人全部仓库，第一次肯定是空空如也啊。

2，接着我们新建一个仓库

3，这一步很重要，仓库的名字不可以随便写，必须是 <我的名字>.github.io

比如我注册的名字是 zhihu1，所以这里我创建的仓库的名字必须是： http://zhihu1.github.io

4，接着下一步页面会比较复杂，你会看到一大堆看不懂的东西，其实那些事git操作提示。如果你熟练git的话就知道了。不过我们不管这些，我们只需要创建一个新的文件就行啦！

5，新文件的名字不可以乱写哦，必须是 index.html，这里大家都一样都写这个。（题外话：静态http文件托管服务的默认访问文件就是index.html）

可以参考笔者的内容如下，改成你自己的介绍哦~

<p>Hello 大家好</p>
<p>我是霸都丶傲天，这是我的个人网站。 </p>
<p>很高兴你来到这里, 你可以在以下的网站找到我</p>

<ul>
  <li> <a href="https://www.zhihu.com/people/AJLoveChina">知乎</a> </li>
  <li> <a href="http://hejie.nigeerhuo.com">我的博客(已经不更细了,现在在知乎写文章)</a> </li>
</ul>

3.查看网站的网址

到这里，我们一个最简单的个人网站的代码就完成了。接下来最重要的一步，我们需要知道网站的链接啊，只有这样，别人才能访问我们的网站呀。

1，点击settings

2，然后往下翻找到 Github Pages，看到绿色提示，后面的链接就是你的网站地址了，打开看看吧~

Tip：很多老铁评论说这里看不到绿色框框，没有URL。那是因为你的仓库名称与用户名不一致，不过不用担心，也是有办法的，看下面的第二张图片。

第一张图片

第二张图片(这里我设置成小图防止误导正常老铁, 点击可以放大图)

3，点开网站看一下

完成！

其实细心的同学会发现，其实我们的网站地址和我们写的仓库名称是一样的，是滴！而且非常有个性的是我们的名字还出现在网站地址中。

笔者的Github仓库&&网址：Git仓库地址 http://zhihu1.github.io/

本来到这里这个教程已经结束了，但是我想有的同学肯定是不满意的。首先你的这个网站做的太简陋了吧，不是我想要的那种!

那好，其实学会这个教程就可以做下面两个非常炫酷的小站点了，一个是生日祝福，一个是爱情纪念日。都是很有意义、很温馨的题材哦：）

霸都丶傲天：改改数据,为心爱的人做一个超具创意的网页生日祝福吧~霸都丶傲天：5分钟做一个免费的网页爱情树,快快学习发给自己的女朋友吧(微信QQ都可以查看哦)^_^霸都丶傲天：告白气球？圣诞节的创意网页小礼物不了解一下么？

所以是这样子的，我没有演示复杂的网页是因为它需要写的代码太多了，许多第一次接触Github的老铁，或者以前从来没接触过HTML的人就会有点陌生。

是的，这里我们提到了HTML，它就是网页的描述语言，对HTML感兴趣我推荐这些最好的免费自学网站。

国内的w3school （国内的w3School这两年商业元素越来越浓厚了，不怎么推荐了）
国外的w3school 网络条件好，并且英语还不错的同学建议看国外的
但是业界最专业的的自学网站应该是这个 https://developer.mozilla.org/en-US/docs/Web/HTML （Mozilla基金会出的mdn文档，绝对的大牛出品，质量把控）

后面一段时间，我还会出一些更高级的个人网站教程。所谓更高级不是说写一大堆代码，而是如何使用业界非常流行的静态网站生成器来做个人网站。静态网站生成器的英文说法叫做“static-site-generator”。我们只需要关注创作内容即可，这些工具可以帮助我们把网页做的非常绚丽，非常的awesome！

Github上面有专门的相关主题，并且非常火，这里我给个截图

Github上面有超过1500个静态网站生成工具

最后，这篇文章的初衷还是写给对编程知识不懂但是又感兴趣的老铁，以及刚上大学计算机系的后起新秀，做一个个人网站可以很大程度提高自己学习编程的动力，所以我觉得这是很有意义的一件事情。

感谢评论里的老铁各位的建议，有些老铁看了可能会疑惑，我来解答吧：

wordpress确实是业界做博客类网站，或者也叫内容型网站的首选。它适合不会编程但是又想做出很绚丽博客的人，它有很多模板可以选择，每一个模板就是一种风格样式。它不在本次文章的推荐中是因为，使用wordpress需要购买主机或者wordpress专用虚拟主机，是需要付费的。
@joey大佬提到了“用七牛，阿里之类的对象存储服务做免费的cdn静态网站”。确实在目前来看它们是比Github Pages可能更优秀的选择。但是它们有推销的嫌疑，所以我没有推荐这些，类似还有腾讯的COS对象存储，它们都有免费的额度，大概是一个月免费15GB流量，最高免费10GB文件存储。对于大部分人来说这些是足够的了。但是它的缺点也很明显，未来可能需要付费以及需要自己购买域名（当然你也可以使用它免费提供的域名，很长很难记！因为它看起来像这样子 Ukdalkdkl-china-shanghai-1。xxx。com ）

当然如果对上面感兴趣的老铁也可以在评论里面说，我也可以出类似的文章说一下怎么做的，用起来都很方便。

最后的最后，有什么问题直接评论即可，拜拜┏(＾0＾)┛，楼主镇楼。

着个人创业的流行，很多个人也需要一个比较详细的网站来展示自己，开展个人业务，或者积累粉丝等等。那么怎么制作自己的个人网站呢？又该怎么制作得更个性好看？下面就跟大家分享下制作方法。

上线了个人网站案例，禁止转载

一般来说，大部分个人都不懂代码技术，而从头学起又非常浪费时间，因此比较方便的方法是直接使用自助建站系统。现在市面上的自助建站系统很多，新手尽量选择操作简单、零门槛上手、模板设计美观、知名度较高的类型。

有了建站工具后，个人网站制作流程如下：进入「上线了」官网，注册账号后选择【创建网站】，再选择一个“个人”模板。

点击模板进入后台编辑页面，在这里你可以添加各种功能版块。网站页面就是由各种不同版块做成的，如果做个人插画、作品集网站，你可以添加网格、相册、大尺寸媒体、横向布局、纵向布局、联系方式等版块来展示作品，和访客沟通。

如果是做个人简历网站，那么你可以使用个人简介、经历、教育、技能、相册、所参与项目等功能版块，介绍你的工作经历。

如果是做个人博客网站，那么主要就是标题、博客、留言表单等版块。

在左上角【风格】里，你可以更改网站的主题风格、字体、模板；在【设置】-【域名】里，你可以设置网站域名。你还可以在网站页脚添加社交媒体图标，链接到自己的微博、抖音、B站等各媒体平台，吸引更多粉丝。

（演示效果）

上述全部做好并预览无误后，点击左下角“上线”即可。

这样一个个人网站就做成了。如何让自己的网站更有特色？如何避免网站千篇一律？可以注意以下这几点：

（1）多样化版块布局

上线了网站的版块布局是可以修改的，顺序也可调整，你可以选择喜欢的布局，让网站更加个性化；

（2）个性字体

独特的字体可以让你的网站给访客留下更深刻印象，在编辑器里点击风格 - 字体，点开任一字体类型，从本地上传一个字体文件就好。

（3）多图展现

图片是体现网站个性和时尚的重要部分。现在人们越来越倾向于碎片化阅读，因此你的个人网站也不宜放太多文字内容，尽量多用图片和视频，让网站更有活力。

以上就是如何制作个人网站的教程了，布局版块、个性设计，全程都非常简单，基本不费什么脑子。

在线咨询

上一篇：零基础10天学会网页制作第二天（下）之表格table标签
下一篇：HTML的基本

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商