本文固定链接http://blog.csdn.net/pspgbhu/article/details/51205264

本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建网站的方法,发现不是要收费就是很麻烦。终于黄天不负有心人,让我找见了github pages,不但免费,还非常的方便!!

在这里我就来分享给大家,同时也希望像我一样的前端新人不用再走弯路了。

1.首先你要有你写好的网页文件


2.需要去GitHub注册一个账号

进入链接https://github.com/  页面右上角点击sign up 进入注册页面开始注册。

填写完用户名、邮箱、密码后,点击下面的Create an account完成注册。


3.在github创建一个个人网站

登陆你的github账号,然后点击网页右上角的加号 然后点击New repository

输入你的repository name ,然后将下面的小勾勾上,之后就可以点下面的绿色创建啦

在仓库中打开sitting

在sitting下点击launch automatic page generator按钮。之后再点击右下角绿色的continue to layouts

进入到样式选择界面,随便选一个就行,然后点击 publish page,对后面没有影响,毕竟我们是要上传自己的网页的。

完了之后网页会自动跳回我们仓库的界面,这时候我们再点sitting,在下头能看到一个链接,这个就是我们成功创建的网站,当然这个还不是我们自己想要的那个网站。

4.下载github for Windows

因为官网上下载实在龟速,这里我给大家贴一个离线包地址,解压就能用http://download.csdn.net/download/lyg468088/8723039,或者可以自行百度“github for Windows离线安装包”。

解压之后运行github.exe,然后登陆自己的github账号,登陆之后点击左上角加号选择clone,然后选择自己账户下面自己之前创建的那个仓库,之后点击最下面的确认,确认完成后同时选择自己要克隆到的路径,我是选择在了e盘下github文件夹内。

完成后在github桌面版上点击master,并将其切换至gh-pages

完成之后我们在我的电脑中打开之前clone仓库的相应地址,应该看到的是这样的

将他们全部删除,然后将我们自己之前制作的网页文件全部复制进去。

在回到之前的github桌面版,会发现仓库里产生了变化,如果没有变可以点一下左边自己仓库下面的 tutorial然后再点回来,再不行就退出重进。产生了变化之后在下面的summary给自己的项目随便起个名字,之后发现下面的 commit to gh-pages可以点击了,点击之。

点击完后,稍等片刻,上面显示0 changes时 点击客户端右上角Sync进行同步。

过一会同步完成后可以登录网页版看看自己制作的文件是不是都上传上去了呢。网上查看时记得将Branch由master切换成gh-pages。之后再登录之前sitting里显示的那个链接是不是我们之前自己制作的呢?

在这里我也希望所有和我一样初入前端的人都能越来越棒,早日摆脱菜鸟的称呼

看完文章别忘了点赞哦

用Github pages搭建自己制作的网页,方法最简单,适用于新手的更多相关文章

  1. 用Github pages搭建自己制作的网页

    本文固定链接http://blog.csdn.net/pspgbhu/article/details/51205264 本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建站点的方法.发现不 ...

  2. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  3. 可能是最详细的 Hexo + GitHub Pages 搭建博客的教程

    前言:博主目前大三,Web 前端爱好者.写博客的好处,不是为了写而写,而是一个记录思想的过程.不要考虑它能带给你什么,而是你自己从中收获了什么. 最近刚好有空,于是就参照网上的各种教程,搭建了一个博客 ...

  4. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  5. 用GitHub Pages搭建博客(五)

    本篇介绍GitHub Pages自定义域名 在用GitHub Pages搭建博客(二)中介绍到,默认的GitHub Pages域名就是仓库地址,即: 账号名.github.io 如果我们要使用自定义域 ...

  6. 7. Github Pages 搭建网站

    7. Github Pages 搭建网站 个人站点 访问 https://用户名.github.io 搭建步骤 1) 创建个人站点   ->  新建仓库(注:仓库名必须是[用户名.github. ...

  7. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  8. 基于 Hexo + GitHub Pages 搭建个人博客(一)

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  9. 基于 Hexo + GitHub Pages 搭建个人博客(二)

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

随机推荐

  1. setAttribute()

    ●节点分为不同的类型:元素节点.属性节点和文本节点等.   ●getElementById()方法将返回一个对象,该对象对应着文档里的一个特定的元素节点.   ●getElementsByTagNam ...

  2. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  3. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  4. python笔记(持续更新)

    1.编译python遇到下面的编码问题:     SyntaxError: Non-ASCII character '\xe9' in file E:\projects\learn.py on lin ...

  5. 重新认识了下Entity Framework

    什么是Entity Framework Entity Framework是一个对象关系映射O/RM框架. Entity Framework让开发者可以像操作领域对象(domain-specific o ...

  6. [原] KVM 虚拟化原理探究 —— 目录

    KVM 虚拟化原理探究 -- 目录 标签(空格分隔): KVM KVM 虚拟化原理探究(1)- overview KVM 虚拟化原理探究(2)- QEMU启动过程 KVM 虚拟化原理探究(3)- CP ...

  7. JSP 标准标签库(JSTL)

    JSP 标准标签库(JSTL) JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能. JSTL支持通用的.结构化的任务,比如迭代,条件判断,XML文档操作,国际化标签, ...

  8. ubuntu系统(华硕笔记本)屏幕亮度用Fn控制的调节设置

    亲测配置: 系统:Linux lite 3.2 x86_64(Ubuntu其他版本可参考修改) 笔记本:华硕(asus)1201N 达到的效果: 可以正常使用Fn+F5调暗,Fn+F6调亮. 设置步骤 ...

  9. 兼容Mono的下一代云环境Web开发框架ASP.NET vNext

    微软在2014年5月12日的TechEd大会上宣布将会发布下一代ASP.NET框架ASP.NET vNext的预览.此次发布的ASP.NET框架与以前相比发生了根本性的变化,凸显了微软“云优先”(cl ...

  10. Xamarin.Android多界面

    一.准备 开始学习本教程前必须先完成该教程http://www.cnblogs.com/yaozhenfa/p/xamarin_android_quickstart.html 否则将无法继续. 二.界 ...