在GitHub上搭建个人主页

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hohaizx/article/details/85066248

最近因为项目组统一要求,在GitHub上搭建了一个个人主页,也就是个人简历页面。过程中遇到了一些问题,特记录下来与大家分享。
首先大家需要在GitHub上注册一个账号,注册账号过程就不在此赘述了,注册好账号后并登入将进入如下页面:

选择“Start a project”或者“New repository”创建一个新的仓库,输入Repository name,其格式是“username.github.io”或者“username.github.com”,username就是大家注册账号时的username,Description处可以写上对仓库的描述。

然后点击“Create repository”完成仓库的创建。之后,就可以往仓库中上传代码了,我们的目的是建一个个人主页,通常简单的html代码就能满足。更令人激动的是,GitHub为我们提供了一系列的主题模板。点击“Setting”按钮进入Setting页面。

找到“GitHub Pages”,点击“Choose a theme”。

我选择了第一个“Cayman theme”,大家可以根据自己的爱好选择。

确定主题后,GitHub将帮助我们自动完成主题的创建,生成两个文件,“_config.yml”和“index.md”,其中“index.md”是包含我们主页内容的markdown格式文本,“_config.yml”是对“index.md”进行渲染的配置文件。按照我的理解是,GitHub后台采用Jekyll根据“_config.yml”配置将“index.md”渲染成对应的“index.html”文件,完成展示。

对“index.md”文件进行编辑,生成个人主页的内容和格式。“index.md”采用markdown格式书写,markdown是一种标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。就像写论文一样,我们首先要确定个人主页要展示的主要内容,我选择展示以下信息:“个人信息、最新消息、研究方向、荣誉奖励、项目研究”。

“### 内容”是markdown标题格式,一个“#”代表一级标题,依此类推,“###”表示三级标题。确定好标题后,往各个类目中填入内容即可完成个人主页的编辑。

然后点击“Commit changes”即可完成提交,可以看到现在我们的个人主页内容和格式如下:

此时,我们就已经完成了一个简单的个人主页的搭建,通过https://bdhehohai.github.io就能访问到我们的个人主页。“bdhehohai”对应大家的username。

上面的个人主页也未免太过简单,通常在制作个人简历时,我们会将个人主要信息以及个人生活照/证件照放在最顶端,因此下面开始我们的改造完善工作。markdown中插入图片的语法如下:

![图片描述](图片链接)
![证件照](/zhengjianzhao.jpg)

首先,我们需要将个人照片上传到项目仓库中,在项目主页点击“Upload files”从本地上传一张照片,与“index.md”放在同一级目录。

接着对“index.md”文件进行编辑,我们希望将个人主要信息,如:姓名、地址、邮箱等主要信息和个人照片并排显示。但是这种格式在markdown语法中并不支持,庆幸的是,我们可以在md文件中编写html代码。这个该怎么实现呢?我们可以插入一个一行两列的表格,左边填入个人信息等文本数据,右边插入照片。具体代码如下:

<table border="0">
  <tr>
    <td width="75%">
      <h1>张三</h1>
      <p><b>硕士研究生</b></p>
      <p><b>××大学××学院</b></p>
      <p><b>邮箱:1234567789@qq.com</b></p>
      <p><b>地址:××市××区××路××号××大学,××楼,邮编×××</b></p>
    </td>
    <td width="25%">
      <img src="/zhengjianzhao.jpg" width="100%">      % 插入证件照代码
    </td>
  </tr>
</table>

这里有一个坑需要大家注意一下,所有html标签都要写成闭标签的形式,如:<p></p>的形式,本人开始没有写</p>标签,导致渲染出来的页面出现了乱码情况,花了很大时间排查。闭合标签也是一个良好的编码习惯。
效果如下所示:

除了中文主页外,我们也会建立英文主页,并且提供相互链接,在“index.md”也可以很方便的插入链接。在markdown中插入链接的语法如下:

[链接描述](url)
[英文版](index-en.md)

首先,我们需要建立英文版主页文件“index-en.md”,创建方法与上面编辑“index.md”类似。然后,我们将英文版链接放在个人主要信息的下面,即表格中,因此此时插入链接要采用html的语法格式

<a href="/index-en.html">英文版</a>

注意,此处我写的英文版链接是“/index-en.html”,可能大家会疑问明明没有“index-en.html”这个,这样写能链接到指定的英文主页吗?我的个人理解是“index-en.md”最终也是渲染成html文件了,所以能够通过.html访问到。至于为什么不写成“/index-en.md”,我也这么尝试过,但是访问到是md文本文件。最终的个人主页如下图所示:

GitHub自带的主题毕竟有限,如果想设计更加丰富炫酷的主页,还是需要用html代表编写。在这里提供一个将markdown文件转化成html文件的网站,http://mahua.jser.me/。将转好的html页面上传项目仓库,我们可以访问自己主题的个人主页。

总结

本文简单记录了GitHub上个人主页搭建流程,以及可能遇到的坑,关于整个项目的内容,大家可以在GitHub上进行fork

展开阅读全文

没有更多推荐了,返回首页