网站建立

一、选择模板
二、布局设计
- 1.颜色
- 2.图片
- 3.内容板块划分
三、部分代码展示
- 1.头部
- 2.About板块
- 3.技能板块
- 4.兴趣爱好板块
- 5. Image板块
- 6. contact板块
四、部署到github
- 1.在github上步骤
- 2.步骤截图
五、总结几个小tips
- 1.找不到心仪的模板
- 2.修改网站的主色
- 3.如何把模板改成自己的内容
- 4.如何托管到github
- 5.尚未解决的问题

一、选择模板

模板链接

该模板是用现代 HTML5 和 CSS3 代码和 Bootstrap 构建的。

模板文件如下：

这里有免费模板可以下载：

https://bootstraptaste.com/
https://templatemo.com/page/1

二、布局设计

1.颜色

我采用了红色来作为我的网站主色。个人的红色照片配上网页线条的红，使画面和谐简洁又富有专属于红色的张扬感。红与黑的交织，高贵大气又上档次！！

2.图片

网站所有用到的图片都是我一张一张用ps修成的相应大小。颜色都经过了调配。

修图方法：
首先找到合适颜色的图片，打开ps新建合适的画布大小。如首页展示的图片为1920×1080，Image展示的图片为800×600，简历Resume用的是600*600。

接着拖拽图片进入画布，利用复制图层、填充背景、ctrl+T调整图片大小。

最后导出的时候需要注意文件大小不要太大，等级为“高”就不错了，文件实在太大时也可调成“中”。

3.内容板块划分

如图，我一共划分了五个区。
第一个是home主页面，此页面主要用作封面、导航和介绍。
第二个是About：用于介绍个人基本信息。此页面还介绍了我的技能、爱好，在最后有个“心情小诗”的分区：在这里展示了自己写的一些短句，自动翻滚显示。

第三个是Resume: 是个人简历，是属于比较庄重严谨的部分。
第四个是Fiction小说：用于展示本人写的一些短故事。每一个都可以点进去阅读。

第五个是Image: 包括个人照片、作品照片和奖状类图片。既做了分类，又可在“ALL”全部查看。
第六个Report: 用于放置结业报告。以及【联系我】的介绍页面。

如图：

三、部分代码展示

1.头部

<head><meta charset="utf-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><title>澹澹的个人网站</title><meta content="" name="description"><meta content="" name="keywords"><!-- Favicons --><link href="assets/img/favicon.png" rel="icon"><link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon"><!-- Google Fonts --><link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet"><!-- Vendor CSS Files --><link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet"><link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet"><link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet"><link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet"><link href="assets/vendor/venobox/venobox.css" rel="stylesheet"><!-- Template Main CSS File --><link href="assets/css/style.css" rel="stylesheet"></head>

2.About板块

About：用于介绍个人基本信息。3、4也可以归到这里来。

 <!-- ======= About Section ======= --><section id="about" class="about"><!-- ======= About Me ======= --><div class="about-me container"><div class="section-title"><h2>About</h2><p>Learn more about me</p></div><div class="row"><div class="col-lg-4" data-aos="fade-right"><img src="assets/img/me.jpg" class="img-fluid" alt=""></div><div class="col-lg-8 pt-4 pt-lg-0 content" data-aos="fade-left"><h3>个人简介 &amp; xxx</h3><p class="font-italic">The body is a Bodhi tree, the mind a standing mirror bright.</p><div class="row"><div class="col-lg-6"><ul><li><i class="icofont-rounded-right"></i> <strong>Birthday:</strong> 1 May 1999</li><li><i class="icofont-rounded-right"></i> <strong>Email:</strong> ddarcy123@163.com</li><li><i class="icofont-rounded-right"></i> <strong>Phone:</strong> 138 8383 4320</li><li><i class="icofont-rounded-right"></i> <strong>City:</strong> 重庆</li></ul></div><div class="col-lg-6"><ul><li><i class="icofont-rounded-right"></i> <strong>Age:</strong> 22</li><li><i class="icofont-rounded-right"></i> <strong>Degree:</strong> 本科</li><li><i class="icofont-rounded-right"></i> <strong>微信公众号:</strong> foryourbook</li><li><i class="icofont-rounded-right"></i> 今日头条： <a href="http://dwz.date/bU4q">澹澹xiu</a></ul></div></div><p>流水不争先，争的是滔滔不绝</p></div></div></div><!-- End About Me -->

效果如下：

3.技能板块

代码：

<!-- ======= Skills  ======= --><div class="skills container"><div class="section-title"><h2>Skills</h2></div><div class="row skills-content"><div class="col-lg-6"><div class="progress"><span class="skill">写作 <i class="val">90%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress"><span class="skill">辩论 <i class="val">90%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress"><span class="skill">Office<i class="val">70%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></div></div></div><div class="col-lg-6"><div class="progress"><span class="skill">网站 <i class="val">70%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress"><span class="skill">剪视频 <i class="val">70%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress"><span class="skill">Photoshop <i class="val">65%</i></span><div class="progress-bar-wrap"><div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div></div><!-- End Skills -->

