失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages 打造个人博客

【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages 打造个人博客

时间:2024-07-16 01:59:56

相关推荐

【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages 打造个人博客

巨人半边莲

如果你曾征服乞力马扎罗山,留意过海拔 3,657-4,267 米处的尖顶植物,这种植物有时形似绿色大柱子(或‘花序’),从中间长出花序。 那么你就可能看到许多巨人半边莲,这些植物生长在非洲最高山上。 事实上,巨人半边莲是乞力马扎罗山上发现的唯一一种半边莲。

我们正俯身观赏这些植物,叶子密密麻麻,积满了水。 这种植物的昵称是“杜松子酒半边莲”,叶子间的积水冰冻形成新月形冰块,故而得名——在你征服乞力马扎罗后,这种“冰块”可以给你的庆功酒增添不同的风味。

▚ 01 GitHub.io简介

GitHub Pages:/,Websites for you and your projects. GitHub Pages 允许您将 GitHub 仓库转换为网站,展示您的简历、项目、文档或您想要与世界共享的任何其他内容。访问 可以了解更多信息。这里有创建github.io的教程,会使用git命令来上传文件至GitHub仓库,相对较为复杂些;本文教程则更为简单,直接在GitHub仓库内选取本地已编译好的index.html即可,更为适合新手入门Github.io。总之在GitHub Pages搭建自己的个人网页,一切内容设计由自己定夺,这里将是你开疆扩土的前沿阵地。

个人网页:

项目:

文档:

丰富的index.html组织架构:

▚ 02 搭建GitHub.io

2.1 注册GitHub账号

输入GitHub网址:/,然后逐步填写信息进行注册即可:

.

2.2 创建特殊的github.io仓库

1️⃣进入个人的GitHub账号后,选择右上角的+来创建新的仓库New repository

2️⃣仓库名字的设定很关键,前缀与用户名相同,后缀为.github.io,其他选项默认即可:

3️⃣最后,选择最下方的创建仓库Create repository就可完成创建:

2.3 自定义主题

1️⃣依次选择如下图的步骤:

2️⃣然后,会生成一个_config.yml文件:

2.4 上传测试的index.html文件

2.4.1 编写index.html文件

在本地计算机上编辑index.html文件,内容如下:

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><div id="test">Hello world. <br />This is my first website.</div></body></html>

2.4.2 上传index.html文件至GitHub

1️⃣进入hcysky/hcysky.github.io仓库后,依次选择Add file → Upload files

2️⃣选择本地计算机的index.html,并提交Commit changes即可: 3️⃣最后该仓库内容如下:

▚ 03 在线验证

介绍两者打开方式。

3.1 从GitHub Pages页面打开

依次选择下图所示步骤即可:

3.3 直接输入网址

打开浏览器后,输入地址https://hcysky.github.io/,即可显示HTML格式的内容:

▚ 04 拓展学习

Jekyll将您的纯文本转换为静态网站和博客Transform your plain text into static websites and blogs。Jekyll的网址为:/

参考资料

GitHub Pages: Websites for you and your projectsWhat is GitHub Pages? - YouTubeJekyll: Transform your plain text into static websites and blogs

【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages 打造个人博客网站 展示个人简历 项目 文档或想要与世界共享的任何其他内容

如果觉得《【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages 打造个人博客》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。