用 GitHub 來部署靜態網頁 ꒰･◡･๑꒱

時間 2019-11-06

標籤 github 部署靜態網頁欄目 Git 简体版

原文原文鏈接

在嘗試過用 GitHub 部署靜態 HTML 網頁後，以爲其實挺容易的，這裏簡單說說如何用 GitHub 來完成部署。css

1.新建版本庫

首先我們新建了一個版本庫做爲 demo，而後點擊"settings"

2.`Automatic page generator`

咱們選擇 "GitHub Pages" 的 "Automatic page generator"

3.自由配置信息

4.`Continue to layouts`

這裏的google分析能夠不填，我們先把頁面跑起來，點擊"Continue to layouts"

5.選擇模板

這裏github給你提供了一些模板，我選了第一個模板，點擊"Publish page"

6.注意分支

發佈成功，這裏是我們的"gh-pages分支"

7.訪問頁面

點擊"settings"，訪問剛剛發佈的靜態頁面連接

8.查看部署結果

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。html

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git branch
* gh-pages

qianjiahaodeMacBook-Pro:HowToDeployHTML qianjiahao$ git commit -a -m "first commit"
[gh-pages cc8c864] first commit
 1 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`

12.demo

到此爲止，差很少講完了，這個是demo的地址html5

13.默認目錄

它幫咱們生成的目錄結構其實不太好，我們能夠本身定義本身的目錄結構，以前的一個項目目錄結構是這樣的git

14.要注意的是：

它會認準你的index.html頁面，當作初始界面，我試過將它的index.html放入個人目錄結構中，後來我部署發佈後，github又自動給我生成了一個index.html頁面，這個問題當時沒有發現，致使出現了更新無效等奇葩的狀況，疑惑了半天。還有params.json會配置github給你生成的模板信息。github