三分鐘建成個人網站，逼格極高（持續整合）

wuyafeiJS發表於2019-01-02
網站

最近，在一次日常舔大佬的途中，發現某位大佬(Dan Abramov)的 Twitter 有個文章連結，果斷點了進去。進去之後，眼前一亮，這是他的個人網頁，頁面極其簡潔，操作流暢。作為一名合格的舔狗，肯定要果斷抄襲。。。啊不。。。借鑑一下啦戳這裡。順便說下，裡面文章乾貨很多，都是大佬創造 React 的心理歷程，後續我準備一一翻譯過來，嘿嘿。

原來大佬也是引用的一個開源庫gatsby。這是一個 React 靜態網站構建器。

使用它，你的網站可以同時享有靜態網站和 React 的優點。通過載入外掛，可以做到支援多種資料資源，比如 Markdown，WordPress 的文章等。支援自動程式碼分割，圖片優化，預載入，懶載入等等。關鍵是他沒有後端互動，構建個人網站你甚至不需要買伺服器和域名，直接部署在 github pages 上即可。

生成網站只需要兩步：

  1. npm install -g gatsby-cli
  2. gatsby new my-blazing-fast-site

然後在專案根目錄下執行gatsby develop，訪問http://localhost:8000。

到這裡，你的第一個個人網站就執行起來了，是不是很簡單？然後你只需在src/pages/目錄下面新增 Markdown 格式的文章即可。

接下來我們要做的就是將網站釋出到線上，讓其他人看到。兩種方法：

  1. 釋出到 github pages 。
  2. 釋出到自己的伺服器上面。

這一步也很簡單。

第一種方式，專案打包後執行git subtree push --prefix=dist origin gh-pages。把專案推到 gh-pages 分支，然後訪問XXX.github.io/專案名/。

第二種方式，用scp或者rsync工具把專案推到自己的主機，然後配置nginx：

server {
  ...
  location / {
              root /home/blog/MyBlog/public; # 專案路徑
              index index.html;
  }
  ...
}
複製程式碼

然後訪問主機 ip 即可。

接下來我們來實現整合部署，讓我們只需通過git push這一操作，就能實現網頁的更新。

這裡我們要用到travis，用過 jenkins 的朋友對這個應該也不會陌生。

第一步，關聯自己的 github 專案，戳這裡：

三分鐘建成個人網站，逼格極高（持續整合）

第二步（部署到自己的主機），我們在專案的根目錄下新建一個 travis 配置檔案.travis.yaml：

language: node_js #執行環境
node_js:
  - 8.9.0
cache:
  directories: #快取目錄，讓travis伺服器快取node_modules 增加打包速度
    - node_modules
before_install: #這一步很重要，將本地私鑰傳到travis伺服器。它可以讓travis伺服器免密ssh到你自己的主機。
  - openssl aes-256-cbc -K $encrypted_2a36be4ef7a3_key -iv $encrypted_2a36be4ef7a3_iv
    -in id_rsa.enc -out ~/.ssh/id_rsa -d
  - chmod 600 ~/.ssh/id_rsa
after_success:
  - ssh root@xxx.xxx.xxx.xxx '/home/blog/build-blog.sh'
branches: #關聯github的部署分支
  only:
    - deploy #只有該分支發生變化時，才會觸發自動部署
addons:
  ssh_known_hosts: xxx.xxx.xxx.xxx

複製程式碼

before_install的內容是通過命令列自動新增的，需要經過以下步驟：

  1. 首先在本地生成 ssh 金鑰對：ssh-keygen -t rsa
  2. 將公鑰複製到自己的遠端主機上：ssh-copy-id -i ~/.ssh/id_rsa.pub root@123.123.123.123
  3. 將私鑰加密傳輸到 travis，解決 ssh 登入的加密問題。
# 安裝travis
sudo gem install travis
# 使用github賬號登陸travis
travis login --auto
# 切換目錄到專案根目錄，執行
travis encrypt-file ~/.ssh/id_rsa --add # 這裡就生成了 before_install的內容
複製程式碼

另外，在使用 ssh 登陸的時候會確認主機資訊，travis-ci 自動化執行無法進行互動操作，所以在.travis.yml 中新增以下內容跳過確認：

addons:
  ssh_known_hosts: xxx.xxx.xxx.xxx
複製程式碼

接下來我們就可以通過 ssh 登陸到遠端主機之後，做一系列操作，這裡我們直接寫了個 sh 指令碼/home/blog/build-blog.sh：

cd /home/blog/MyBlog
git pull
npm install
npm run build
echo "Build success."
複製程式碼

以上，我們就完成了持續整合的配置操作。接下了只需將我們的專案 merge 到相應的 github 分支，就可以測試我們了自動部署了。

最後，如果你沒有自己的伺服器，那也可以用 travis + ghpages 的方式實現。配置.travis.yaml，像這樣:

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN # Set in travis-ci.org dashboard
  on:
    branch: master
複製程式碼

這裡就不一一贅述了。

本專案地址：MyBlog

相關文章