个人网站制作源码-在GitHub上搭建个人主页

最近,由于项目组的统一要求,在GitHub上搭建了一个个人主页,也就是简历页面。 过程中遇到了一些问题,所以记录下来分享给大家。

首先,您需要在GitHub上注册一个帐户。 注册账号的过程这里不再赘述。 注册账号并登录后,您将进入以下页面:

选择“Startaproject”或“Newrepository”创建新仓库,输入Repositoryname,格式为“username.github.io”或“username.github.com”,username为注册账号时的用户名,可写它在Description 中对仓库的描述。

然后点击“创建仓库”即可完成仓库的创建。 以后可以将代码上传到仓库。 我们的目的是建立一个个人主页,一般简单的html代码就可以满足。 更令人兴奋的是,GitHub 为我们提供了一系列的主题模板。 点击“设置”按钮,进入设置页面。

找到“GitHubPages”并单击“选择主题”。

我选择了第一个“Caymantheme”,大家可以根据自己的喜好来选择。

确定主题后,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 是一种标记语言。 通过简单的标记句型,可以使普通的文本内容具有一定的格式。 就像写论文一样,我们首先要确定个人主页要展示的主要内容。 我选择显示以下信息:“个人信息、最新动态、研究方向、荣誉奖项、项目研究”。

“###Content”是markdown标题格式,“#”代表一级标题,这样“###”代表第五级标题。 确定标题后,填写各个类别中的内容即可完成个人主页的编辑。

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

至此,我们就已经完成了一个简单的个人主页的搭建,通过它我们就可以访问我们的个人主页了。 “bdhehohai”对应于您的用户名。

里面的个人主页也太简单了。 一般在制作简历的时候,我们会把主要的个人信息和个人生活照片/护照照片放在最上面,所以我们会在下面开始我们的重建工作。 markdown中插入图片的句型如下:

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

首先,我们需要上传一张个人照片到项目仓库,在项目首页点击“Uploadfiles”将照片上传到本地,并放在与“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它。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 网站源码 个人网站制作源码-在GitHub上搭建个人主页 https://www.wkzy.net/game/167147.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务