利用github搭建一个网站,进行展示

一时失言乱红尘 2022-09-29 12:56 220阅读 0赞

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

google一下了解到Github有一个Github pages的功能可以搭建博客或者托管网页，而且免费耶，搜了下教程，猛地一看感觉步骤也不是很麻烦，所以就用这个了！

教程一大堆，却没有几个能看懂的，问题一：90%的都在讲解如何搭建博客，和我想要将自己的网页部署到上面还是有点区别的。问题二：所有的教程都用到了Git，而我只知道Git是一个开源的分布式版本控制系统。完全不知道命令行是什么鬼，只能照猫画虎的小白来说，那些教程只能帮我到桥头，但想要成功过河，还需要深夜里的一包特浓咖啡。

开始教程之前的准备工作：

1、需要你自己写的网页文件。

![903320-20160305135133440-1617205021.png][]

2、注册Github。

3、下载安装git。下载地址https://git-scm.com/downloads

教程开始：（以下出现的test指你的网页名或者你想起的一切名字）

步骤一：登录到Github上，新建一个repo，命名为test，勾选 initialize this repository with a README，点击create repository。

![903320-20160305134947346-1921005167.png][]

![903320-20160305135528627-97762586.png][]

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

![903320-20160305140204096-424861698.png][]

![903320-20170115212404385-1979000093.png][]

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

![903320-20170115213630338-44375750.png][]

点击这个链接

![903320-20170115213708181-1344935302.png][]

哇塞，一个 test。

![903320-20170115214228291-440785933.jpg][]

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

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

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

![903320-20160305143603580-1181123251.png][]

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

![903320-20160305144226284-240519711.png][]

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

![903320-20160305144422830-1748939517.png][]

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

![903320-20170115221415291-438950308.jpg][]

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

![903320-20170115214543088-1087192475.png][]

步骤八：执行如下命令

![903320-20170115223036885-339161325.png][]

![903320-20170115214907322-582268605.png][]

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

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

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

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

![903320-20170115215934447-1512227962.png][]

![903320-20170115220041244-1925172190.png][]

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

![903320-20160305152031768-1166232109.png][]

![903320-20160305152052471-1604781690.png][]

ok之后耐心等待。

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

![903320-20170115220210135-283625166.png][]

最后一步：打开浏览器输入给你的网址加上你上传的 html 文件名 test.html，然后重重的按下回车。

![903320-20170115220518744-483807793.png][]

![903320-20170115220529541-62659136.png][]

![903320-20160305153305424-1042365035.png][]恭喜你，成功了！！！哦不，还差一步，不关注一下我？不推荐一下文章？

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

[903320-20160305135133440-1617205021.png]: /images/20220708/2be404dea973470e95df9ca44c397523.png
[903320-20160305134947346-1921005167.png]: /images/20220708/b047c4f1706c4070aeb18d593d6f427a.png
[903320-20160305135528627-97762586.png]: /images/20220708/6f8549f201834dbbb1fd7bb1534502c1.png
[903320-20160305140204096-424861698.png]: /images/20220708/d8fa7a36e5bc4f85b590e7c252ad9de1.png
[903320-20170115212404385-1979000093.png]: /images/20220708/643a0ffc01b043eb93bcd3644c440872.png
[903320-20170115213630338-44375750.png]: /images/20220708/843ae9315c47482a9bd5438f470686aa.png
[903320-20170115213708181-1344935302.png]: /images/20220708/99d1aee8ae2b4b8e9288ef48a9d11a89.png
[903320-20170115214228291-440785933.jpg]: /images/20220708/120782edd4414a79a8417d9eee905ae2.png
[903320-20160305143603580-1181123251.png]: /images/20220708/20bb08a7fb1946129987695a9f0097db.png
[903320-20160305144226284-240519711.png]: /images/20220708/e0a0afed40684a0b9fefa39ca396f862.png
[903320-20160305144422830-1748939517.png]: /images/20220708/33e396b2860249dab6b05d5bcd2f895c.png
[903320-20170115221415291-438950308.jpg]: /images/20220708/00dce59b712f42a9b790a2d0502f7ded.png
[903320-20170115214543088-1087192475.png]: /images/20220708/ab4d2959895541ca88bbff3db40be8a9.png
[903320-20170115223036885-339161325.png]: /images/20220708/72bbaae495cd44fe8d722c4d551fce2e.png
[903320-20170115214907322-582268605.png]: /images/20220708/d2c82e01c7cf49cd9ebd81fe66955b23.png
[903320-20170115215934447-1512227962.png]: /images/20220708/d137d96d5a4a461a9282f47991996899.png
[903320-20170115220041244-1925172190.png]: /images/20220708/9d3f7b4651d540699b102437ae606c70.png
[903320-20160305152031768-1166232109.png]: /images/20220708/ac1c749cc0d74b5b8f1fa9ee59bea53e.png
[903320-20160305152052471-1604781690.png]: /images/20220708/3624f34ad730435198d31b23089e1d92.png
[903320-20170115220210135-283625166.png]: /images/20220708/ea67864adda746dd9c34cebc4550817e.png
[903320-20170115220518744-483807793.png]: /images/20220708/b3569199c1fe46549abb40663cf8806c.png
[903320-20170115220529541-62659136.png]: /images/20220708/bc2739a4b00f43f2b625f763ad8dc96d.png
[903320-20160305153305424-1042365035.png]: /images/20220708/471ac6e6914048f6b555231d4c7492a1.png