如何在 Github Pages 搭建库(创建免费域名)来管理和浏览自己的项目

看了 这篇文章,  你能学会 两大技能 :

1. 如何在 Github Pages 上搭建库来管理自己的项目
2. 你能访问你的项目 ---- 就像访问域名一样, 查看自己做的网页

---

说明:

• 像我们学前端的朋友，好不容易做好一个很炫的网页，没法放在网站上供大家浏览，实在是一件很蛋疼的事情，想装X一下都没办法
• 今天了解到一个强大的平台，那就是 Github，它一个面向开源及私有软件项目的托管平台，而且 Github 有一个 Github pages 的功能可以搭建博客或者托管网页，而且免费，于是乎就自己捣腾了一下，下面来分享一下我的经验

 

搭建自己的 Github Pages

• 准备工作：
  • 需要你已经写好的网页项目文件。
• 
  • 注册Github
    • 详细方法详见百度百科: https://jingyan.baidu.com/article/4ae03de3d6f9c53eff9e6bdd.html
  • 下载安装 Git
    • 下载 地址:  https://git-scm.com/downloads
    • 安装 方法: https://www.cnblogs.com/wj-1314/p/7993819.html

 

教程开始：

以下出现 test 的地方指的是你的网页的项目名称

• 步骤一：
  • 登录到 Github上，点击右上角的 + 号，新建一个库 repository
  • 在下图对应 Repository name 的位置命名为 test
  • 勾选 initialize this repository with a README，点击 create repository
•  
• 

 

• 步骤二：打开settings，往下翻有一个Github Pages 的设置，点击 source 中的 master branch，默认的 None ，使其变成 master 分支，也就是作为部署github pages 的分支，然后点击 save。
• 
• 

 

• 步骤三：页面刷新之后，再看 github pages 设置框处，多了一行网址，就是你的 github pages 的网址了，以后就靠他来浏览你的网页。
• 

 

---

至此以上，github上要处理的操作告一段落，下面开始 Git 操作了！

 

• 步骤四 ：打开我的电脑，选择一个磁盘，比如 F 盘，右键空白处点击选择 git bash here，弹出如图的窗口。
• 

 

• 步骤五：分别输入如图命令，用来在 F 盘创建 test 项目放你搭建的 github的 test repository 上，克隆test repository到 test 文件中。
• 
• 这个时候你的 f 盘，就会多一个 test 文件，打开它，
• 

• 会看到一个 README.md 的文件，这个文件是从哪来的呢？再看看你的 github，你会发现 README 文件是来自 master 分支。
• 

 

• 步骤六： 将自己的网页项目文件复制粘贴至 F 盘的 test 文件中
•  

 

• 步骤七：执行如下命令 cd test- ( test-指的是你的项目文件名,我这里为了好区分用test- )
• 
• 

 

• 解释一下上面的命令：
  • 首先输入  git status   列出当前目录所有还没有被git管理的文件和被git管理且被修改但还未提交(git commit)的文件，也就是所有改动文件，红色字体标出。
  • 然后输入 git add .  (有个点) 表示添加当前目录下的所有文件和子目录，
  • 然后 再输入一次 git status 如果看见文件都变绿了 ，那么就代表 它们已经准备好了被提交（git commit）。

 

• 步骤八：输入如图命令，将你的文件上传至你的 github master 分支上
  • 注意: 这里如果是第一次使用 git, 会有提示: I don't know who you are, 出现的话就执行下面两条命令即可
    • 第一个 xxxx 写你的 github 用户名
    • 第二个 xxxx 写你注册 github 时填的邮箱

    • git config --global user.name "xxxx"
      git config --global user.email xxxx

• 
•  

• 输入最后一行 git push，按回车，等一会，会有弹出框让你输入你的 github 账号 和 密码。
• 
• 
• OK之后耐心等待......
• 当出现像下图中的语句之后，你的项目已成功传至 github 上。
• 

 

• 最后一步：打开浏览器输入你在第三步生成的网址，然后重重的按下回车。

 

•  

 

恭喜你，成功了！！！Ou no，还差一步，点赞 + 关注吧

 

 

附录一：常用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客户端进行修改在同步。（如果添加了新的文集推荐此法）

附录三 ：详细了解 github 的使用

请参考: https://www.cnblogs.com/wj-1314/p/9901763.html