zoukankan      html  css  js  c++  java
  • 用 GitHub 来部署静态网页 ꒰・◡・๑꒱

    http://segmentfault.com/a/1190000002765287

    在尝试过用 GitHub 部署静态 HTML 网页后,觉得其实挺容易的,这里简单说说如何用 GitHub 来完成部署。

    1.新建版本库

    首先咱们新建了一个版本库作为 demo,然后点击"settings"

    http://segmentfault.com/img/bVlLuk

    2.Automatic page generator

    我们选择 "GitHub Pages" "Automatic page generator"

    http://segmentfault.com/img/bVlLvD

    3.自由配置信息

    http://segmentfault.com/img/bVlLvH

    4.Continue to layouts

    这里的google分析可以不填,咱们先把页面跑起来,点击"Continue to layouts"

    http://segmentfault.com/img/bVlLvI

    5.选择模板

    这里github给你提供了一些模板,我选了第一个模板,点击"Publish page"

    http://segmentfault.com/img/bVlLvL

    6.注意分支

    发布成功,这里是咱们的"gh-pages分支"

    http://segmentfault.com/img/bVlLvM

    7.访问页面

    点击"settings",访问刚刚发布的静态页面链接

    http://segmentfault.com/img/bVlLvQ

    8.查看部署结果

    http://segmentfault.com/img/bVlLvS

    9.自定义你的页面

    我们修改它的模板 "index.html"

     

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>html5</title><style type="text/css">.theme{

          display: block;

          width: 200px;

          font-size: 30px;

          margin: 100px auto;

        }</style></head><body><div class="theme">

      Hello, world.

    </div></body></html>

    10.add -> commit -> push

    这里要注意一下,我是直接新建的库,然后发布的,所以,没有master分支,只有gh-pages分支github只会将你的gh-pages分支部署上去,不会动你的其他分支的东西。所以,我们要将改动提交到gh-pages分支上,再push

    qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git branch

    * gh-pages

     

    qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git commit -a -m "first commit"

    [gh-pages cc8c864] first commit1 file changed, 23 insertions(+), 65 deletions(-)

     rewrite index.html (98%)

     

    qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git push origin gh-pages

    Counting objects: 3, done.

    Delta compression using up to 4 threads.

    Compressing objects: 100% (3/3), done.

    Writing objects: 100% (3/3), 523 bytes | 0 bytes/s, done.

    Total 3 (delta 0), reused 0 (delta 0)

    To git@github.com:qianjiahao/HowToDeployHTML.git

       3d6ebe7..cc8c864  gh-pages -> gh-pages

    11.确认结果

    提交成功,我们看看咱们的网页,熟悉的 `Hello,world`

    http://segmentfault.com/img/bVlLwF

    12.demo

    到此为止,差不多讲完了,这个是demo的地址

    13.默认目录

    它帮我们生成的目录结构其实不太好,咱们可以自己定义自己的目录结构,之前的一个项目目录结构是这样的

    http://segmentfault.com/img/bVlLwT

    14.要注意的是:

    它会认准你的index.html页面,当做初始界面,我试过将它的index.html放入我的目录结构中,后来我部署发布后,github又自动给我生成了一个index.html页面,这个问题当时没有发现,导致出现了更新无效等奇葩的情况,疑惑了半天。还有params.json会配置github给你生成的模板信息。

    15.修改默认目录

    如果是将已有的(静态)项目部署上线,建议自己修改目录结构

    改改更健康""

    16.google analytics

    github推荐使用google analytics,在登录之后点击管理跟踪信息,会看到它给你提供的idcode,把code粘贴到你的代码里,就可以了

    http://segmentfault.com/img/bVlLyf

    17.分析和统计

    google analytics会帮你自动的做分析和统计

    http://segmentfault.com/img/bVlLyp

    ~

     

    来源: <http://segmentfault.com/a/1190000002765287>

     





  • 相关阅读:
    Java IO(三)
    Java IO(二)
    Java IO(一)
    Java操作属性文件与国际化
    Java集合详解二
    Java集合详解一
    Spring官方文档翻译(转)
    S2SH整合
    NX二次开发-UFUN获取图纸视图最大边界和视图中心点UF_DRAW_ask_view_borders
    已知两点计算直线的向量
  • 原文地址:https://www.cnblogs.com/imsoft/p/4078f53fb7e2a0fd6c653071a940028a.html
Copyright © 2011-2022 走看看