最近由于项目组的统一要求,在GitHub上搭建了一个个人主页,也就是简历页面。过程中遇到了一些问题,记录下来分享给大家。
首先,你需要在 GitHub 上注册一个账号。注册账号的过程这里不再赘述。注册账号并登录后,会进入如下页面:
选择“Start a project”或“New repository”创建新仓库,输入Repository名称,格式为“username.github.io”或“username.github.com”,username为注册账号时的用户名, Description 这里可以写仓库的描述。
然后点击“Create repository”完成repository的创建。之后,您可以将代码上传到仓库。我们的目标是建立一个个人主页,通常一个简单的html代码就足够了。更令人兴奋的是,GitHub 为我们提供了一系列的主题模板。点击“设置”按钮,进入设置页面。
找到“GitHub Pages”并点击“选择主题”。
我选择了第一个“开曼主题”,大家可以根据自己的喜好来选择。
确定好主题后,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 是一种标记语言。通过简单的标记语法如何申请个人主页,可以使普通的文本内容具有一定的格式。就像写论文一样,首先要确定个人主页要展示的主要内容。我选择显示以下信息:“个人信息、最新动态、研究方向、荣誉奖项、项目研究”。
"### content"是markdown的标题格式,一个"#"代表一级标题,以此类推,"###"代表三级标题。确定标题后,在每个分类中填写内容,完成个人主页的编辑。
然后点击“Commit changes”完成提交。可以看到我们个人主页的内容和格式如下:
至此,我们就完成了一个简单的个人主页的搭建,通过它我们就可以访问到我们的个人主页了。“bdhehohai”对应每个人的用户名。
上面的个人主页也太简单了。通常在制作简历的时候,我们会将主要的个人信息和个人生活照/证件照放在最前面,那么下面开始我们的改造和完善工作吧。markdown中插入图片的语法如下:
![图片描述](图片链接)
![证件照](/zhengjianzhao.jpg)
首先,我们需要上传一张个人照片到项目仓库,点击项目首页的“上传文件”,将照片上传到本地,与“index.md”放在同一目录下。
然后编辑“index.md”文件。我们希望并排显示主要的个人信息如何申请个人主页,例如姓名、地址、电子邮件地址和个人照片。但是markdown语法不支持这种格式,幸好我们可以在md文件中写html代码。如何实现?我们可以插入一个一行两列的表格,左边填写个人信息等文本数据,右边插入照片。具体代码如下:
张三
硕士研究生
××大学××学院
邮箱:1234567789@qq.com
地址:××市××区××路××号××大学,××楼,邮编×××
% 插入证件照代码
这里有个坑需要注意。所有的html标签都必须写成闭合标签的形式,比如:形式是:我一开始没写
标签,导致渲染出来的页面出现乱码,查了很久。结束标签也是一种很好的编码习惯。
效果如下:
除了中文主页外,我们还将建设英文主页,并提供相互链接,您可以在“index.md”中轻松插入链接。在markdown中插入链接的语法如下:
[链接描述](url)
[英文版](index-en.md)
首先,我们需要创建英文版的首页文件“index-en.md”,创建方法与上面编辑“index.md”类似。然后,我们把英文版的链接放在个人主要信息的下面,也就是表格里,所以这个时候要用html的语法格式来插入链接
英文版
注意我这里写的英文版链接是“/index-en.html”。您可能想知道是否没有“index-en.html”这样的东西。这个链接能链接到指定的英文主页吗?我个人的理解是“index-en.md”最终被渲染成一个html文件,所以可以通过.html访问。至于为什么不写成“/index-en.md”,这个我也试过了,但是访问的是一个md文本文件。最终的个人主页如下图所示:
毕竟 GitHub 自带的主题是有限的。想要设计出更丰富炫酷的主页,还是需要用html来表示。这里提供一个将markdown文件转换成html文件的网站。将转换后的html页面上传到项目仓库,我们就可以访问我们主题的个人主页了。
本文简单记录一下在GitHub上搭建个人主页的过程,以及可能遇到的坑。关于整个项目的内容,大家可以在GitHub上fork一下。