如何快速搭建个人网站-CSDN博客

本文链接：https://blog.csdn.net/edward_zcl/article/details/95336032

一般来说，搭建网站，首先需要借助一个云平台，具有存储库的功能，上面的东西发布后，能够被网络上所有人访问到，当然这云平台是有自己的一套机制进行后台的设定与运作的，我们只是在基础上使用，可以看做是一种大框架。比如阿里云，腾讯云，CSDN博客，脚本之家，Github，以及其他的一些个人网站，公司网站等等，甚至包括网上所有发布的东西的网站，背后都是有一个云平台的，而在基础上对应会有一些开发语言，或者工具，比如：Html/Html5，JS，Php，flask，一些脚本语言，比如：Latex，markdown，nodejs等等也是类似的，它们之间甚至可以相互兼容，比如markdown与html，转载功能就是使用它们之间相互兼容的性质。。甚至一些大数据平台，比如：Django，Hadoop，Spark等等，都是时代进化的产物。。

这里由于我个人能力有限，本人也不是主要做这个前端设计的，所以暂时只简单介绍下如何使用现有的Github工具快速搭建个人网站，主要使用html5与markdown。
这里我先列出一个模板，html5 ，用css去修饰自己的个人主页，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
 
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
}
#aa {
	position: fixed;
	height: 662px;
	width: 1366px;
	background: #FFF;
}
#bb {
	background: #FFF;
	position: absolute;
	height: 401px;
	width: 1398px;
	left: -31px;
	top: 0px;
}
#cc {
	background: #09C;
	position: absolute;
	height: 63px;
	width: 1404px;
	left: -34px;
	top: 418px;
	font-size: 36px;
	color: #FFF;
}
#dd {
	position: absolute;
	height: 124px;
	width: 175px;
	left: 1142px;
	top: 136px;
}
#ee {
	position: absolute;
	height: 295px;
	width: 510px;
	left: 953px;
	top: 70px;
	line-height: 24px;
}
#ff {
	position: absolute;
	height: 66px;
	width: 214px;
	left: 600px;
	top: 553px;
	font-size: 45px;
	font-weight: bold;
}
.gg {
	font-size: 36px;
}
#aa #bb #ee table tr td {
	color: #000;
}
#aa #bb #ee table {
	color: #000;
}
#gg {
	position: absolute;
	height: 161px;
	width: 195px;
	left: 573px;
	top: -55px;
	font-size: 16px;
}
</style>
</head>
 
<body>
<div id="aa">
  <div id="cc">                                                            青春     奔放    活泼    热情&copy;</div>
  <div id="bb">
    <div id="ee">
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><hr /></td>
        </tr>
        <tr>
          <td><p>姓名：%%%</p></td>
        </tr>
        <tr>
          <td>性别：男</td>
        </tr>
        <tr>
          <td>年龄：19</td>
        </tr>
        <tr>
          <td>家乡：<a href="http://baike.baidu.com/link?url=ZkJSggcN2Nl7Xe0HaB0hSRrMkIdo-VGCNJWpbPIWNt1-M7xPr4FkF2qdxHGCMz3lT0LdGTsXi5zMtwMWKZ5S3Pz8elmt9ATA1omMMMfTIBSdG430mMTTJk0MyAlQO88B">甘肃省镇原县</a></td>
        </tr>
        <tr>
          <td>就读院校：<a href="http://baike.baidu.com/item/%E5%9B%9B%E5%B7%9D%E5%A4%A7%%A6">**大学</a></td>
        </tr>
        <tr>
          <td>就读专业：<a href="http://baike.baidu.com/item/%E5%BE%AE%E7%94%E7%A7%91%E5%AD%A6%E4%B8%8E%E5%B7%A5%E7%A8%8B%E4%B8%93%E4%B8%9A">微电子科学与工程专业</a></td>
        </tr>
        <tr>
          <td>学生证号：201614#######</td>
        </tr>
        <tr>
          <td>兴趣爱好：听歌，打篮球</td>
        </tr>
        <tr>
          <td>政治面貌：团员</td>
        </tr>
        <tr>
          <td>联系电话：13245676543</td>
        </tr>
        <tr>
          <td>Email:179997256@qq.com</td>
        </tr>
        <tr>
          <td>关键词：学生</td>
        </tr>
        <tr>
          <td> </td>
        </tr>
      </table>
    </div>
    <img src="img/1497103056360.jpg" width="1398" height="403" /></div>
  <div id="ff">
    <div id="gg">
      <p> </p>
      <p> </p>
      <p> </p>
      <p><a href="zhuye.html">回到主页</a></p>
      <form id="form1" name="form1" method="post" action="">
      </form>
    </div>
  About  me</div>
