逐浪云主机

立即开通

用github部署静态网页-创建您github主页与博客网站

作者:本站编辑 发布时间:2018-03-31 来源:佚名 点击数:

一、Github Pages的使用
1、首先你得有一个Github账号,没有的话去github.com注册一个;
20160518152351480.png

点击Sign up for Github进入注册页面
20160518152425543.png


2、有了账号以后登录到Github新建仓库
(1)点击New repository新建仓库
1.png


(2)这里只需要注意一点Repository name要用Owner加上 .github.io然后点击create repository
2.png
(3)到这里仓库就新建好了
3.png

二、把源码上传到github仓库
1、clone到本地
(1)选择一个目录输入下面的指令
Git clone https://github.com/Wangyj1108/Wangyj1108.github.io.git
4.png
注意:如果你的电脑不支持git命令你可以安装git,去git官网下载一个git到本地安装
安装完成以后配置环境变量然后打开命令行输入git命令查看是否安装成功 


2、clone到本地以后会在你选择的目录下生成一个Wangyj1108.github.io文件夹
5.png
进入到文件下,把你的代码放进去
6.png

3、打开命令行进入到Wangyj1108.github.io目录下依次执行下面的命令
git add .
git commit -m “上传网站源码到github”
7.png
git push 并输入账号密码(github账号密码)
8.png



4、等待代码上传完成后你就可以访问http://Wangyj1108.github.io
三、买域名解析到github
1、去域名服务商买一个合适的域名,便宜的就几块钱;
2、将域名解析到ip地址,你可以使用 ping http://Wangyj1108.github.io去查看IP
进入到万网的控制台选择云解析
添加下面2条记录就可以了
9.png
到你这里你去访问你的域名会报404
还差一个CNAME文件,这个文件需要提交到我们刚才创建的仓库,内容为我们的域名
11.png
提交完就可以访问我们的域名了
12.png



我是上传的是我从网上下载的一个表白网站的源码,可以直接下载,上传试试。




Windows下配置Git环境变量:

1、从Git官网下载windows版本的git:http://git-scm.com/downloads

2、一般使用默认设置即可:一路next,git安装完毕!

3、但是如果这时你打开windows的cmd,在里面打git命令会提示“不是内部或外部命令,也不是可运行的程序”,想要直接在windows的cmd里使用git命令要多加如下两步

3.1、找到git安装路径中bin的位置,如:D:\Program Files\Git\bin

        找到git安装路径中cmd的位置,如:D:\Program Files\Git\cmd;

        注:"D:\Program Files\Git\"是安装路径,可能与你的安装路径不一样,要按照你自己的路径替换"D:\Program Files\Git\"

3.2、右键“计算机”->“属性”->“高级系统设置”->“环境变量”->在下方的“系统变量”中找到“path”->选中“path”并选择“编辑”->将3.1种找到的bin和git-core路径复制到其中->保存并退出

        注:“path”中,每个路径之间要以英文输入状态下的分号——“;”作为间隔


现在就可以在cmd里尽情的使用git了~

 






用 GitHub 来部署静态网页 ꒰・◡・๑꒱这个教程主要适用于直接创建仓库。想从github上直接上手的同学可以参照以上教程部署静态网页。

我想分享给大家的是,如何将已经创建了仓库并且有master分支的项目部署为静态网页。

自动生成页面

1、点击settings

这里写图片描述

自动生成页面
仓库名和访问二级域名一致。
这里写图片描述
跳转到这个页面,直接忽视,点击最后面的按钮。
这里写图片描述
这里写图片描述
随意选择,提交。
这里写图片描述
现在我们已经生成了gh-pages分支。
这里写图片描述
gh-pages分支内容。
这里写图片描述

* 本地向分支推送代码*
进入目标文件夹
这里写图片描述

查看分支

$ git branch1

这里写图片描述
只有master一个分支,因为我们刚刚是在远程仓库创建的分支,现在在本地创建同名分支gh-pages

$ git branch gh-pages1

这里写图片描述
我们还在master分支上,现在切换分支

$ git checkout gh-pages1

这里写图片描述
完美切换,现在向本地分支提交代码
这里写图片描述
向远程仓库推送代码

$ git push origin gh-pages12

一定要指明推送分支的名称!!!!
这里写图片描述
很明显有冲突,pull回来,pull回来也要指明推送分支的名称!!!!

$ git pull origin gh-pages12

这里写图片描述
解决冲突,重新提交,还是要add
这里写图片描述
再次push
这里写图片描述
完美!
看看github上什么情况了。
这里写图片描述
完美!需要演示的静态文件都在gh-pages分支上了。现在来访问一下。还记得演示地址是多少吗?嘻嘻
在settings里看
这里写图片描述
去看看吧!这个是一个移动web应用,嘿嘿我的静态网站

同样的,我们也可以通过这种方式部署自己的静态blog。么么哒,比起coding,github自由多了。
比起blog论坛,自己设计blog更自由!!!哎,最近太忙···空了我也倒腾一个超炫的blog.( > 3 < )

!!!补充
更新代码时出了点小状况,切换到gh-pages分支后,git add .,git commit -am 'update’打开本地文件,发现还是之前的文件(因为我有新建文件,一眼就可以看出没有变化)···我也不太清楚为啥··后来手动拷贝了一份到分支文件夹下,才继续了版本更新···


本文责任编辑: 加入会员收藏夹 点此参与评论>>
复制本网址-发给QQ/微信上的朋友