效果如下：

4.兴趣爱好板块

代码：

 <!-- ======= Interests ======= --><div class="interests container"><div class="section-title"><h2>Interests</h2></div><div class="row"><div class="col-lg-3 col-md-4"><div class="icon-box"><i class="ri-store-line" style="color: #ffbb2c;"></i><h3>樊登听书</h3></div></div><div class="col-lg-3 col-md-4 mt-4 mt-md-0"><div class="icon-box"><i class="ri-bar-chart-box-line" style="color: #5578ff;"></i><h3>看书</h3></div></div><div class="col-lg-3 col-md-4 mt-4 mt-md-0"><div class="icon-box"><i class="ri-calendar-todo-line" style="color: #e80368;"></i><h3>狼人杀</h3></div></div><div class="col-lg-3 col-md-4 mt-4 mt-lg-0"><div class="icon-box"><i class="ri-paint-brush-line" style="color: #e361ff;"></i><h3>辩论</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-database-2-line" style="color: #47aeff;"></i><h3>写作 </h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-gradienter-line" style="color: #ffa76e;"></i><h3>自拍</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-file-list-3-line" style="color: #11dbcf;"></i><h3>篮球</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-price-tag-2-line" style="color: #4233ff;"></i><h3>旅行</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-anchor-line" style="color: #b2904f;"></i><h3>看剧 </h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-disc-line" style="color: #b20969;"></i><h3>唱歌</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-base-station-line" style="color: #ff5828;"></i><h3>裙子</h3></div></div><div class="col-lg-3 col-md-4 mt-4"><div class="icon-box"><i class="ri-fingerprint-line" style="color: #29cc61;"></i><h3>动漫</h3></div></div></div></div><!-- End Interests -->

效果如下：

5. Image板块

包括个人照片、作品照片和奖状类图片。既做了分类，又可在“ALL”全部查看。

 <section id="portfolio" class="portfolio"><div class="container"><div class="section-title"><h2>image</h2><p>My Photo album</p></div><div class="row"><div class="col-lg-12 d-flex justify-content-center"><ul id="portfolio-flters"><li data-filter="*" class="filter-active">All</li><li data-filter=".filter-app">个人</li><li data-filter=".filter-card">作品</li><li data-filter=".filter-web">奖状</li></ul></div></div><div class="row portfolio-container"><div class="col-lg-4 col-md-6 portfolio-item filter-app"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-1.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>蒙娜丽莎</h4><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="bx bx-plus"></i></a></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-app"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-3.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>神明少女</h4><!-- <p>App</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-3.jpg" data-gall="portfolioGallery" class="venobox" title="App 2"><i class="bx bx-plus"></i></a></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-app"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-6.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>森系花篮</h4><!-- <p>App</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-6.jpg" data-gall="portfolioGallery" class="venobox" title="App 3"><i class="bx bx-plus"></i></a></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-web"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-2.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>小灶运培生</h4><!-- <p>Web</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-2.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-web"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-9.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>最佳辩手</h4><!-- <p>Web</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-9.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-web"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-5.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>头条之星</h4><!-- <p>Web</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-5.jpg" data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-card"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-7.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>运营工具</h4><!-- <p>Card</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-7.jpg" data-gall="portfolioGallery" class="venobox" title="Card 1"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-card"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-8.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>营销思路</h4><!-- <p>Card</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-8.jpg" data-gall="portfolioGallery" class="venobox" title="Card 3"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div><div class="col-lg-4 col-md-6 portfolio-item filter-card"><div class="portfolio-wrap"><img src="assets/img/portfolio/portfolio-4.jpg" class="img-fluid" alt=""><div class="portfolio-info"><h4>活动运营</h4><!-- <p>Card</p> --><div class="portfolio-links"><a href="assets/img/portfolio/portfolio-4.jpg" data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="bx bx-plus"></i></a><!-- <a href="portfolio-details.html" data-gall="portfolioDetailsGallery" data-vbtype="iframe" class="venobox" title="Portfolio Details"><i class="bx bx-link"></i></a> --></div></div></div></div></div></div></section>

6. contact板块

 <section id="contact" class="contact"><div class="container"><div class="section-title"><h2>Report</h2></div>
<a href=report.html > <p>《通信软件开发与应用》课程结业报告</p></a> <div class="row mt-2"><div class="col-md-6 d-flex align-items-stretch"><div class="info-box"><i class="bx bx-map"></i><h3>My Address</h3><p>重庆市, 南岸区</p></div></div><div class="col-md-6 mt-4 d-flex align-items-stretch"><div class="info-box"><i class="bx bx-envelope"></i><h3>Email Me</h3><p>ddarcy123@163.com</p></div></div><form action="forms/contact.php" method="post" role="form" class="php-email-form mt-4"><div class="form-row"><div class="col-md-6 form-group"><input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" /><div class="validate"></div></div><div class="col-md-6 form-group"><input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" /><div class="validate"></div></div></div><div class="form-group"><input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" /><div class="validate"></div></div><div class="form-group"><textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message"></textarea><div class="validate"></div></div><div class="mb-3"><div class="loading">Loading</div><div class="error-message"></div><div class="sent-message">Your message has been sent. Thank you!</div></div><div class="text-center"><button type="submit">Send Message</button></div></form></div></section>

