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

Xminyang

已于 2022-06-12 06:50:48 修改

阅读量4.5k

点赞数 12

分类专栏： GitHub 文章标签：搭建个人免费网站 Github Pages教程 GitHub.io

于 2022-06-11 22:41:46 首次发布

本文链接：https://blog.csdn.net/Xminyang/article/details/125239381

版权

GitHub 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

巨人半边莲
如果你曾征服乞力马扎罗山，留意过海拔 3,657-4,267 米处的尖顶植物，这种植物有时形似绿色大柱子（或‘花序’），从中间长出花序。那么你就可能看到许多巨人半边莲，这些植物生长在非洲最高山上。事实上，巨人半边莲是乞力马扎罗山上发现的唯一一种半边莲。
我们正俯身观赏这些植物，叶子密密麻麻，积满了水。这种植物的昵称是“杜松子酒半边莲”，叶子间的积水冰冻形成新月形冰块，故而得名——在你征服乞力马扎罗后，这种“冰块”可以给你的庆功酒增添不同的风味。

▚ 01 GitHub.io简介

在这里插入图片描述

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

个人网页：

项目：

文档：

丰富的index.html组织架构：

在这里插入图片描述

▚ 02 搭建GitHub.io

2.1 注册GitHub账号

输入GitHub网址：https://github.com/，然后逐步填写信息进行注册即可：

在这里插入图片描述

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的网址为：https://jekyllrb.com/

在这里插入图片描述

参考资料

在这里插入图片描述

Xminyang

关注

12
点赞
踩
41

收藏

觉得还不错? 一键收藏
1
评论
【GitHub.io/Github Pages使用教程】从头开始搭建自己的Github Pages，打造个人博客网站，展示个人简历、项目、文档或想要与世界共享的任何其他内容

【Github Pages使用教程】从头开始搭建自己的Github Pages，打造个人博客网站，展示个人简历、项目、文档或想要与世界共享的任何其他内容GitHub Pages：Websites for you and your projects. GitHub Pages 允许您将 GitHub 仓库转换为网站，展示您的简历、项目、文档或您想要与世界共享的任何其他内容。这里有创建github.io的教程，会使用git命令来上传文件至GitHub仓库，相对较为复杂些。......
复制链接

扫一扫