三分鐘建成我的網站，逼格極高（持續集成）

最近，在一第二天常舔大佬的途中，發現某位大佬(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