996.icu到955.holiday--使用Github託管靜態網站

sjfkai發表於2019-04-02
996Github網站

一個靜態網站（955.holiday），從域名申請到上線釋出的全過程。

背景

996.ICU 一夜之間火爆了碼農圈。當然也成了我們的飯桌話題。同事說：“朝九晚五”的公司也不在少數，我們可以同樣做一個類似的網站來讓一些正能量的公司得到曝光。

於是 955.holiday 就出現了。

Github（求star）: github.com/955holiday/…

它是如何一步步上線的呢？下面進入正題：

域名申請

tips: 你也可以跳過此步，直接使用 github 提供的預設訪問地址

當你有一個好的 idea ，第一時間就要去看一看合適的域名有沒有被註冊。

推薦兩個註冊域名的網站：

國內服務商：阿里雲

優點： 相對便宜、備案方便 缺點： 需要實名認證

國外服務商：GoDaddy

優點： 無須實名認證、支援支付寶 缺點： 價格偏高

如果你有備案的需求，就選擇阿里雲吧，當然並不是所有的域名都可以備案的，哪些域名可以備案請查詢：工業和資訊化部域名行業管理資訊公示

如果沒有備案需求，價格相差又不是很多，就選擇 GoDaddy 吧。

建立github pages

github pages 可以為我們每個 git 倉庫提供靜態網站的託管功能。

下面讓我們建立一個可訪問的靜態網站：

新建專案

首先需要為我們的網站新建一個倉庫（New repository）,比如： hello-pages

996.icu到955.holiday--使用Github託管靜態網站

生成靜態網站

然後讓我們在本地生成一個靜態網站

mkdir hello-pages && cd hello-pages
複製程式碼

新建 index.html

<html>
  <head>
    <title>hello pages</title>
  </head>
  <body>
    hello pages
  </body>
</html>
複製程式碼

在本地構建 git repo 並上傳到 github

$ echo "# hello-pages" >> README.md # 增加 readme 檔案
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:<your-name>/hello-pages.git # 這裡要修改為你自己的倉庫地址
$ git push -u origin master
複製程式碼

訪問github，開啟 hello-pages 倉庫，確保我們的專案已經推送了上去。

開啟 github pages

在 github hello-pages 專案頁面點選 Setting，向下找到 GitHub Pages -> Source 選擇 master branch

頁面重新整理，返回 GitHub Pages 顯示釋出成功。頁面可以正常訪問了。

996.icu到955.holiday--使用Github託管靜態網站

你可以在這裡檢視此階段原始碼

繫結域名

至此，我們的 hello-pages 已經可以正常訪問了，只不過訪問地址還是 github 的域名。

下面我們進一步將域名解析到我們的網站。

配置DNS

在你購買域名的網站，找到域名的DNS解析配置頁面，根據你的需求，選擇以下一種配置方式。（各網站解析記錄配置方式可能略有不同，請檢視站內幫助）

1. 訪問地址為頂級域名

如：example.com

新建 A 記錄，將記錄指向下面四個ip

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
複製程式碼

詳細資訊，請參考：Setting up an apex domain

2. 訪問地址為二級域名

如：www.example.com blog.example.com

新建 CNAME 記錄， 將記錄指向 <your-github-name>.github.io

詳細資訊，請參考：Setting up a custom subdomain

3. 訪問地址為頂級域名和www二級域名

如 example.com 和 www.example.com 可以同時訪問 ，但是這裡的二級域名只能是 www.example.com

這種方式需要同時配置上面的 1 和 2

詳細資訊，請參考：Setting up an apex domain and www subdomain

增加CNAME檔案

在git倉庫中新增 CNAME 檔案，內容為自定義域名的訪問地址。

請注意，該檔案只能包含唯一一個地址。

如果的 DNS 配置為頂級域名和 www 二級域名可以同時訪問，CNAME 中只需要填寫 頂級域名即可。

將修改 push 到 github

檢視效果

訪問你配置的地址，頁面應該已經可以開啟了。

DNS解析是有延遲的，如果無法開啟，可能需要稍等片刻。

如果長時間依舊無法開啟，就需要排查一下是不是哪一步除了問題。

HTTPS

