在github中使用pages上传自己的网页

转载自: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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271766.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用lamba中stream 进行分组统计

对一个list中的元素进行分组&#xff0c;并统计各个元素出现的次数。放入map<String,Long>。 代码如下: Test public void test8() {List<String> items Arrays.asList("1", "2", "3","4", "1", "3"…

php 表单select,表单控件select标签是如何使用的

表单控件select标签是用来创建下拉列表的&#xff0c;通过标签来定义可用选项以及其他属性来设置表单控件的选择个数等。今天将介绍的是HTML中的表单控件select的用法&#xff0c;具有一定的参考价值&#xff0c;希望对大家有所帮助。【推荐课程&#xff1a;HTML教程】select标…

电脑经常死机是什么原因?如何解决?

目录 一、电脑经常死机是什么原因&#xff1f; 二、电脑经常死机如何解决&#xff1f; ​​​​​​​ 一、电脑经常死机是什么原因&#xff1f; 1、电脑频繁死机&#xff0c;在进行CMOS设置时也会出现死机现象&#xff0c;一般由硬件问题引起的&#xff0c;散热不良…

重量级框架

1.概述 重量级框架则强调高可伸缩性&#xff0c;适合与开发大型企业应用。轻量级框架侧重于减小开发的复杂度&#xff0c;相应的它的处理能力便有所减弱&#xff08;如事务功能弱、不具备分布式处理能力&#xff09;&#xff0c;比较适用于开发中小型企业应用。轻量级框架和重量…

Win10磁盘占用达到100%,优化一下就解决了

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

2、IDEA以新窗口的形式打开多个项目

IDEA以新窗口的形式打开多个项目 修改1处如图所示

160523、Oracle建立表空间和用户

建立表空间和用户的步骤&#xff1a; 用户 建立&#xff1a;create user 用户名 identified by "密码"; 授权&#xff1a;grant create session to 用户名; grant create table to 用户名; grant create tablespace to 用户名; …

Win10 该如何设置FTP呢,详细设置步骤

复印&#xff0c;打印&#xff0c;扫描的日常操作是每个办公人员的必备技能&#xff0c;我们来了解一下扫描至FTP的具体操作方法。 要使用FTP功能扫描文件到电脑&#xff0c;首先要需要一台可以接收文件的FTP服务器&#xff0c;这个服务器我们可以借助第三方软件搭建&#xff0…

数值的加减会改变python中id,在python中调用Nan值并更改为数字

ix已弃用&#xff0c;请不要使用它。在选项1我会用np.where-df df.assign(pronp.where(df.pro.isnull(), df.property_type, df.pro))dfid property_type1 property_type pro0 1 Condominium 2 2.01 2 Farm 14 14.02 3 House 7 7.03 4 Lots/Land 15 15.04 5 Mobile/Manufactur…

Linux和Windows操作系统有什么区别?

目录 1、Linux系统的优缺点 2、Linux系统与Windows系统的区别 在所有操作系统中&#xff0c;Windows系统属于最多用户使用的操作系统&#xff0c;而这一次小编要来跟大家聊聊Linux系统&#xff0c;目前很多笔记本也已经开始预装Linux系统了。那么Linux系统有什么优缺点呢&#…

idea自动生成not null判断语句

自动生成not null这种if判断&#xff0c;在IDEA里有很多种办法&#xff0c;其中一种办法你可能没想到。 直接输入notnull并回车&#xff0c;IDEA就好自动生成if判断了

C#三层开发做学生管理系统

1.定义各个层 2.添加各个层之间的引用 DAL 层调用Model BLL层调用DAL和Model UI层调用BLL和Model层 Model层供各个层调用 3.根据数据库建立实体类,每张表对应一个实体类 4.在DAL层调用MyTool类和SQLhelper类,添加system.Configuration 引用 并编写app.config 在SqlHelper类调用…

硬件:选购CPU和显卡需了解的参数介绍

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

PHP解决http和https跨域,php中http与https跨域共享session的解决方法

这篇文章主要介绍了http与https跨域共享session的解决方法,需要的朋友可以参考下遇到了HTTP、HTTPS协议下session共享解决cookie失效的问题&#xff0c;这里提供一个临时解决办法。实现原理&#xff1a;把session id设置到本地的cookie。如下&#xff1a;复制代码 代码如下:$cu…

SDUT 3258 Square Number 简单数学

和上一题一样&#xff0c;把平方因子除去&#xff0c;然后对应的数就变成固定的 #include <cstdio> #include <iostream> #include <algorithm> #include <cstring> using namespace std; typedef long long LL; const int N1e65; const int INF0x3f3f…

RedisTemplate中opsForValue()中的方法

使用redisTemplate.opsForValue().set(); 先引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-redis</artifactId> </dependency> 注入redisTemplate redisTempla操作String类…

硬件:U盘无法识别的解决方案

USB接口我们一定不会陌生&#xff0c;键盘、鼠标、U盘、移动硬盘等等硬件都需要通过USB接口连接到电脑。尤其是U盘&#xff0c;几乎成为我们商务办公必不可少的工具&#xff0c;各种重要资料和软件都会通过U盘进行传输。但是如果遇到U盘无法识别的情况要怎么办呢?接下来快启动…

泰山服务器 oracle数据库,泰山之巅对话•Oracle数据库掌门人:领先对手10年?凭什么口气这么大?...

在采访中&#xff0c;Andrew透露&#xff0c;目前Oracle数据库的一个重点研发方向&#xff0c;是基于NVRAM技术重新定义数据库架构&#xff0c;支持数据库直接放在NVRAM里的架构。他认为&#xff0c;去年Intel发布的NVRAM是一项颠覆性的技术&#xff0c;这意味着&#xff0c;以…

Linux的inode的理解

http://www.cnblogs.com/itech/archive/2012/05/15/2502284.html转载于:https://www.cnblogs.com/zengkefu/p/5529576.html

redisTemplate.opsForHash()

Hash类型 Redis hash 是一个string类型的field和value的映射表&#xff0c;hash特别适合用于存储对象。 Redis 中每个 hash 可以存储 2^32 - 1 键值对&#xff08;40多亿&#xff09;。 Map以map集合的形式添加键值对 <String, String> maps new HashMap(); maps.put(…