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

最近发现 github 改版了,已没有像原来的 Launch automatic page generator 这样的按钮等,所以我对我的文章也进行了修正,对于新版来说,步骤更加简单了。欢迎享用。

------华丽丽的分割线,以下是在原版的基础上的修正版-------

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

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 的设置,点击 source 中的本来的 None ,使其变成 master 分支,也就是作为部署github pages 的分支,然后点击 save。

步骤三:页面刷新之后,再看 github pages 设置框处,多了一行网址,就是你的 github pages 的网址了。

点击这个链接

哇塞,一个 test。

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

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

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

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

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

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

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

步骤八:执行如下命令

解释一下上面的命令:首先输入  git status   列出当前目录所有还没有被git管理的文件和被git管理且被修改但还未提交(git commit)的文件,也就是所有改动文件,红色字体标出。

然后输入 git add .  (有个点) 表示添加当前目录下的所有文件和子目录,

然后 再输入一次 git status 如果看见文件都变绿了 ,那么就代表 它们已经准备好了被提交(git commit)。

步骤九:输入如下命令,将你的文件上传至远程 master 分支

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

ok之后耐心等待。

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

最后一步:打开浏览器输入给你的网址加上你上传的 html 文件名 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上的master分支中直接进行修改。(如果不添加新的文件推荐此法)

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

时间: 2024-12-29 09:19:22

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

如何在github上搭建一个免费的 无限流量的静态网页博客Github pages

前言: 看到很多相关的教程,但是在实际操作的时候还是遇见了不少问题,这里记录分享一下我的操作流程.免费空间用过很多,博客也用过一些,听说了github后就想试着玩一下这个静态库,感觉挺不错的,操作也比较简单,可以放些demo觉得挺不错的,看自己的喜好来搭建吧~本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 1.注册github.com账户,具体操作不描述了,英文如果不是很好可以使用翻译软件 2.新开一个一个仓库(N

Github Pages 搭建个人博客

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

使用 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/

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

本人自学前端一个多月,写个几个网页想要用来应聘,网上搜各种搭建网站的方法,发现不是要收费就是很麻烦.终于黄天不负有心人,让我找见了github pages,不但免费,还非常的方便!! 于是乎又开始搜索github pages搭建网站的步骤,发现基本都是各种搭建个人博客的方法,好不容易找到个关于搭载自己制作的网页,却又发现还需要去学习如何使用git...一堆代码让人实在难受..于是乎就自己开始研究github pages,终于让我找到最简单的方法了!在这里我就来分享给大家,同时也希望像我一样的前端

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

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

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:

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

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