转载自:http://www.cnblogs.com/lijiayi/p/githubpages.html

学了前端小半年,如今写了个自己的网页想要去应聘,却发现部署很麻烦,部署到阿里云之类,买域名啊啥的还要收费,说贵也不贵,但我就是傲娇~

google一下了解到Github有一个Github pages的功能可以搭建博客或者托管网页,而且免费耶,搜了下教程,猛地一看感觉步骤也不是很麻烦,所以就用这个了!

教程一大堆,却没有几个能看懂的,问题一:90%的都在讲解如何搭建博客,和我想要将自己的网页部署到上面还是有点区别的。问题二:所有的教程都用到了Git,而我只知道Git是一个开源的分布式版本控制系统。完全不知道命令行是什么鬼,只能照猫画虎的小白来说,那些教程只能帮我到桥头,但想要成功过河,还需要深夜里的一包特浓咖啡。

开始教程之前的准备工作:

1、需要你自己写的网页文件。

2、注册Github。

3、下载安装git。下载地址https://git-scm.com/downloads

教程开始:(以下出现的test指你的网页名或者你想起的一切名字)

步骤一:登录到Github上,新建一个repo,命名为test,勾选 initialize this repository with a README,点击create repository。

步骤二:打开settings,有一个Github Pages 的设置,点击Launch automatic page generator(启动自动页面生成器)。

步骤三:点击页面最后的continue to layouts,然后就可以进入设置你的页面主题,你会说这不是我的网页呀,别急嘛,先选择一个主题,点击 publish pages。

这个时候会出现你的网页的网址,也就是下图的 http://jiayili.github.io/test.复制打开这个网址,你看到了什么?

哇塞,这不是刚自己设置选择的主题页面吗?

好了,别激动了,真正让一个小白你发疯的阶段开始了,有了自己的网址,但页面显示的是什么鬼?

至此以上,github上要处理的操作告一段落,该上Git了!

步骤四 :打开此电脑,选择一个盘,比如 f 盘,右键空白处点击 git bash here。

步骤五:输入如下命令,用来在 f 盘创建 test 文件放你的github上的test repository,克隆test repository到 test 文件中。

这个时候你的 f 盘,就会多一个 test 文件,打开它,

会看到一个 README.md 的文件,这个文件是从哪来的呢?追溯到gihub上,你会发现你有两个分支(branches),而 README 文件是来自 master 分支。

而我们需要编辑的是另一个分支——gh-pages,因为这个分支才能够真正定义github pages的内容和样式,也就是可以呈现你网页的地方。

步骤六:输入以下命令,为了在本地新建一个gh-pages分支,而这个分支是远程分支origin/gh-pages的镜像,也就是我们可以在本地的gh-pages看到github上的gh-pages的内容。

这个时候我们再打开 f 盘,发现变样了

刚才还是README呢,怎们现在成了3个文件了,这3个文件来自哪?

来自github 上的 gh-pages 分支下的文件。

打开f 盘中的 index.html,你会发现就是咱们一开始选择主题的页面。那我们将这个页面替换成自己coding的网页不就好了?

步骤七:执行如下命令,删除原有的gh-pages文件,并提交(commit)本次修改。

这个时候 f 盘没有文件。

步骤八:将自己的网页文件复制粘贴至 f 盘的 test 文件中

输入如下命令,为了本地gh-pages中的网页文件同步到远程的gh-pages中。

输入最后一行 git push origin gh-pages,按回车,等一会,会有弹出框让你输入你的 github 账号和密码。

ok之后耐心等待。

当出现像下图中的命令行之后,你已经完成了99%。

最后一步:打开浏览器输入给你的网址加上 test.html,然后重重的按下回车。

恭喜你,成功了!!!哦不,还差一步,不评论关注一下我?

附录一:常用git命令:

$ git clone  //本地如果无远程代码,先做这步,不然就忽略

$ cd //定位到你blog的目录下

$ git status //查看本地自己修改了多少文件

$ git add . //添加远程不存在的git文件

$ git commit  -m "what I want told to someone" //提交修改

$ git push  //更新到远程服务器上

$ git rm //移除文件

附录二:如何修改你的网页?

方法一:在github上的gh-pages分支中直接进行修改。(如果不添加新的文件推荐此法)

方法二:在github客户端进行修改在同步。(如果添加了新的文集推荐此法)

转载于:https://www.cnblogs.com/ztoz/p/5515475.html

