Jimmy's Code

Want to be a better Coder
^

將自己的履歷升級-接Travis 和EmailJS、Particles

2019-07-21

最近自己無聊開了很多坑….開了line bot 的坑,寫了關於Bible 的line bot 也寫了關於玩味性質的line bot ,學習Angular Ng-rx (這個好難啊!)。。。 最近做比較多的是修復我履歷頁的TravisCI 花了超多時間一直無法把gulp deploy 和 travis 做整合,後來索性就不用gulp deploy 指令了,直接將資料夾push 到github page 當中啦!

如果想要知道之前怎麼寫的可以看看我這篇文章:利用Gulp 製作自己的履歷

後來才發現原來我不是原創… NPM 的市場已經有一個Gulp-Resume 套件… 哈哈,我幹嘛那麼辛苦刻這麼久呢….不過也藉這個機會把整個履歷大改寫,調整了很大幅度的功能,也在過程中學習不少,以下也筆記一下讓大家可以參考看看

串接 Travis CI

這次我的履歷Project 原本是用指令gulp deploy ,而加入travis.yml 也只是幫我呼叫這個指令而已…. 而在前面文章也有談到我將remote git 作出調整,直接以username/password 做為登入….. 然而這一切在我開啟github 2-factor 機制及改密碼後就各種失敗…有一段時間我的Travis 貼紙都是紅色的failed 呢…. 試了上千百萬次,仍舊失敗,無法解決問題就只好解決問問題的人(大誤!),所以最後改成github page… 意外發現的好簡單啊XD 然後現在的travis 貼紙都是可愛的綠色呢!

先簡介一下什麼是Travis CI 好了,他就是一個可以讓你自動化部屬的工具,有點像是gitlab CI , 或 Jenkins,你可以預先定義一大堆的指令在.travis.yml 這個檔案當中,然後travis CI 就會幫你自動化這些指令喔….之所以要使用Travis 是因為我覺得他似乎對Github 還蠻友善的,而且我發現他超厲害的,可以部署github page 以外也可以玩FTP ,只要你 script 寫對就好囉!接下來就讓我講講怎麼用travis 部署到github page branch吧!

首先Travis 官方其實就提供你關於github page 的範例,其實你就可以好好的研究好好的拿去玩了…

簡單來說你先設定給travis 用的github token , 這部分你可以用去github 的後台 ->Setting -> Developer settings -> Personal access tokens ,然後你記得要給他關於gist 和 repo 的權限,得到token之後就貼在.travis.yml 裡面…(你問我明碼這很不安全?放心,Travis 可以讓你加密喔)

首先將travis 安裝在你的電腦當中,總之安裝travis 的流程我懶得講,自己去Google 吧,我把寶藏都放在那裡了XD 安裝完之後你只要確認以下指令有沒有正確回傳數字就好~

$ travis --version
$ 1.8.10 #什麼數字不重要,只要是數字就好:)

你可以使用這個指令加密你的token,記得你目前是在你放.travis.yml 的目錄下喔

$ travis encrypt GITHUB_TOKEN="你剛剛在後台設定的github token" --add
# 其實你的GITHUB_TOKEN 可以替換成任何的名字 舉例來說Joanne之類的,Joanne是誰?這不好說啦......

然後你就在你的.travis.yml 看到多了一行,我不知道你的secrue 後面會接啥,總之就是我們無法直接一眼看穿的內容…..

env:
  global:
    secure: (.....)

加密之後然後呢?其實你就可以在你的script 直接用你剛剛定義的名字,以剛剛的案例來說你就可以使用GITHUB_TOKEN,是不是很神奇海螺呢?Magic !

好啦,一切萬事俱備只欠東風,到底怎麼樣可以push 到github page 呢?範例給他抄下去就對了!

deploy:
  skip_cleanup: true
  email: [email protected]
  name: r567tw
  provider: pages
  github_token: "$GITHUB_TOKEN"
  local_dir: "public"
  on:
    branch: master

說明文件底下有個 Further configuration ,那就是你可以客製化的東西,以我用這個履歷專案來串travis 的例子說明,當我執行script 裡面的gulp 之後,會有一個public 資料夾,那其實就是我們要放在github page 的資料夾,github page 只讀靜態檔案嘛! 你丟給他php , rb , jade 他都吃不下去的!!!

