[笔记]在GitHub Page上部署网页

本篇记录了如何通过GitHub Page发布个人网页,所以适合以下设计师阅读:

  1. 有一定前端知识;
  2. 想在网页上显示点什么又不想麻烦去折腾域名和服务器;
  3. 有Mac电脑,我还没研究Windows。

相关文章有很多,官网也写得很详细,我写得有点啰嗦了,因为是第一篇关于GitHub的文章所以尽量介绍详细点,避免日后查。之后还会写一篇用GitHub搭建静态博客,也就是CMS(内容管理系统)的文章。

以下正文:


1.起源

最早学习前端的时候就写过一些页面,也想自己部署到服务器上,但是又不想折腾域名和服务器(域名要购买还要备案,服务器也需要购买)。所以一直没有做这件事,准备简历的时候放的也是本地的代码。

直到前两天,因为公司官网下线无法访问(公司官网是我写的一个静态页面),所以才想是否还有别的方式可以展示,于是找到这么个神器GitHub Page。GitHub都不陌生,毕竟全球最大男性交友网站世界上最大的代码存放网站和开源社区1。它旗下GitHub Page更是可以免费托管你的静态页面,虽说空间不限,但据说体积要控制在1G以下2

折腾了半天总算是成功发布了页面,官方文档介绍得也非常详细,以下是我操作过后的具体步骤。

2.注册GitHub账号

注册地址:https://github.com/join?source=login

自行注册。

3.创建Git仓库(Repository)

点击右上角的加号创建仓库

填写仓库名称就可以点击下面的绿色按钮创建了。

其中:

  • Description——仓库描述,选填;
  • Public,Private——GitHub限制免费用户只能创建公开仓库;
  • Initialize this repository with a README——初始化仓库时添加README,readme是一个说明文件,用markdown语法编写,打上勾的话就默认添加了这个文件,如果不打勾后期也可以自己添加;

3.本地配置Git

创建好仓库后显示下图页面,点击红框标记按钮复制仓库地址。

这时候需要用到Git命令了 ,Git是一个分布式版本控制软件3,我们就通过Git命令来同步和管理代码。

Git的安装参考这篇文章:安装Git

安装好之后初次运行Git需要做一些配置:

  1. 打开系统自带的Terminal;

  1. 设置username和email,github每次commit(提交代码)都会记录他们,在Terminal中分别输入以下代码;
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
  1. 一般来说这样就可以了,如果考虑到传输安全的问题,可以考虑加上SSH协议,具体操作可以搜索“SSH keys Git”关键词。

4.克隆云端仓库到本地

配置完Git之后,选择一个本地文件夹来存放你的云端仓库,回头要把云端的仓库克隆到这里。比如下图我选择了Front这个文件夹。

输入以下命令,其中cd(Change directory)意为切换目录到...:

cd 文件夹地址

其中文件夹地址不一定要手输,直接把文件夹拖到Terminal里面也行,按下回车。

再输入以下代码把云端仓库克隆下来,仓库地址为之前第3步复制下来的地址。

git clone 仓库地址

此时你的仓库根目录下应该已经有克隆下来的仓库了,仓库里什么也没有。

5.上传文件到云端仓库

到这步,我们需要在本地库中添加些东西,官方文档中是直接用命令把文件写进去:

  1. 首先切换本地目录到克隆下来的库;

    cd 库标题
    
  2. 新建一个index.html文件,并在里面写入Hello World。

    echo "Hello World" > index.html
    

当然我们也可以直接把文件拷到到本地库文件夹下,或者在里面创建。注意这个文件夹下一定要有一个index.html文件,这里默认读者会点html,不解释了。

接下来就可以把文件上传到云端仓库了,在Terminal中输入以下命令:

  1. 把该文件夹下所有文件纳入版本管理;

    git add .
    
  2. commit代码,把代码的一个版本提交到本地;

    git commit -m "版本日志"
    
  3. push代码,把代码推(上传)到云端仓库,稍等一会儿就好了。

    git push -u origin master
    

6.设置GitHub Pages

这时我们已经成功将index.html文件推到云端仓库了,再一步就能大功告成,点击下图红框标记进入Setting页面:

拉到下面的GitHub Pages部分,按下图所示选择master branch(主分支),点击save。

刷新页面之后再回到GitHub Pages部分,可以看到页面已经发布,点击链接进入就大功告成啦!

7.结尾

后续的修改只需要重复第5步就可以了,代码如下:

cd 本地库目录
git add .
git commit -m "版本日志"
git push -u origin master

GitHub还有很多好功能有待开发,善于利用搜索引擎,have fun~


参考文章

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