一個簡單的個人網站模板

在的網站效果多樣而功能復雜，技術棧也多種多樣，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的反爬蟲系統很強很強?。?/p>

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

到這里我們的注冊就完成了。

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）多圖展現

圖片是體現網站個性和時尚的重要部分?，F在人們越來越傾向于碎片化閱讀，因此你的個人網站也不宜放太多文字內容，盡量多用圖片和視頻，讓網站更有活力。

以上就是如何制作個人網站的教程了，布局版塊、個性設計，全程都非常簡單，基本不費什么腦子。

在線咨詢

上一篇：零基礎10天學會網頁制作第二天（下）之表格table標簽
下一篇：HTML的基本

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商