GitHub Pages 同時支援 http 和 https 協議，但是並不會自動跳轉。

我們可以通過配置，強制跳轉到 https 站點。

在 github hello-pages 專案頁面點選 Setting，向下找到 GitHub Pages 勾選 Enforce HTTPS

至此，你已經可以通過修改 HTML, 增加 CSS 來美化你的網站了。

你可以在這裡檢視此階段原始碼

自動構建併發布

現如今，大多數的前端專案都是基於框架（比如 React 、 VUE）構建的。

對於這些專案，我們需要通過 build 才能產生瀏覽器可以解析的 HTML 、 CSS 、 JS.

如果每次專案變動，我們都需要修改原始碼，然後 build，然後再將 build 結果推送到 github-pages 專案。其實還是很繁瑣的。

我們能不能減少這些無畏的工作量呢？

答案是有的

使用gh-pages分支

GitHub Pages 允許將靜態檔案放在三個地方：

  1. master 分支
  2. master 分支的 docs 目錄下
  3. gh-pages 分支

我們可以將專案原始碼放在 master 分支下，將 build 結果放在 gh-pages 分支, 每次build完成後，更新 gh-pages 分支。

如果上述操作依舊通過手動執行的話，其實並不會減少什麼工作量。

我們需要藉助持續整合服務（Continuous Integration，簡稱 CI）來實現進一步的自動化。

使用 Travis CI 自動部署

Travis CI 提供的是持續整合服務（Continuous Integration，簡稱 CI）。它繫結 Github 上面的專案，只要有新的程式碼，就會自動抓取。然後，提供一個執行環境，執行測試，完成構建，還能部署到伺服器。
複製程式碼

瞭解Travis CI可以參考官方文件，也可以閱讀阮一峰的持續整合服務 Travis CI 教程。

每當我們 push 程式碼到 github 時，可以藉助 Travis CI 自動 build 並將 build 結果更新到 gh-pages 分支。剛好 Travis CI 也提供了這樣的功能。 詳見：GitHub Pages Deployment

接下來我們就開始操作了

建立 GitHub access_token

點選右上角自己的頭像 -> Settings -> Developer settings -> Personal access tokens -> Generage new token

填寫 Token description

勾選 repo 確認建立

access_token 建立成功，臨時儲存一下，後面會用到。

設定 Travis CI

  • 使用 Github 賬號登入 Travis CI

  • 點選 +

  • 點選 Sync account

  • 開啟 hello-pages 專案倉庫的開關。

  • 點選 Setting

  • 關閉 Build pushed pull requests

  • Environment Variables 下面新增一項 name為 GIT_REPO Value為剛剛申請的 access_token

修改專案

我們繼續在之前的 hello-pages 專案上繼續修改，這裡以 React 專案為例

$ npm i create-react-app -g

# create-react-app 建立專案前，需要刪除之前的檔案
$ rm -rf index.html CNAME

$ create-react-app .
複製程式碼

在 public 下面新建和之前一樣的 CNAME 檔案。 目的是為了最終 build 目錄包含 CNAME 檔案。

新建 travis.yml

language: node_js
node_js:
  - "10"
install: yarn

script: npm run build

deploy:
  provider: pages
  local_dir: ./build
  skip_cleanup: true
  github_token: $REPO_TOKEN
  keep_history: true
  on:
    branch: master
複製程式碼

更改完成後，commit，然後推送到 github 。

稍等片刻，就可以在 Travis CI 看到專案已經開始構建了。構建成功後 gh-pages 分支就已經自動推送到 github 了。

回到 github hello-pages 專案頁面點選 Setting，向下找到 GitHub Pages -> Source 選擇 gh-pages branch。

切換成功後就可以正常訪問了。

最終程式碼

SEO

Github pages 雖好，但一直有一個頭疼的問題，就是網站無法被百度收錄。據說是因為 Github 遮蔽了百度爬蟲。

有搜尋需求的可以考慮使用 coding.net。功能基本上和 github 是一致的，這裡就不做深入介紹了。

原文連結：blog.sjfkai.com/

歡迎關注公眾號 “大前端開發者”。給你帶來更多的前端技術與資訊

996.icu到955.holiday--使用Github託管靜態網站

相關文章