Github Pages 体验使用教程

2022年05月14日 阅读数:4
这篇文章主要向大家介绍Github Pages 体验使用教程,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。


Github与Github Pages

从微信小程序教程里面摘录的github pages 零基础入门css

​https://tencentcloudbase.github.io/handbook/webpage/01.html​html


相信很多人都据说过“开源”,在程序员的世界里,有很是多优秀的人愿意把本身辛苦辛苦写的代码开放给全部的人使用,咱们写代码就能够站在前人的肩膀上,这样就大大下降了写代码的难度。而这些开源代码大多数都放在一个叫Github的网站上。前端

Github几乎是全部程序员都要求会使用的网站,它是世界上最大的开源代码共享平台,在这里你能够下载到世界上最优秀的程序员们开源出来的软件以及版本的更新信息,它就像是少林寺的藏经阁同样,揽尽江湖之上的至高武学。git

  • 一个操做系统能够开源(好比Liunx);
  • 一个软件也能够开源(好比咱们推荐的VS Code编辑器);
  • 一个建站系统能够开源(好比世界上最流行的建站系统Wordpress);
  • 网页的UI框架(好比这几天会学到的Bootstrap)或前端框架(好比前端开发工程师最流行的三大框架Vue、React、Angularjs);
  • 人工智能学习系统TensorFlow;

能够说Github上面的资料是很是的丰富,咱们能够像关注知乎或微博里面的大V同样,来关注Github上的优秀的项目,这对咱们学习技术很是有帮助~~程序员

注册一个Github帐号github

打开​​Github官网​​​ ,​​在这里​​ 注册Github帐户.web

第一步:Set up a personal account注册一个我的帐户填写英文用户名Username、邮箱Email Address、帐户密码Password,填完后点击注册帐号Create an account小程序

第二步:Choose your plan 选择你的计划,在这里咱们能够直接选择继续Continue微信小程序

第三步:Tailor your experience 量体裁衣,填写你的经验,在这里咱们能够直接提交Sumit浏览器

这样你的Github帐号就注册好了。

在Github上咱们不只能够浏览到大量优秀的代码,并且你也能够把本身的代码上传到Github上面,分享给其余的人。如今程序员招聘都会要求附加上你的Github地址,来检查你的代码水平。Github还有不少有趣而实用的功能,等着你来探索学习~~

在电脑上写的网页项目怎样才能让其余人用浏览器打开呢?但你又不想花钱买服务器、虚拟机、域名,那你可使用Github Pages。经过Github可让你的网页项目一键生成一个静态小网站。​​Github与Github Pages使用教程​

下载Github桌面工具

打开​​Github桌面工具的下载页面​​,而后点击下载Github桌面端工具Download GitHub Desktop,并安装。

Github的桌面工具好像不大支持Windows XP等比较老旧的操做系统,若是能够更新一下操做系统,若是系统无法更新,那只能不用桌面工具,须要你们学习一下Git命令行的相关知识了。

新建代码仓库并复制文件夹到代码仓库里面

打开Github桌面端工具,而后用Github的帐号登录该软件。而后新建一个代码仓库new repositories,名称为自定义英文名,路径为本地电脑的硬盘。这样你的代码仓库就建好了。 找到该代码仓库在电脑里面的位置,而后将前几步写好的项目文件夹复制到该路径。

上传代码仓库到Github

当你复制完文件到代码仓库里面以后,Github的桌面工具会有显示,在Commit and Sync master部分备注提交的理由,好比Summary和Description里面输入更新了哪些文件,好比Summary里面输入”上传主体文件”,Description里面输入”新增index.html文件、css、js、img文件夹”,而后点击Commit and Sync master提交和同步代码,会弹出一个对话框,你能够在描述Description里添加该代码仓库的中英文介绍,好比”HackWork网页开发任务完成状况”,而后点击Publish,你的代码仓库就上传到了Github上面了。

在Github上面找到你上传的代码仓库

打开Github官网,在首页右下角你的项目Your repositories能够看到你新上传的代码仓库,你也能够点击右上角你的头像那里下拉选择你的资料Your Profile,在你的我的资料页面也能够找到该代码仓库,而后点击进入该代码仓库。

将你的项目添加到Github Pages

在该代码仓库的页面,找到Settings设置,进入设置页面,找到GitHub Pages下面的Source,将None,修改为为master branch,而后保存Save,提交后会出现一段说明, Your site is published at…,后面的连接就是你的代码仓库的连接,打开它便可访问了。

若是你以前没有了解过Github或Github Pages,除了下载Github Desktop以外,还推荐下载​​Sourcetree​​,它和Github Desktop本质是相同的,你们能够自行百度这两个软件的使用教程,对Git以及Github有所了解了以后,以后咱们会有专门的课程要求你们会使用Git命令行。

找一个你以为设计得很好看的网站好比​​微信Mac官方网页​​,复制下来,而后把你复制的网页上传到Github Pages上分享给你们,研究一下你复制的网页与原网页有什么不一样