Article directory
1. Write in front
The reason why programming is fascinating is that it is always fun. Today, I will share with you a set of exquisite personal homepage source code with online deployment tutorials. Let's feel the charm of the program together!
This article is simultaneously published on my personal website, welcome to visit: https://sunguoqi.com/2021/10/10/my_profile/
2. Effect display
The source code comes from the Internet, invade and delete!
Online demo URL:
URL 1 (deployed on the server, the response speed is faster): https://sunguoqi.com/about/
URL 2 (hosted on GitHub, slow response time): https://sun0225sun.github.io/My-profile/
3. Partial source code snooping
HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/sun0225SUN/photos/img/20210715233345.png">
<title> I am your sunshine</title>
<link rel="apple-touch-icon-precomposed" href="images/avatar.bab2b7d4.jpeg">
<link rel="stylesheet" type="text/css" href="css/h.9c69ed6c.css">
<link rel="stylesheet" type="text/css" href="css/nekotora.99cf6f8c.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137340638-1"></script>
<script>
function a() {
dataLayer.push(arguments)
}
window.dataLayer = window.dataLayer || [], a("js", new Date), a("config", "UA-137340638-1");
</script>
</head>
<body>
<nav>
<a href="https://www.sunguoqi.com/" target="_blank" class="active">首页</a> <a class="clip"></a>
<a href="https://www.sunguoqi.com/categories/" target="_blank">归档</a>
<a class="clip"></a> <a href="https://www.sunguoqi.com/archives/" target="_blank">文章</a>
<a class="clip"></a> <a href="https://www.sunguoqi.com/comments/" target="_blank">留言板</a>
</nav>
<body onContextMenu="alert('禁止查看源代码，您的行为已记录。'); return false"
NOOP="if (window.event != null && window.event.button == 2) alert ('Thanks...');">
<div class="background">
<canvas id="startrack"></canvas>
<div class="cover"></div>
</div>
...................此处省略部分代码........................
<div class="footer ch">
<div class="container">
<h3>小孙同学在努力</h3>
<p>蘑菇森林的尽头，新世界的起点</p>
<p class="c"><a href="/" target="_blank">Say hello to me @ sunshine</a></p>
</div>
</div>
</div>
<script src="js/page.3a0791a3.js"></script>
<script type="text/javascript" src="js/stats.js" charset="UTF-8">
</script>
<audio autoplay>
<source src="https://api.uomg.com/api/rand.music?sort=热歌榜" type="audio/mpeg">
</audio>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}
body,
html {
font-family: Microsoft YaHei;
-webkit-font-smoothing: antialiased;
color: #fff;
line-height: 1.5;
min-width: 1150px;
background-color: #212121;
font-size: 14px;
overflow-x: hidden
}
..............此处省略部分代码................
@media screen and (max-width:700px) {
body,
html {
min-width: 0
}
.container {
width: auto;
margin: 0 5%
}
div.el span {
display: block;
width: 60%;
left: 0;
top: 75px;
margin: -40% auto 0
}
...............省略部分代码................
.gate .links .item .inner h5,
.gate .links .item .inner p {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.footer {
padding-bottom: 100px
}
.footer h3,
.footer p {
letter-spacing: .2em
}
}
@font-face {
font-family: nekotora;
src: url(../fonts/nekotora.54f9b137.eot);
src: url(../fonts/nekotora.54f9b137.eot#iefix) format("embedded-opentype"), url(../fonts/nekotora.4ea5ebe6.woff2) format("woff2"), url(../fonts/nekotora.9106c612.woff) format("woff"), url(../fonts/nekotora.28169ea4.ttf) format("truetype"), url(../images/nekotora.33032896.svg#nekotora) format("svg");
font-weight: 400;
font-style: normal
}
[class*=" icon-"]:before,
[class^=icon-]:before {
font-family: nekotora;
font-style: normal;
font-weight: 400;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.icon-search:before {
content: "\e800"
}
.............此处省略部分代码..............
JS
;(function(global){
global.Ta=global.Ta||{
};
Ta.hack=function(){
return {
params:'',
conf:{
sid:30582263,pf:1,logo:255,hot:{
}} };
};
})(this);
..........此处省略部分代码..........
"Bb20": [function (require, module, exports) {
Object.prototype.document = window.document, Object.prototype.location = window.location; var t = require("zepto").$; function e() {
var e = ["希望能成为有趣的人", "给时光以生命<br>给岁月以文明", "你好，请多指教", "一望无际的迷雾中，<br>有人在寻找光明!", "你所热爱的<br>就是你的生活", "当你在凝视着网页的时候<br>网页也正在凝视着你", "热爱……", "平凡的日常正奇迹的发生着", "敬畏之心！", "赞美之心！", "我很好奇！", "欢迎大家光临星象馆<br>这里有着无论何时永远不会消失<br>美丽的无穷光辉<br>满天的星星等候着大家的到来", "*舒缓的现代音乐*"],...............此处省略部分代码..............
},
Fourth, complete source code acquisition
Wechat search the official account [live up to the ideals of the world], after following the official account, reply to the keyword [streamer personal homepage source code] to get the download link! ! !
After decompressing the source code from the official account, you will have the following files, double-click index.htmlto see the effect!
5. DIY suggestions
Open the folder with your usual editor (recommended VScode), if you are DIY, you mainly modify index.htmthe content and structure in l. Note that the program introduces fontawesomefont icons, which can be nekotora.99cf6f8c.cssmodified in!
6. Online Deployment Tutorial
After DIY, your personal web page is ready, but it only supports local access, and you can't access it online. Wow? How to do it? ? ?
emmmmmmmmm…
Today I teach you a free solution to host your code on GitHub and take advantage of GitHub pagesonline deployment!
1. Register on GitHub
Enter the GitHub official website to register an account, and children's shoes with an existing account can skip it. (GitHub's registration page is really getting more and more cool)
Video demo: https://www.bilibili.com/video/BV1Ev411P7BN
2. Create a new warehouse
Click +Create a new warehouse in the upper right corner of the home page, fill in the warehouse name, description information, add a readme file (optional), and click creat repositoryOK to create.
3. Upload the code to the repository
3.1 GitHub online upload
Select Add file——> Upload files——> CTRL+A 全选文件——> 拖动到GitHub的上传区域——> 等待上传——> 上传成功——>确认Commit Changes
Note that the files in the folder (including four folders and one
index.htmlfile) are uploaded here, rather than uploading a separate folder.
3.2 Upload using git
Download the code of the remote warehouse to the localgit clone https://github.com/你的仓库地址
Then execute the git add git commit git pushcommand.
Windows PowerShell
版权所有（C） Microsoft Corporation。保留所有权利。
安装最新的 PowerShell，了解新功能和改进！https://aka.ms/PSWindows
PS I:\桌面\My-profile> git add .
PS I:\桌面\My-profile> git commit -m "first commit"
[main cd1a05f] first commit
11 files changed, 1245 insertions(+)
create mode 100644 css/h.9c69ed6c.css
create mode 100644 css/nekotora.99cf6f8c.css
create mode 100644 fonts/nekotora.28169ea4.ttf
create mode 100644 fonts/nekotora.4ea5ebe6.woff2
create mode 100644 fonts/nekotora.54f9b137.eot
create mode 100644 fonts/nekotora.9106c612.woff
create mode 100644 images/butterfly.png
create mode 100644 images/hexo.jpg
create mode 100644 index.html
create mode 100644 js/page.3a0791a3.js
create mode 100644 js/stats.js
PS I:\桌面\My-profile> git push
Enumerating objects: 18, done.
Counting objects: 100% (18/18), done.
Delta compression using up to 8 threads
Compressing objects: 100% (17/17), done.
Writing objects: 100% (17/17), 56.44 KiB | 8.06 MiB/s, done.
Total 17 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To https://github.com/sun0225SUN/My-profile.git
01178c4..cd1a05f main -> main
PS I:\桌面\My-profile>
4. GitHub Pages settings
Click on the repository page Settings--> select Pagesoptions --> Sourceset as mainbranch --> Savesave
5. You're done!
After clicking Savesave, the page is automatically refreshed, and we can see the access URL of the project, such ashttps://sun0225sun.github.io/My-profile/
7. Write it in the back
ctrl+c ctrl+vEven if you don't have any project deployment experience, you can still have such a cool personal homepage. It's not easy to code words. Give it a like and support!
Everyone is welcome to pay attention to my personal public account [Let's live up to the ideals of the world], I hope you and I can live up to other people's ideals and become a better version of myself!