在去年出国申请的时候就想着建一个个人主页,但是由于各种原因(懒),就没弄。现在快毕业了,稍微有点空,就照着网上的资料一点点地做了一个。重申一下,这只是个简易版的个人主页,可以简单介绍自己的基本情况,放个CV什么的,没有比较炫酷的功能。书归正传,下面开始介绍。
环境配置
首先要确保你有一个github账号和git客户端。在注册github账号的时候,要注意起一个合适的账户名,因为这就是以后你的个人主页的域名。有了github账号之后,登录进去之后。点击页面右上方的+,在出现的小窗口中选择New repository创建新的repository。接着,在Repository下面输入repository的名字,名字为http://username.github.io。这里的username即是你的账户名,http://username.github.io便是你个人主页的域名。最后点击页面右下方的Create repository即可。
打开命令提示符,执行以下命令:
git clone https://github.com/username/username.github.io
这样在你的电脑上就有一个http://username.github.io文件夹,一般是位于执行命令行时所在的文件夹。找到该文件夹,新建一个index.html文件,可以用下面这个简单的文件试一下。
<!DOCTYPE html>
打开git客户端,将路径定个位到http://username.github.io文件夹,执行以下命令,把index.html文件push到新建的repository中。
git add .
git commit -m "初始化个人主页仓库"
git push
这样你就可以在浏览器通过域名http://username.github.io访问网页了。
设计网页
首先确定网页的框架,如下图所示,网页分为三块:Top,Bottom_Left,Bottom_Right。分别由三个html文件来确定它们显示的内容。
首先要创建一个FrameSetting.html的文件,来实现这样的网页布局。下面是FrameSetting.html的代码。
<!DOCTYPE html>
从代码可以看出,首先将页面分为上下两部分,比例为1:9,下面部分再分为左右两部分,左边的宽度为325px。
Top部分可以作为一个标题,为简单起见,这里我直接就显示自己的名字。Top.html代码如下所示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<font face = "Times New Roman"/>
<title>Top Frame</title>
</head>
<h2>   <a href = "https://username.github.io" target="_blank"
style= "color:black; text-decoration:none;" >Xingxing Liu</a></h2>
<hr/>
<body>
</body>
</html>
Bottom_Left部分可以放一些基本的个人信息,比如头像,学校,邮箱等。下面是Bottom_Left.html的代码。
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<font face = "Times New Roman"/>
<title>Bottom Left</title>
</head>
<body>
<style>
img.ex1
{
position:absolute;
Top:20px;
Left: 80px;
}
</style>
<img class = "ex1" src ="Xingxing_Liu.jpg" width ="150" height = "150">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h2>     Your Name 你的名字</h2>
<p>      Undergraduate in University of<br />
      Science and Technlogy of China</p>
      <img src ="Linkedin_Logo.jpg" width ="15" height = "15">
<a href = "https://www.linkedin.com/in/firstname-lastname-5360a2169/" target="_blank"
style= "color:black; text-decoration:none;" >Linkedin</a>
<p> </p>
      <img src ="Gmail_Logo.png" width ="15" height = "15">
<a href = "wakeupliu1996@gmail.com" target="_blank" style= "color:black; text-decoration:none;" >username@gmail.com</a>
<p> </p>
      <img src ="Location_Logo.jpg" width ="15" height = "15"> Hefei, Anhui, China
<p> </p>
      <img src = "Github_Logo.jpg", width = "15" height = "15">
<a href = "https://github.com/username" target="_blank" style= "color:black; text-decoration:none;" >Github</a>
</body>
</html>
Bottom_Right可以放一些自己的具体信息,比如个人介绍、教育经历、研究兴趣等。Bottom_Right.html的代码如下所示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<font face = "Times New Roman"/>
<title>Bottom Right</title>
</head>
<br/>
<h1>About Me</h1>
<hr width = 775px align = "left"/>
<p> <font size = "4.5">I am currently a last year undergraduate in
<a href = "https://www.ustc.edu.cn" target="_blank" style= "color:blue; text-decoration:none;" >
University of Science and Technology of China.</font></p>
<h1>Education</h1>
<hr width = 775px align = "left"/>
<img src = "USTC_Logo.jpg", width = 100px height = 100px style = "float:left"/>
<div style = "float:left">
<font size = "1"><br/></font><font size = "5" face = "Times New Roman"> 
University of Science and Technology of China, Hefei, China<br/></font>
<font size = "4.5">  August 2014 - July 2019<br/>  B.S. in Applied Physics</font></div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h1>Skills</h1>
<hr width = 775px align = "left"/>
<p> <font size = "4.5">C/C++, MATLAB, Python, Java, Mathematica, HTML;
Linux, Origin Lab, Qt Creator (GUI), LaTeX;<br/>Point Cloud Library(PCL), Caffe(Machine Learning), Spyder;
Numpy, Scikit-learn/image, Matplotlib</font></p>
<h1>Projects</h1>
<hr width = 775px align = "left"/>
<p> <font size = "4.5">Waiting for updated.</font></p>
<body>
</body>
</html>
如果此时直接将FrameSetting.html命名为index.html放入建好的repository中,则显示的网页会有问题。由于只有Bottom_Right部分比较长,所以在页面右下方会出现滚轮,而不是整个页面右边出现滚轮。为了解决这个问题,需要在FrameSetting.html上层在建一个html文件,用来放置FrameSetting,将之命名为index.html,其代码如下所示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Xingxing Liu's Home Page</title>
</head>
<body style="margin: 0px; height:850px; width:auto">
<iframe src="FrameSetting.html" style="height:100%;width:100%;border-width:0px;">
</iframe>
</body>
</html>
将所有的html文件,以及所用到的图片上传到http://username.github.io这个repository中就可以了。
浏览器访问域名http://username.github.io,就可以看到网页的样子。
备注:建立个人主页之后遇到一个问题,就是用谷歌浏览器访问域名可以看到网页,但是用其他浏览器就是404。后来才发现需要设置github page的theme。具体操作是:首先打开个人主页对应的repository,然后点击进入Settings,下拉到Github Pages一栏,设置Theme。