devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：我家自动化 | 2024-04-15 03:28:42

赞

踩

github.io

在这里插入图片描述

  • 巨人半边莲
    如果你曾征服乞力马扎罗山，留意过海拔 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账号

在这里插入图片描述


.

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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

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 直接输入网址

在这里插入图片描述



在这里插入图片描述



▚ 04 拓展学习

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

在这里插入图片描述


在这里插入图片描述


参考资料




在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/425600
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号