四、部署到github

1.在github上步骤

2.步骤截图

新建仓库，上传代码文件。如图：

查看自己的仓库：

上传代码文件：

pages页面查看网址，注意选中标签

github部署完成的网站链接

五、总结几个小tips

过程中我遇到的难题主要是：

1.找不到心仪的模板

在如下两个链接中得到解决。
https://bootstraptaste.com/
https://templatemo.com/page/1

2.修改网站的主色

我找到的模板风格为“绿色+黑白色”，我想做的是“红+黑色”。涉及到修改网站的主色。

解决：找到css文件，在visual stidio code打开可以看到关于颜色的设置都会显示有一个小方块。当且仅需把绿色的小方块修改成红色。用“#”去查找也比较快（由于这个文件不大且小方块很显眼）。

3.如何把模板改成自己的内容

我只需要用浏览器预览，然后把需要修改的文字复制几个字到visual studio code查找出来，就可以找到我想要修改的代码在哪里。因为板块之间“显示部分”多半挨着，所以工作量较小。

4.如何托管到github

因为不了解github走了比较多弯路。我主要是上传了网站之后，链接一直打不开。在命令行上传、git软件做都试过。

后来发现只是因为我打开的时候把http://也复制进网址了，当我去掉的时候就可以打开了。
成功打开不久后，我又发现即使再像之前那样有http://也可以正常打开。
所以我也没懂之前到底为什么打不开。。。。

5.尚未解决的问题

contact板块没有实现真正的互动。搜了搜，似乎要用到别的东西PHP。

建立一个个人网站部署到github上相关推荐

使用hugo生成静态博客并部署在GitHub上
使用hugo生成静态博客并部署在GitHub上 hugo是一个用Go语言编写的静态网页生成器,只需要一个命令 hugo 就可以在几秒钟内生成一个静态的博客页面,被称为世界上最快的网站构建框架,使hug ...
php简历github,怎么将个人简历部署在github上?
怎么将个人简历部署在github上? 面试的时候如果没带简历,或者简历刚好投完了,就特别尴尬,并且可能错失一次求职的机会.所以在网络端部署一个网页版的简历就比较重要了. 环境配置这里所用到的是免费的 ...
将本地Blog部署到GitHub上，有自己的博客页面！
前言上一篇文章我们已经把本地的hexo环境搭建好了,并且在本地成功预览,但是本地预览也意味着自己的博文只能自己看的到,其他人根本看不到,这篇文章将接上文说一说如何把本地Blog部署到GitHub上, ...
github 公钥私钥_搭建自己的技术博客系列 2：把 Hexo 博客部署到 GitHub 上
1.在GitHub上建一个新仓库 2.配置Git的SSH KEY 生成SSH添加到GitHub 回到你的git bash中, git config --global user.name "y ...
github ssh 配置_搭建自己的技术博客系列 2：把 Hexo 博客部署到 GitHub 上
1.在GitHub上建一个新仓库 2.配置Git的SSH KEY 生成SSH添加到GitHub 回到你的git bash中, git config --global user.name "y ...
自己如何建立一个公司网站?公司网站建设策划书怎么写?
如何建立一个公司网站?对于一个新手来说建立一个公司网站,虽然步骤看起来很简单,但是实际操作起来,不是那么容易把网站做好的.想快速建网站只需要找准自己的需求,按照流程操作就很方便快捷.建网站之前需要准备 ...
独立开发变现周刊（第78期）：建立一个佣金网站，每月赚4万美元
分享独立开发.产品变现相关内容,每周五发布. (合集:https://www.ezindie.com/weekly ) 目录 1.Jobboardsearch: 面向全世界的公开招聘网站 2.Hove ...
搭建Hexo部署到github上
一.安装步骤提前安装好node和git,然后安装hexo npm install -g hexo-cli 本地建站 $ hexo init <folder> folder本地项目存放的目 ...
A网站引用B服务器虚拟目录文件导致：网站部署到IIS7上出现HTTP 错误 500.19(由于权限不足而无法读取配置文件)的问题
A网站引用B服务器共享目录(虚拟目录)导致:网站部署到IIS7上出现HTTP 错误 500.19(由于权限不足而无法读取配置文件)的问题本攻略并不是本机的部署导致的HTTP 错误 500.19 问题 ...

建立一个个人网站部署到github上

网站建立

一、选择模板

二、布局设计

1.颜色

2.图片

3.内容板块划分

三、部分代码展示

1.头部

2.About板块

3.技能板块

4.兴趣爱好板块

5. Image板块

6. contact板块

四、部署到github

1.在github上步骤

2.步骤截图

五、总结几个小tips

1.找不到心仪的模板

2.修改网站的主色

3.如何把模板改成自己的内容

4.如何托管到github

5.尚未解决的问题

建立一个个人网站部署到github上相关推荐

最新文章

热门文章