Xiaoshier Blog

使用git展示静态页面

发表于 | 分类于

在 git 上展示 demo。只有把项目放在 gh-pages 分支下，才能显示页面。

设备: MacBook Pro
版本: OS X EI Capitan 10.11.5

创建步骤

  1. 先创建仓库 repo-name，将文件上传至该 repo-name 的 master 中
  2. 再创建 gh-pages 分支
  3. 将文件上传至 gh-pages 分支
  4. 浏览器中输入 username.github.io/repo-name

1.使用git前准备

由于 mac 预装了 git, 所以免去安装环节.

  • 注册 github 账户

  • 设置SSH Key

    github 上连接已有仓库时的认证,通过使用 SSH 的公开密匙方式认证进行的.也就是说,本地电脑的 git 与远程 github 上的仓库连接是通过 SSH Key 一致时,遍知道你是该用户,我可以上传,下载等(目前的理解如此,不知后面会不会推翻现在的认知)

    打开终端,输入:

    1
    $ ssh-keygen -t rsa -C "your_email@youremail.com"

    输出显示:

    1
    2
    Generating public/private rsa key pair.
    Enter file in which to save the key (/Users/xiaoshier/.ssh/id_rsa):

    按回车,不要修改默认路径.

    1
    2
    Enter passphrase (empty for no passphrase):
    Enter same passphrase again:

    输入密码,并确认,成功:

    1
    Your identification has been saved in /Users/your_user_directory/.ssh/id_rsa. Your public key has been saved in /Users/your_user_directory/.ssh/id_rsa.pub. The key fingerprint is: ... ...

    找到.ssh 文件夹,编辑器打开id_rsa.pub文件,复制内容到剪贴板

  • 打开 github 设置ssh,

    img1
    img2

    添加成功.

2. 创建仓库

  • 在 gitbub中创建一个仓库 git-tutorial, 获取 HTTPS 或 SSH 的值

3.本地创建 git 项目

  • 本地创建 git 项目

    1
    2
    3
    $ mkdir git-tutorial
    $ cd git-tutorial
    $ git init

  • 创建文件
    本地创建一个文件index.html
    添加至本地git仓库, 并保存到本地仓库的历史记录中

    1
    2
    $ git add index.html
    $ git commit -m "Initial commit"

4. 推送至远程仓库github

  • 将仓库连接到远程服务器

    1
    2
    $ git remote add origin https://github.com/username/git-tutorial.git
    $ git push -u origin master

    此时是将代码发布到 master 分支上

5. 创建 gh-pages 分支

  • 新建并切换到 gh-pages 分支

    1
    $ git checkout --orphan gh-pages

  • 添加文件上传至 gh-pages 分支中

    1
    2
    3
    $ git add index.html
    $ git commit -m "Initial commit"
    $ git push -u origin gh-pages

6. 查看

在浏览器中输入 username.github.io/git-tutorial 就可以看到静态页面了

7. clone 已有的仓库代码

  1. clone master 分支代码

    1
    $ git clone https://github.com/username/git-tutorial.git

  2. clone gh-pages 分支代码

    1
    $ git checkout --orphan gh-pages

    或

    1
    2
    3
    $ git branch -r #查看远程分支
    or
    $ git branch -a #查看所有分支

    显示如下

    1
    2
    3
    origin/HEAD -> origin/master
    origin/gh-pages
    origin/master

    输入

    1
    $ git checkbox origin/gh-pages

  3. 添加代码

    1
    2
    3
    $ git add .
    $ git commit -m 'add'
    $ git push -f origin gh-pages # -f  force

8. 删除 git 仓库中的文件

1
2
3
$ git rm --cached [filename] || git rm -r --cached [directory]
$ git commit -m 'remove useless files'
$ git push -u origin master