【前端技术】从零开始在github创建个人主页或技术博客

@


闲在家里,打算出一个前端系列的技术博客,讲一下自己学习网站搭建、HTML、CSS、Javascript、Django等的学习经历。
对于新手来说,在github搭建免费的个人主页,不失为一个很好的练手方法,以下将记录我在很久以前在github搭建个人博客的经历。

1、注册github账号

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。
Github官网:https://github.com/
这里不过多描述如何注册github账号,但是建议注册账号的时候,账号名最好使用简单易记的英文小写字母,最好是自己的姓名拼音。

2、创建个人主页专属仓库

登录github,进入个人的Repositories,如下图:
在这里插入图片描述点击绿色的[New]按钮,新建一个Repositories,需要注意的是,这个仓库有固定的命名格式username.github.io,这里username就是你注册的github账号名,例如我的github账号是scutcyr,那么我创建的个人主页专属仓库名就是scutcyr.github.io
【参考】我的个人主页专属仓库:https://github.com/scutcyr/scutcyr.github.io

3、了解主页框架css代码并下载

有很多关于在github搭建个人主页的博客,但是
大部分都是基于markdown的。本文主要是针对希望使用html、css、javascript学习搭建网站的同学。因此,为了让大家快速体验使用html、css、javascript搭建网站的乐趣,建议大家先直接利用现成的css文件和html模板,如下图所示,文件见链接: https://github.com/scutcyr/build_your_homepage/tree/master/css
你可以从这里快速下载:https://github.com/scutcyr/build_your_homepage/archive/master.zip,解压后,可以看到一个css文件夹,以及一个index.html模板。
在这里插入图片描述

3、修改index.html文件

这里假设你通过https://github.com/scutcyr/build_your_homepage/archive/master.zip下载了模板代码。解压后,如下图所示:
在这里插入图片描述解压后,是一个build_your_homepage文件夹,在里面,包含一个css文件夹以及一个index.html模板。
你只需要使用sublimetext或者VSCode打开index.html文件修改。
在这里插入图片描述

4、把修改好的index.html文件连同css文件夹上传到你的username.github.io

登录github,进入你的username.github.io仓库根目录下,点击Upload files按钮,如下图所示:
在这里插入图片描述
适当缩小浏览器页面,然后把css文件夹以及修改好的index.html拖到上传页面,如下图所示
在这里插入图片描述上传文件完毕后,点击网页下方的绿色按钮Commit changes

5、检验你的成果

打开链接https://username.github.io,查看你的主页是否成功显示!这里可能需要等一两分钟,或者适当刷新页面!
以下是我修改好的个人主页,详情:http://yirongchen.com/
在这里插入图片描述

posted @ 2022-06-04 18:02  华工陈艺荣  阅读(1115)  评论(0编辑  收藏  举报