在github中使用pages上传自己的网页相关推荐

  1. “Hello,Github!——如何配置并上传一个已有项目到Git上

    "Hello,Github!"--如何配置并上传一个已有项目到Git上           注意!前言十分简短!      如今,Github已经成为了管理软件开发以及发现别人优秀 ...

  2. (新手版)GitHub 使用思想,上传,首次上传及日常使用教程(肯定看得懂)

    此这篇面向还不熟悉Git的新手同学 1:关于下载配置等问题 2:GitHub使用思想 3:首次上传的准备工作 4:上传 1:关于下载配置等问题 若Github还未成功安装和配置 可以移步至 (新手版) ...

  3. 在vue中使用wangEditor上传视频

    一.效果展示 实现效果 原本效果 二.修改wangEditor源码 添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...

  4. Gitee+typora+picgo+插件,markdown图床配置,一键将markdown中本地图片上传至图床

    一键将markdown中本地图片上传至图床 推荐配置:Gitee+typora+picgo+插件 文章目录 安装 picgo 配置 typora 配置 Gitee 图床 配置图床设置 配置 typor ...

  5. FTP协议中的登录 上传 下载 新建目录 删除目录 的wireshark包分析(一文看完TCP包分析,附源文件,ppt,操作视频)

    ​​​​​​​目录 一原理 二.FTP登录 三.FTP下载 四.FTP上传 五.FTP新建目录 六.FTP删除目录 一原理 前言:TCP/IP四层模型和OSI模型对照,以及FTP在模型中的位置. • ...

  6. 详细阐述Web开发中的图片上传问题

    Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...

  7. 极客日报第 66 期:人人影视字幕组因侵权被查;GitHub 评论区支持上传视频;拼多多将春节红包加至 28 亿;任正非就注册姚安娜商标事件道歉

    文章目录 一.互联网快讯 二.程序员专属 三.Github 每日精选 四.CSDN 社区优质博文精选 一.互联网快讯 1.用户起诉腾讯,深圳南山法院一审判决认定:微信好友关系不属于个人隐私 2 月 3 ...

  8. 极客日报:人人影视字幕组因侵权被查;GitHub 评论区支持上传视频;

    一.互联网快讯 1.用户起诉腾讯,深圳南山法院一审判决认定:微信好友关系不属于个人隐私 2 月 3 日消息,1 月 22 日,深圳市南山区人民法院在审理一起用户起诉腾讯的侵权责任纠纷案时作出判决,明确 ...

  9. Java中使用FTPClient上传下载

    转自:http://blog.csdn.net/hbcui1984/article/details/2720204 在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文 ...

最新文章

  1. Java中常量定义的几种方式
  2. Python 为什么要保留显式的 self ?
  3. java 监听队列_spring+activemq实战之配置监听多队列实现不同队列消息消费
  4. oracle中rac是什么意思,Oracle中HA、RAC、Datagurad区别
  5. Delphi 7.0常用函数速查手册
  6. linux退出 putty_linux – 在一个命令中退出所有SSH连接并关闭PuTTY
  7. 常用模块之 time,datetime,random,os,sys
  8. 图解算法学习笔记(八):贪婪算法
  9. plsqlnbsp;分页
  10. java reverse_Java Integer类reverse()方法与示例
  11. Java中操作Excel的3种方法,太好用了!
  12. 【leetcode】416. Partition Equal Subset Sum
  13. 数值范围_涉及数值范围的答复及撰写建议
  14. 大数据智能运维平台方案-1
  15. 职业经理人的团队管理
  16. 白话ES 的分布式架构原理
  17. 中文论文检索证明怎么开_SCI论文检索后收录证明怎么开?
  18. linux内核下载 ok6410,手把手教你移植linux内核---------OK6410(一)
  19. 2021-10-07 浊音,清音,爆破音频谱分析
  20. iphone编程资源站

热门文章

  1. Flash基本工具练习
  2. Web文件管理器 elfinder-彩龙社区
  3. vue-cli项目中.postcssrc.js
  4. [pytorch、学习] - 3.5 图像分类数据集
  5. python学习笔记第9天《文件的管理办法》
  6. java 正则表达式验证邮箱格式是否合规 以及 正则表达式元字符
  7. ssh服务端口转发详解
  8. java中GET方式提交和POST方式提交
  9. 键盘流的逆袭- Idea 中使用 VIM mode 提高生成效率
  10. sharepoint 2013 个人站点母版