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

時間 2019-11-16

標籤 996.icu icu 955.holiday holiday 使用 github 託管靜態網站欄目 Git 简体版

原文原文鏈接

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

背景

996.ICU 一晚上之間火爆了碼農圈。固然也成了咱們的飯桌話題。同事說：「朝九晚五」的公司也不在少數，咱們能夠一樣作一個相似的網站來讓一些正能量的公司獲得曝光。前端

因而 955.holiday 就出現了。node

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

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

域名申請

tips: 你也能夠跳過此步，直接使用 github 提供的默認訪問地址github

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

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

國內服務商：阿里雲bash

優勢： 相對便宜、備案方便 缺點： 須要實名認證服務器

國外服務商：GoDaddy

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

若是你有備案的需求，就選擇阿里雲吧，固然並非全部的域名均可以備案的，哪些域名能夠備案請查詢：工業和信息化部域名行業管理信息公示

若是沒有備案需求，價格相差又不是不少，就選擇 GoDaddy 吧。

建立github pages

github pages 能夠爲咱們每一個 git 倉庫提供靜態網站的託管功能。

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

新建項目

首先須要爲咱們的網站新建一個倉庫（New repository）,好比： hello-pages

生成靜態網站

而後讓咱們在本地生成一個靜態網站

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 顯示發佈成功。頁面能夠正常訪問了。

你能夠在這裏查看此階段源碼

綁定域名

至此，咱們的 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 容許將靜態文件放在三個地方：

master 分支
master 分支的 docs 目錄下
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
複製代碼