所以local_dir 設定為public , github_token 帶上我們剛剛加密的github token ,記得要加$字號喔,然後你可以設定email 和name …我是設定我自己的啦,當然你也可以設定別人的陷害別人(誤?

整個.travis.yml 就長下面這樣!

language: node.js
node.js: -"7" -"8"
install:
- npm install
- npm install --global gulp-cli
- npm install -g bower
- bower install
script:
- gulp
deploy:
  skip_cleanup: true
  email: [email protected]
  name: r567tw
  provider: pages
  github_token: "$GITHUB_TOKEN"
  local_dir: "public"
  on:
    branch: master
env:
  global:
    secure: (......)

前面就是設定我們本機之前會設定的那些東西麻,因為travis 一開始deploy一定是一個超級空白的機器,所以你要餵給他一些可以讓我們專案運行的工具與軟體…..然後gulp完之後會有個public 資料夾,deploy 就push 這個資料夾到github page 就打完收工!

調整layout 與內容、Refactor

沒想到紀錄Travis 這麼麻煩….. 讓這個文章落落長了… 所以後面不多說,就是各種調整resume.json 的架構,然後調整layout ,原本index.jade 長達一百多行的code 被硬生生拆分到content 資料夾底下,把那個點往下的按鈕做成Mixin ,好讓這份code 可以重複使用…是不知道自己會不會改天黑白來又把content 底下的jade 全部合併哈哈XD,另外更加上聯絡的表單(等等我會說明這個連絡表單怎麼做的,他是真的可以寄信給我的喔!!)以及原本白白的背景改成使用炫炮功能極高的particles.js ,真的很炫炮!如何使用particles.js 可以參考他的文件,或者你也可以翻翻我的履歷專案打開source/js/all.js,然後一開始particles.js 會製作成一個canvas,但我希望particles.js 當作我的背景啊,所以我就參考了這個stackoverflow 的方式修改我的css…,打完收工!

聯絡我們的表單

這部分原本我是想使用IFTTT的服務,但我發現到他只能給3個Value 而且Value 還不能有客制的Name ,所以後來找到有人寫的文章討論如何只用前端寄信,便選擇了EmailJs 這個服務串接。雖然免費方案只允許使用一個月兩百封,但我想也夠用了啦! 我最好會有兩百個人會來找我啦XD

首先先是設定一下emailJS 引入CDN 後加入自己的 user_id 初始化它,你可以再EmailJS 的後台-> installation 找到這段類似的code

<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      emailjs.init("{USER_ID}");
   });
</script>

最後就是開始寄信啦,找你EmailJS 後台-> Email Template 然後修改成你要的內容,使用’Copy Code’ 這個部分,你會看到類似底下的code

var template_params = {
   "name": "aaa_value",
   "sender": "bbb_value",
   "subject": "ccc_value",
   "body": "ddd_value"
}

var service_id = "default_service";
var template_id = "{template_id}";
emailjs.send(service_id, template_id, template_params);

之後將這段js code 和預備好的連絡表單整合起來就好啦,你可以使用than 接下emailJs 回傳回來的response 藉此提醒使用者寄送成功或寄送失敗 (因為emailjs.send 其實是一個promise )如下

  var template_params = {
      "name": document.ContactForm.name.value,
      "sender": document.ContactForm.sender.value,
      "subject": document.ContactForm.subject.value,
      "body": document.ContactForm.body.value
  }
  
  var service_id = "default_service";
  var template_id = "{template_id}";

  emailjs.send(service_id, template_id, template_params)
    .then(
        function(response) {
            alert('寄送成功喔!請靜候回覆');
            document.ContactForm.reset();
        },
        function(error) {
            console.log("FAILED", error);
            alert('寄送失敗,如有問題請直接以信箱聯絡我');
        }
  );

總結

第一次寫這麼長的文章…好累….很久沒寫技術文章了….未來計畫要寫關於Magento 系列及python web 系列的文章,最近說也寫關於line bot 的project ,改天或許我也可以談談串接他的這個部分,希望自己寫越來越多side project XDD

然後其實我這個專案因為放在github ,因此我也歡迎大家來修改或者拿我的resume.json 改成自己的內容發佈自己的履歷喔!(但要記得知會一下作者我啊!)

小君曰:使用炫炮的particles.js 讓我的履歷看起來好潮喔XDD

r567tw

住在台北的一位台東developer,最喜歡"忠心"這個形容詞。這一生希望完成三件事:寫一本書、站在TED演講並且想要成為福音及各種學科的橋梁,希望自己能從基督教的思考框架出發與各學科傾聽、回應、對話