用Github pages搭建自己制作的网页,方法最简单,适用于新手

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

于是乎又开始搜索github pages搭建网站的步骤,发现基本都是各种搭建个人博客的方法,好不容易找到个关于搭载自己制作的网页,却又发现还需要去学习如何使用git。。。一堆代码让人实在难受。。于是乎就自己开始研究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里显示的那个链接是不是我们之前自己制作的呢?

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

时间: 2024-10-11 21:29:52

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

Github Pages 搭建个人博客

1.Github简介 Github很好的将代码和社区联系在了一起,于是发生了很多有趣的事情,世界也因为他美好了一点点.Github作为现在最流行的代码仓库,已经得到很多大公司和项目的青睐,比如jQuery.Twitter等.为使项目更方便的被人理解,介绍页面少不了,甚至会需要完整的文档站,Github替你想到了这一点,他提供了Github Pages的服务,不仅可以方便的为项目建立介绍站点,也可以用来建立个人博客. Github Pages有以下几个优点: 轻量级的博客系统,没有麻烦的配置 使用

使用Octopress和Github Pages搭建博客的高级技巧

如何果还不知道如何使用Octopress和Github Pages搭建的同学可以参考码农的救赎:使用Github Pages搭建博客 提升速度 按照教程搭建好的博客,访问起来总是很慢很慢,即使把什么Google Plus和Google Analyze之类的都关闭掉后,仍然很慢.原因就是在HTML中的某些资源,比如脚本或者字体什么的是使用 点击阅读全文

使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客

title: 使用 Hexo,Material Theme 以及 Github Pages 搭建个人博客 date: 2019-04-29 00:05:50 tags: 其他 --- 准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm install hexo-material cp node_modules/hexo-material themes/

Hexo+GitHub Pages搭建的个人博客

1. 什么是 Hexo,什么是 NexT 主题? Hexo 是一个基于 Node.js 的静态站点生成框架,快速.简洁且高效.Hexo 主要使用 Markdown 解析文章,在几秒内,即可利用靓丽的主题生成静态网页.NexT 是其一个非常简洁优雅的主题. 2. 什么是 Markdown? Markdown 用过一些简单的标记,让你的文字实现精致的排版,实现易读易写,无需考虑美化,专注文字本身. 3. 什么是 GitHub ? GitHub 是基于 Git 技术的社交编程及代码托管网站.你可以用它

学会Git玩转Github笔记(三)—— Github Pages 搭建个人网站

https://help.github.com/categories/github-pages-basics/ 一.个人站点 访问 https://用户名.github.io 搭建步骤 1) 创建个人站点   ->  新建仓库(注:仓库名必须是[用户名.github.io]) 2) 在仓库下新建index.html的文件即可 注意: 1.github pages 仅支持静态网页 2.仓库里面是.html文件 3.个人主页也可以设置主题 二.Project Pages 项目站点 访问 https:

【 js 工具 】如何在Github Pages搭建自己写的页面?

最近发现 github 改版了,已没有像原来的 Launch automatic page generator 这样的按钮等,所以我对我的文章也进行了修正,对于新版来说,步骤更加简单了.欢迎享用. ------华丽丽的分割线,以下是在原版的基础上的修正版------- 学了前端小半年,如今写了个自己的网页想要去应聘,却发现部署很麻烦,部署到阿里云之类,买域名啊啥的还要收费,说贵也不贵,但我就是傲娇~ google一下了解到Github有一个Github pages的功能可以搭建博客或者托管网页,

github pages搭建网站(三)

一.个人站点 访问 https://用户名.github.io 搭建步骤 (1)创建个人站点 ->新建仓库(注:仓库名必须是[用户名.github.io]) (2)在仓库下新建index.html的文件即可 注意: github pages只支持静态网页 仓库里面只能是.html文件 二.项目站点 访问 https://用户名.github.io/仓库名 搭建步骤 (1)进入项目主页,点击settings (2)在setting页面,点击[Choose a theme] (3)选择一个主题[Se

hexo+github pages搭建个人博客(一)

由于希望通过配置个人博客逐步学习,之前有搭建过好几个,都因为长时间荒废,学习和记录目的都没有达到,这里重头开始记录.一是警醒自己,二是作为记录以便查阅. 主要步骤: 1.github个人代码仓库配置 git配置设置user.name和user.email配置信息 git config --global user.name "github用户名" git config --global user.email "github注册邮箱" 生成ssh秘钥文件 ssh-key

github pages搭建个人网站如何添加导航

折腾过github pages的同学都清楚使用jekyll搭建个人网站的目录结构,而导航最终的代码是在使用的主题目录中的default.html文件中的. 我的结构如下: . ├── 404.html ├── about.html ├── archive.html ├── assets │   └── themes ├── atom.xml ├── categories.html ├── changelog.md ├── _config.yml ├── _drafts │   └── jekyl