把自己的静态网页放到网上

前言

相信大部分同学此时的进度已经到达HTML/CSS阶段了。这个阶段我们会实现很多的网页,但是它们都只能在我们自己的电脑里查看,你想不想把它放到网络上让别人去看呢?
如果你也想把自己的网站放到网络上,就继续看吧。
可以试点击这里打开一个我写的网页(我的网站使用了一些字体,文件稍微有些大,加载可能会慢一些

步骤一:注册gitee(码云)账号(已经有的同学可以跳过)

这一步比较简单,就是在码云上注册自己的账号。但是要注意的是,你需要绑定自己的手机号,不然是不能使用 Gitee Pages 服务的,而这个服务是我们将自己的网页放到网络上最重要的一步

可能有些同学对码云了解的较少,但是对GitHub了解的或许多一些。两者的本着都是一样的,都是将自己的代码放到网络上去(可以公开,只要是公开的代码都不收费)然后进行团队协作开发,或者将其作为开源平台(就是将自己的代码放到网络上,供别人使用)。两者都基于一种叫git的工具,而git工具的用途就是用来同步一些文件,具体可以自行查阅,就不过多介绍了。

步骤二:建立一个自己的仓库

当我们刚登陆码云的时候,大概会看到这样的情况:

码云主页面

这时候,鼠标滑动到右上角的那个加号那里,之后会出现一个新建仓库的按钮,点击它。
新建仓库

点击之后,就会对自己的仓库进行初始化配置。
仓库名称:就是你自己建立的仓库的名字,可以写正在写的项目的名称;
路径:设定一个路径,在访问你的仓库时,就会通过该路径访问,建议设全英文;
是否开源:设置私有的话,仅能自己和自己的团队能看到,这个看自己的想法了;
语言:选择HTML/CSS,其实选择什么都无所谓,但是既然放的是网页,就用选这个好一点;
添加.igtignore:不用管,这个是与同步有关的;
其他选项:暂时不管,想要了解的话可以自行查阅;
最后,点击“创建”,就能建立一个自己的仓库了。
新建仓库

当你创建完后大致是这样的,但是没有“科院小站”那个文件夹,因为是我后来加上的。
仓库

步骤三:上传自己的网页文件

这一步需要我们将自己的相关的文件传输上去。
首先点击上图的文件,出现一个新建文件夹的选项,点击,为自己的网页创建文件夹,名字就根据自己的项目随意。

image.png

创建完成后,因为Gitee不允许有空的文件夹,就会自动先在文件夹内放置一个名叫 ".keep"的空文件。当你创建完文件夹后也会自动 跳转到那个文件内,此时,点击它的上级目录名来返回其上级目录。
image.png

这时候我们已经进入到这个文件夹内了,可以看到其下仅有一个".keep",现在,点击上传,准备上传自己网页以及其资源。
image.png

现在,我们选中自己的文件,然后拖拽到蓝色区域(蓝色区域是我为了方便看清楚位置自己画上去的),之后,就可以准备上传了,随便写一些“提交信息”,然后点击下方的“提交”即可。
image.png

注意:

1.不能连带文件夹上传

如果你的网页带有目录结构(比如css,imgs等),就先按照每个目录的名字创建好文件夹(步骤同上)之后将其对应的文件夹拖拽进去,就会自动把文件夹下的所有文件自动选择来上传,类似下面的动图。


拖拽

假如你想把你的html文件夹上传,就先创建一个html的文件夹(在步骤三最开始创建的那个文件夹下创建),然后将你的html文件夹拖拽过去即可。

2. 注意路经

所有的绝对路径要改为相对路径,因为别人无法直接访问你电脑上的文件,就会导致你的网页将会是不完整的(会缺少诸如css文件,图片等外部资源)。
假如你的html文件和css文件分别在html和css这两个文件夹下,则html中的link标签应该这样写:<link rel="stylesheet" src="../css/xxx.css">这就是相对路径的写法,包括图片和其他资源也是同样的写法。

步骤四:开启Gitee Pages服务

这一步是所有步骤中最重要的一步,也是最后一步,完成后就大功告成了!
首先点击你仓库右上角的“服务”,点开里面的Gitee pages。



之后填写上部署目录的名称点击最下面的按钮,然后稍等一会就OK了!



成功开启后,会显示“已开启Gitee pages服务,网站地址:xxxxxxxxxx”
到此,教程结束。

注意

如果你已经开启过服务,之后又更改了一些文件,需要再次进入Gitee Pages页面点击“更新”才行

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容