</div>
</body>
</html>

在这里插入图片描述

源代码下载地址：https://download.csdn.net/download/weixin_39641975/10371468

新站链接：http://www.guoxiaowen.com/

其实写Html5，实际上就是一个排版的过程，写过Qt界面的人，这种感觉应该很熟悉，甚至就如同你做PPT，一个是手动图形化进行，一个是写代码生成，当然这里面其实有很多模板可以使用，自己可以修修改改，所以有很多机构或者第三方中介进行推广他们的作品。。
当然了，现在也出现了一些好用的脚本语言或者工具，比Html更好用，比如：markdown，gitbook等，甚至github上面也支持了markdown格式的readme文件，github还增加了直接识别txt文件的gitignore文件好像，参考：
https://blog.csdn.net/yzy_1996/article/details/82052159
https://www.jianshu.com/p/191d1e21f7ed
https://www.jianshu.com/p/2cfd1e8031d3
https://www.jianshu.com/p/8a804132aa37
https://www.runoob.com/markdown/md-tutorial.html
https://www.mdeditor.com/
https://www.zybuluo.com/mdeditor
http://markdownpad.com/
https://blog.csdn.net/wads23456/article/details/79521019
http://www.markdown.cn/
http://username.github.io/
以及markdown官网，其实CSDN就是直接支持markdown的，当然也支持一个叫做富文本编辑器的东西，应该差不多吧。
高端一些的网站，可能需要更加规范标准的设定，比如：域名，服务器，建站系统，当然了，这些可能是需要收费的，现在想想，还是开源的Github好啊，至少提供平台，让大家都可以充分大展所长，广而告之。
https://blog.csdn.net/caoshangpa/article/details/78561806
https://www.jb51.net/yunying/487879.html
https://blog.csdn.net/xiaosongshine/article/details/88861445

最后，咱们还是来点实用的吧，直接使用github提供的平台进行个人网站搭建。
参考：
https://www.cnblogs.com/joshtao/articles/6601430.html
https://blog.csdn.net/qq_36002627/article/details/78331885

前言

本来想自己琢磨整一个服务器来搭建个人网站的。
然后因为阿里云没有学生活动，腾讯云学生验证的时候用微信实名验证了导致无法参与。
因为囊中羞涩，其他那些知名的云服务器又不舍得花钱租。
不过最后还是想到了一个出路，我是做前端嘛，主要找个平台给我放放网站什么的就好了。还不用苦恼怎么搭建后台。
发现github pages是个好方法。遗憾的是因为只是给你放放网页的原因所以你也就只能做做静态网页。对我来说就先这样吧，因为不确定是不是三分钟热度。所以也就先弄着，等到后面实在需要动态网页的时候再去整个云服务器来。

GitHub基础

因为上课的时候实验有需求所以已经将GitHub账号弄好了。

然后个人电脑是windows平台，因此需要装个电脑版的git来方便推送到GitHub上。这个因个人而异，有些人喜欢图形化界面的话GitHub有提供github desktop。

搭建一个特殊的仓库

其实网上也有很多这样那样的教程，发现他们都过于复杂了点。因为他们还囊括了其他东西，本文目的很简单，就是让你电脑上的一个html文件能够放到外面服务器上并且被访问到。不关心你html写的如何如何。

最简单的方法就是官方提供的方法。

不过担心有的朋友无法访问或者懒得去寻找（无法访问？你走吧…别想着这个方式搭网站了）

我在这提供了原地址与部分教程

GitHub Pages

总而言之，第一步：

建立一个名为username.github.io的仓库，这里划重点啊，username真的是你的GitHub名字，而不是自己瞎取。（虽然我不知道瞎取行不行）
在这里插入图片描述
自官方教程的截图，注意到username是对应的）

第二步

这一步注意目的就是将你先建的这个远程仓库和你电脑上的本地仓库关联起来

有很多方式，装了git的用命令行，装了GitHub desktop的用这个。

拿命令行举例

命令行选好自己目标文件夹的位置后，将远程仓库内容克隆到本地仓库

git clone https://github.com/username/username.github.io

接下来进入到克隆好的仓库，并且新建内容为hello world，名为index的html文件（注意空格哦），这里的index.html就是你到时候打开的网页。其他的命名都不行（我试过了）

cd username.github.io
echo "Hello World" > index.html

最后将这个index.html推到GitHub上

git add --all
git commit -m "Initial commit"
git push -u origin master

等一会，访问 http://username.github.io. 这个网址就能看到你的hello world了。

不过要等一阵子，我一开始以为失败了，一直是404。过会了就成功了。

你如果会使用Git命令，那是最好，可以直接以命令行的形式实现各种功能，如果你使用windows github desktop也没关系，也有对应的教程。