Android 3 minutes read (About 425 words)

前言

延續 上一篇 假如不使用實體手機，那勢必要建立一個模擬器

所需環境與工具

以下以 Windows 10 + VSCode + 模擬器為 Android 為例：

安裝 Android iOS Emulator 套件

  1. 開啟 VSCode

  2. 安裝 Android iOS Emulator

安裝 Emulator 與相關的套件

  1. 進到 tools\bin 內開啟 cmd

  2. 列表出可安裝清單

    1
    $ sdkmanager --list

  3. 安裝 emulator、Intel x86 Emulator Accelerator (Intel 平台)

    1
    $ sdkmanager --install "emulator" "extras;intel;Hardware_Accelerated_Execution_Manager"

  4. 安裝 avd image
    以下以 28 版當例子：

    1
    $ sdkmanager --install "system-images;android-28;google_apis_playstore;x86_64"

  5. 加上環境變數 ANDROID_AVD_HOME
    假如資料夾路徑為 ~\.android\avd
    本機 -> 右鍵 -> 內容 -> 進階系統設定 -> 進階 -> 環境變數 -> 系統變數 -> 新增 -> 把 ~\.android\avd 加上去

開啟 Hyper-V 與 HAXM (Intel 平台)

  1. 搜尋 -> 輸入 “開啟或關閉 Windows 功能” -> 對 “Hyper-V” 打勾 -> 按 “確定”

  2. 重開機

開啟模擬器

假設已經有專案了

  1. 在 VSCode 內 -> 按下 Ctrl + Shift P -> 輸入 “Flutter: Launch Emulator” -> 選擇 “Create Android emulator”

  2. 等很長一段時間完會出現一個模擬器

  3. 就能利用此模擬器來 Debug 了

資料來源

  1. 用 VS Code 建置 Flutter 開發環境
  2. 硬體加速以提升模擬器效能 (Hyper-V 與 HAXM)
  3. How to set up devices for VS Code for a Flutter emulator
  4. avdmanager

App 3 minutes read (About 471 words)

所需環境與工具

以下以 Windows 10 + VSCode 為例：

安裝 Flutter SDK

  1. 到 這裡 有安裝說明

  2. 這裡 可下載最新版 (v1.12.13 + hotfix5 版本)

  3. 安裝後壓縮檔解壓縮並把 flutter 資料夾放到想要的位置
    (官方建議不要把 flutter 資料夾放到 C:\Program Files\ 內)

  4. 設定環境變數
    假如資料夾路徑為 C:\src\flutter
    本機 -> 右鍵 -> 內容 -> 進階系統設定 -> 進階 -> 環境變數 -> 系統變數 -> 編輯 -> 把 C:\src\flutter\bin 加上去

安裝 Java SDK

  1. 到 這裡 可下載 JAVA 8
    備註：請不要裝更新的版本，不然 Android SDK 會不支援

安裝 Android SDK Manager

  1. 到 這裡 下載 Command Command line tools

  2. 解壓縮資料夾並把 tools 資料夾放到想要的位置
    (在這裡以放到 C:\src\androidSDK 內為範例)

安裝 Android SDK

  1. 進到 tools\bin 內開啟 cmd

  2. 列表出可安裝清單

    1
    $ sdkmanager --list

  3. 安裝 platform-tools、platforms、build-tools
    以下以 28 版當例子：

    1
    $ sdkmanager --install "platform-tools" "platforms;android-28" "build-tools;28.0.3"

  4. 加上環境變數 ANDROID_HOME
    假如資料夾路徑為 C:\src\androidSDK
    本機 -> 右鍵 -> 內容 -> 進階系統設定 -> 進階 -> 環境變數 -> 系統變數 -> 新增 -> 把 C:\src\androidSDK 加上去

安裝 Flutter 套件

  1. 開啟 VSCode

  2. 安裝 Flutter Plugin

檢測環境

  1. cmd 下指令接受 license

    1
    $ flutter doctor --android-licenses

  2. 把 Android 手機接上電腦或使用模擬器

  3. 檢測環境

    1
    $ flutter doctor

出現類似以下畫面就算成功 (Android Studio 可以不裝)：

資料來源

  1. No valid Android SDK platforms found in C:\Android\android-sdk\platforms. Directory was empty.

Web 6 minutes read (About 962 words)

緣由

發文或登入時阻擋機器人 (bot)

版本

  1. v3：分數驗證 (Google 會回覆 0~1 之間的分數)

  2. v2：問題驗證 (要回答 Google 問的圖形之類的問題)
    (1) checkbox：勾選 “我不是機器人” 來驗證要求
    (2) invisible：藏在背景，有疑慮才需驗證

備註：目前 ios 只支援 v2 invisible

步驟

申請 reCaptcha key

這裡以 v2 checkbox 為例
先到 這裏 申請
介面如下：

標籤填名稱
類型勾選 “v2” -> “我不是機器人核取方塊”
網域填寫網址或是 app 的 package name，如果是本地端測試也要填個 localhost 與 127.0.0.1

複製 key

網站金鑰 (site key) 是前端用
密鑰 (secret) 則是後端用 (請保存好，小心外洩)

前端範例

以金鑰 = 6Lc3scAUAAAAAKtFexJH_-IBcgXj94IEyEORgLnm 為例

client.html 範例

在這邊模擬一個登入畫面

  1. 第 14 行；html 內放一個 hidden tag recaptcha-token 來存 token

  2. 第 17 行；html 內放一個 div tag recaptcha 來放 checkbox

  3. 第 19 ~ 20 行；底下再 load https://www.google.com/recaptcha/api.js 與 ./recaptcha.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">

<head>
    <title>reCAPTCHA V2 checkbox Test</title>
</head>

<body>
    <form id="myForm" action="http://localhost:7777/login" method="post">
        <label for="account">Account:</label>
        <input name="account" required><br />
        <label for="password">Password:</label>
        <input name="password" type="password" required><br />
        <input id="recaptcha-token" name="token" type="hidden" value="">
        <button>登入</button>
    </form>
    <div id="recaptcha"></div>
    <!--js-->
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
    <script src="./recaptcha.js"></script>
</body>

</html>

recaptcha.js 範例

  1. 第 9 ~ 13 行；recaptcha 功能綁定到 recaptcha div 上

  2. 第 16 ~ 18 行；render 的 callback 把拿到的 token 存回 recaptcha-token 內

  3. 之後就能利用 form post 把 account、password、token 一起傳給後端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const myForm = document.getElementById("myForm");
const recaptcha = document.querySelector("#recaptcha");
const recaptchaToken = document.querySelector("#recaptcha-token");

// v2 checkbox key
const siteKey = "6Lc3scAUAAAAAKtFexJH_-IBcgXj94IEyEORgLnm";

function onloadCallback() {
    window.grecaptcha.render(recaptcha, {
        sitekey: siteKey,
        size: "checkbox",
        callback: updateToken
    });
}

function updateToken(token) {
    recaptchaToken.value = token;
}

Android 範例

請參考 這裏

iOS 範例

請參考 這裏

後端範例

這邊使用 express 來開一個後端 Server，axios 來發 request
要特別注意的是 siteverify API 雖然 method 是 POST
但只能用 querystring 來傳遞額外參數

  1. 第 12 行；接收 token 等參數

  2. 第 18 行；把 __your_secret__ 替換成申請的密鑰

  3. 第 15 ~ 21 行；把 secret、token 當參數 request siteverify API

  4. 第 22 ~ 31 行；收到 siteverify API 的 Response，如果 success 是 true，代表驗證成功，第 24 行以後可作後續的 login 行為

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const axios = require("axios");
const express = require("express");
const bodyParser = require("body-parser");
const querystring = require("querystring");

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post("/login", async (req, res) => {
    const { account, password, token } = req.body;

    const { status, result } = await axios
        .post(
            "https://www.google.com/recaptcha/api/siteverify",
            querystring.stringify({
                secret: "__your_secret__",
                response: token
            })
        )
        .then(result => {
            const { success, "error-codes": errorCode } = result.data;
            if (success === true) {
                // login code...
                return { status: 200, result: { msg: "Success" } };
            } else {
                // verify error case
                return { status: 404, result: { errorCode } };
            }
        });
    res.status(status).json(result);
});

app.listen(7777);

成品畫面

如有設定成功的話會如以下畫面：

備註：如果 “我不是機器人” 區塊沒出來的話可去 控制台 確認有沒有把網域加進去

Error Code

如果 response 內的 success === false 時
error-codes 會有錯誤訊息的 code
詳細可參考 這裡

資料來源

  1. Developer’s Guide
  2. reCAPTCHA v2 Invisible，不用再把「我不是機器人」列入頁面設計考量
  3. reCaptcha Form with an Amazon AWS™ serverless backend environment
  4. How to Setup a Serverless Contact Form with AWS Lambda, reCAPTCHA and Storyblok
  5. 簡介:給人類方便給bot困難
  6. 如何整合“No CAPTCHA reCAPTCHA”（驗證碼）到你的網站裡

Web 7 minutes read (About 994 words)

緣由

上一篇 網誌建完之後只有基本的樣式
可能有額外需求要設定，固寫在此篇

備份

hexo-cli 只上傳轉換後的 html 檔
如需要備份 markdown 原始檔與專案設定檔可安裝 hexo-git-backup

  1. 安裝

    1
    $ npm i hexo-git-backup

  2. _config.yml 增加設定：

    1
    2
    3
    4
    backup:
        type: git
        repository:
            github: http://github.com/yourname/yourname.github.io.git,branchname

    這裡的 “yourname” 改成你的 github 帳號
    “branchname” 改成備份的 branch name

  3. 設定完就能下指令備份：

    1
    $ hexo b

壓縮靜態網頁

這邊是用 hexo-yam
直接下指令安裝：

1
$ npm install hexo-yam

安裝完預設就會會啟動了，無須另外設定
如需特調細項可再去 _config.yml 做額外設定

分享功能

進入文章後預設底下會有 error 區塊

我們可以參考專案的 /themes/minos/_config.yml 檔案

minos 的分享預設是用 sharethis

  1. 註冊一個帳號

  2. 以 Domain 新增一筆 Property

  3. 選擇一個想使用的樣式，裡面可再做細項設定

  4. 設定好樣式後點選 “Get the Code”

  5. 複製 js code 的 “src” 的部分 (只要網址就好，不用整個 code)

  6. 網址複製到 /themes/minos/_config.yml 的 “share” 的 “install_url”

  7. 專案 deploy 後點選 “Verify Manually”

  8. 把線上站隨便一篇的網址複製過來進行檢測，檢測成功的話紅色區快會消失

  9. 設置成功的話網誌倒數第二塊會出現分享功能

留言功能

minos 的分享預設是用 disqus

  1. 註冊一個帳號

  2. 新增一個 Site

  3. 新增完後點選 “general” 並複製 “Shortname” 欄位

  4. short name 貼到 /themes/minos/_config.yml 的 “comment” 的 “install_url”

  5. 設置成功的話網誌最下方會出現留言功能

追蹤

這邊是用 Google Analytics

  1. Google 帳號登入

  2. 新增網站

  3. 追蹤碼貼到 /themes/minos/_config.yml 的 “Other plugins and their settings.” 的 “google-analytics” 的 “tracking_id”

調整網站 Menu

Menu 是這個：

可到 /themes/minos/_config.yml 來做調整：

更換 DNS Server

Google Domains 的功能滿陽春的
因此換到 CloudFlare 多了一些分析功能 (有些要付費)

  1. 註冊帳號

  2. 點選 “Add a Site”

  3. 填入 Blog 網址後點選 “Add site”

  4. 等待 CloudFlare 掃描
    基本上 “電子郵件轉寄” 與大部分 “自訂資源記錄” 的設定都會完整複製過去
    有缺少再補即可 (如 VPS 設定沒有複製過去)

  5. 複製 CloudFlare 提供的 DNS Server

  6. 回到 Google Domains -> DNS -> 名稱伺服器
    選擇 “使用自訂名稱伺服器” 並填入剛複製的 DNS Server 網址

更新 Blog 後刪除 Cache

使用 CloudFlare 後，網站就會有了 Cache 功能
如果你更新網站想馬上看線上站的結果
可到 Caching -> Purge everything，點選 “purge everything”

Web 7 minutes read (About 999 words)

緣由

有時會有學習或工作用的電腦沒有實體 IP (在內網)，但又需要連線到那台電腦
這時可以利用 Reverse SSH Tunneling 機制來連線

所需環境與工具

  1. 一台有實體 IP 的伺服器
    如沒有可購買 VPS，如 Linode，最便宜方案一個月 5 美金

  2. OpenSSH
    Linux 有內建
    Windows 10 可從 設定 來啟用

  3. autossh (選用)

範例環境介紹

MachineAccountIPPortInfo
ServerAuserA192.168.0.10122Private IP (內網；目標電腦)
ServerBuserB149.12.34.561234Public IP (外網；中繼電腦)
ClientuserUser (你的電腦)

你想從 Client 這台電腦連到工作用的電腦 ServerA，預期連線流程大概如下:

1
Client -----> ServerB --| 防火牆 |--> ServerA

又因為 ServerA 沒有實體 IP，ServerB 無法直接連到 ServerA
可以利用 Reverse SSH Tunneling 機制
ServerA 先連到 ServerB 建立隧道:

1
ServerB <==| 防火牆 |== ServerA

ServerB 再依靠該隧道 port 1234 連到 ServerA:

1
ServerB ≡≡| 防火牆 |≡≡> ServerA

免密碼登入

連線時會需要帳密
如果想免密碼登入可執行此步驟把 public key 傳給對方

1
2
[userA@ServerA] $ ssh-keygen # 產一對 key
[userA@ServerA] $ ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected]   # 把 public key 送給對方

目標電腦設定

Server A 開一個隧道到 ServerB

1
[userA@ServerA] $ ssh -NfR 1234:localhost:22 [email protected]    # f 代表背景執行

連到目標電腦

方法 1

Client 先連到 ServerB

1
[user@Client] $ ssh [email protected]

因為前面 ServerA 已經開一個隧道過來
所以 ServerB 就能連到 ServerA 了

1
[userB@ServerB] $ ssh userA@localhost -p 1234

方法 2

使用一個指令來達成 “先連到 ServerB 再下指令連到 ServerA”

1
[user@Client] $ ssh -t [email protected] "ssh userA@localhost -p 1234"

方法 3

直接以 ServerB 當跳板連到 ServerA

1
[user@Client] $ ssh -o "ProxyJump [email protected]" userA@localhost -p 1234

或是

1
[user@Client] $ ssh -J [email protected] userA@localhost -p 1234

方法 4 (推薦)

原本 ServerB 只能透過 localhost 來連到 ServerA
此方法是 Server A 設定時加上 “-g” 這個 option
(允許遠端主機連到本地的轉發 port)
讓 Client 透過 ServerB 的 port 直連到 ServerA

  1. 仿照前面 開隧道 時 ServerA 改下指令：

    1
    [userA@ServerA] $ ssh -gNfR 0.0.0.0:1234:localhost:22 [email protected]

  2. ServerB 要設定 GatewayPorts：

    1
    [userB@ServerB] $ vim /etc/sshd_config

    裡面的 “GatewayPorts” 改成 yes (預設是 no) 並重開 sshd 服務:

    1
    [userB@ServerB] $ systemctl restart sshd

  3. 去防火牆把中繼 port 設為允許 (ssh 是 tcp)

    1
    [userB@ServerB] $ iptables -A INPUT -i eth0 -p tcp --dport 1234 -j ACCEPT

    把 iptables 設定存起來

    1
    [userB@ServerB] $ iptables-save

  4. Client 下指令 (記得這邊 account 要填 ServerB 的登入帳號)

    1
    [user@Client] $ ssh [email protected] -p 1234

其他相關指令

查看網路狀態

1
$ netstat -a|less       # less 代表翻頁檢視

登出

登入後如果想登出可執行以下指令：

1
$ exit

關閉 SSH Tunnel

以下為列出 process 資訊的指令：

1
2
3
$ ps -ef|grep 1234      # 列出使用 1234 port 的 process
$ ps aux|less           # 列出正在進行的 process
$ ps aux|grep ssh       # 列出 ssh 相關的 process

找到 process id 後就能刪除：

1
$ kill -9 [process id]  # 刪除指定 process id 的 process

斷線時自動重連

有連線就有可能斷線
這時候 serverA 就可以用 autossh 來建立 Reverse SSH Tunneling:

1
2
# -M 後面是監聽用的 port, 不可跟 localhost 前的 port 一樣, 設 0 代表強制關閉
[userA@ServerA] $ autossh -M 0 -o ServerAliveInterval=10 -o ExitOnForwardFailure=yes -gNfR 1234:localhost:22 [email protected]

或是可使用 cmd-boost 這個工具

如果要關閉 autossh：

1
$ pkill -3 autossh

參考資料

  1. Reverse SSH Tunnel實際運用，搭配auotssh永不斷線，putty建立反向tunnel
  2. 實現免密碼 ssh 登入遠端主機
  3. 25 Best SSH Commands / Tricks
  4. ssh通过代理登录远程主机及穿越跳板机
  5. What Is Reverse SSH Tunneling? (and How to Use It)
  6. SSH反向代理使用心得
  7. Reverse port tunnelling
  8. SSH COMMAND

Others 18 minutes read (About 2674 words)

個人狀態

學經歷：國立資工學、碩畢，3 年 PHP 全端 + 2 年 NodeJS 後端經驗
8 月初臨時起意準備弄好履歷就開始遠征 (長征?)
以下公司為有面試或電訪公司，按照時間排序
理想薪資統一給年薪，預計到職日都說 10 月
N 為某一份工作的月薪

面試公司

利頡資訊

職位：高級後端工程師 (自投)
感想：接大型案子的公司 (不接官網之類的)；問很多程式語言間的差異、作業系統、DB 規劃，問的很雜又細，除了 JS 以外被電到快飛起來；如果想湊個面試經驗可試試。
結果：Offer Get (N-2k * 14)

VMFive

職位：Backend Engineer (對方找的)
感想：網路資料已好幾年沒更新的公司，目前轉型廣告投放 + 接案；對方 HR 在 104 上給錯公司地址，剛好那地址周圍數百公尺沒有門牌沒路標，讓我在那 1X 分鐘的路程來回繞了 4 次，問了路人、查了 Google Map、打電話給 HR 都找不到目的地，最後是查了官網才找到真正的地址；原本準備 45 分鐘來應付 1X 分鐘的路程，最後卻反而遲到 15 分鐘才到該公司…；事後發現就算地址給錯，但 Google Map 當初指的路才是對的… (Google 大法好!!!)
結果：無聲卡

廣達研究院

職位：Full-Stack Developer (對方找的)
感想：桃園林口的代工廠，部門有點像硬體廠內的軟體公司，算是一個獨立自主的單位；開場先考類多益後面試，因英文沒過一週後補考 + 二面；二面完隔天給口頭 Offer，只是核薪時對方 HR 要求提出各種文件當年資證明，挺複雜的…
結果：Offer Get (N+3k * 15?)

奔騰網路科技

職位：Platform Developer (對方找的)
感想：公司在台北新光大樓的樓上；面完感覺還不錯，但對方好像因預計到職日還有一個月，所以希望我再看看，半個月後有興趣再來二面，半個月後有打過來聊完說會幫我約時間，然後就沒然後了，大概因對方覺得我想二面的意願沒有很大的感覺?
結果：對方說要安排二面卻無聲卡

仁寶

職位：NodeJS 後端工程師 (對方找的)
感想：內科的代工廠，接待區跟前測區非常不像一個大公司該有的樣子 (交誼廳擺幾台筆電就當成了前測與等待區了…)；開場先考英文然後到別棟去面試，剛好主管沒空中，所以由部門內的 2 位工程師來聊天，其中 1 個面到一半也中離，一週後主管又寄信給我邀請我面試，因對方口吻很像第一次接觸，跟對方提醒後對方重新確認並邀請二面，二面主要與 2 位主管聊天與看一下 Coding Style，又一週後給口頭 Offer；以面試感想來說前測場地不是很好，時間上二面與電訪都約下午 5 點以後 (面試官太忙沒空)，感覺挺妙的…
結果：Offer Get (N+5k * 15?)

Canner 易開科技

職位：後端工程師 (對方找的)
感想：公司在幸福站對面的住家內，新公司位址在別處裝潢中，是個超迷你的新創；一面為電訪問各種技術，二週後二面為上機考；老闆年紀跟我差不多但是是位各種技術底子很深厚的人，感覺假如加入打拼應該可以學習很多?
結果：感謝函

書亞集成

職位：後端工程師 (自投)
感想：公司離內科站超近，主營運現有的古典音樂網站；整場面試純雙方互相自介，沒任何技術問題；面試官是一個講求態度與高效率的人 (不要浪費自身生命與他人時間)，也希望找進來的人才能培養為軟體架構師，所以該公司的錄取標準比較特別，為非面試官的其他同事投票，所以會記錄面試者的言行舉止以供投票參考。
結果：感謝函 (大概是我面試時白目的問了被對方制止的問題導致扣分很多)

awoo 阿物

職位：PHP 工程師 (對方找的)
感想：公司在馬偕醫院附近的頂樓，主負責各網站 SEO 的優化；面試前先筆試，筆試完第一關為 2 位 RD 主管 (or 工程師) 面試，稍微自介與檢討筆試內容；第二關為 PM 面試，不知道是因為時間接近中午或是薪資談不妥，第二關最後面有種面試官要強行結束面試趕我走的感覺…
結果：無聲卡

沛司科技

職位：Web front-end 軟體工程師 (對方找的)
感想：公司在南港新創基地，目前產品有單車的 App；面試第一關為 2 位現職工程師面試，對方感覺實力很強，但其中一位一直有種要否定面試者經歷的感覺，讓人感覺不快…；第二關為跟美女老闆談公司狀況與福利。
結果：無聲卡

群暉

職位：Web & System Developer (對方找的)
感想：公司剛搬到亞東醫院附近沒多久，大樓內沒美食區，目前只能去學校附近找吃的；面試粗估有四關，第一關跟 HR 自介；第二關來了位資深的女工程師直接白板題：演算法三題與 SQL 語法一題，雖然有解出來，但耗時太久 (一小時半) 無法到下一關，半個月後收到感謝函。
結果：感謝函

遊戲橘子

職位：約聘工程師 (獵頭找的)
感想：公司雖在內科但是離捷運站有段路，要負責的內容為 beanfun 的後台製作；面試官有事少 1 人，對方問很多架構層面的問題；從面談中覺得對方算是不想花人事成本，只願意先約聘的公司，而且從面試官口中得知該職位要因應各種節慶 + 上頭決策而瘋狂加班，最高紀錄是過年前臨時更改活動內容讓工程師加了 120 小時的班，內心只有一個想法：怕.jpg。
結果：拒絕二面

悠福科技

職位：後端工程師 (對方找的)
感想：公司在松江南京附近，新創公司，感覺有點舊舊破破的，主負責數位行銷或是程序化廣告的部分；唯一一間面試卻沒提供任何飲用水的公司 (大扣分)，跟面試官互相自介完就結束了，順便一提上班的電腦要自備。
結果：拒絕二面

Verizon Media (Yahoo)

職位：前端工程師 (自投)
感想：第一關為電訪 (多名面試官圍繞電話筒的感覺)；原以為 JD 上有寫 NodeJS，會問一些後端之類的問題，結果對方真的只問了純前端的問題，太久沒用整個被電到飛起來；對方說因為同事有外國人，假如有後續要英文面試。
結果：無聲卡

趨勢科技

職位：約聘工程師 (獵頭找的)
感想：公司在台北教育大學附近，職缺需求要用 Python 做一個釣魚網站學習平台，跟 2 位面試官互相自介，沒任何技術問題；因為公司政策，各部門有人數上限，部門只好花錢找人力，除非有人離職，不然約聘轉正有很大的疑慮。
結果：無聲卡

逸志科技

職位：研發工程師 (對方找的)
感想：市政府附近的住家內，金融科技新創，職缺需求要 Java；老闆有 CFP 證照又有某金控還證券商的總經理經歷，是個非常有自信的女強人，要我直接拿名字 Google 就能認識她了；每天至少加班一小時以上，感覺會很累但是是一個可以學到很多東西的地方?
結果：無聲卡

國泰金融 (大數數)

職位：NodeJS 工程師 (對方找的)
感想：總部在市政府附近，是個號稱用各種新技術的部門，目前要整合各種舊系統；工作量不會因各種節慶或決策之類的影響，準時上下班，有點像使用新技術的公務機關? 其中一位面試官一直問研替離職原因的細節，感覺超沒禮貌…；面試過程因規定不能提公司福利的部分，要以後跟 HR 的第 N 次面試才會談，但你們不只缺人，徵一個人跑完流程要快 50 天 (對方提供的數據)，真的沒問題嗎…
結果：無聲卡

總結

  1. 英文很重要
    假如要投大廠很難不碰到英文，因為會有以下幾種情況：
    (1) 要求英文 CV
    (2) 英文電訪 or 面試
    (3) 面試前先考類多益，考過了再開始面試
    (4) 前測 or 上機考的題目全英文，而且題目長得跟閱讀文章一樣
    資訊業很多機會都是外商職缺，英文一差就會刪掉很多機會

  2. 刷 LeetCode
    有些公司面是直接白板題或上機考
    刷題除了訓練解析速度外，維持程式手感很重要的

  3. 從準備開始丟履歷前 1~2 個月就要開始準備
    畢竟求職前就有一堆前置作業要忙：
    (1) 重新複習資訊類觀念 (前後端、作業系統、資料結構、系統架構、DB 規劃…等等)
    (2) 刷 LeetCode
    (3) 整理作品集
    (4) 修整履歷
    每一項都是耗時耗力的工作….

Web 7 minutes read (About 1067 words)

緣由

原本想要一個較個人風的 email
參照 網路上 得知 Google Domains 不只提供 domain 同時提供指定 email 轉寄的功能
就直接照 這篇 來購買一個 domain
Google 相較其他網域商，雖然價格貴一點點，但每年價格都很一致
不像有些強打第一年優惠但第二年以後價格快翻倍跳反而比 Google 的還貴
在這邊最便宜的一年 9 USD，商用字詞的約 1X USD 即可入手 (我是買 12 USD 的)

設定 Email 轉寄

  1. 購買網域後，進入設定頁 -> 電子郵件

  2. 最下方 “電子郵件轉寄” 填入你想要的別名與轉寄的地址，儲存後就會轉寄了

利用 Hexo 與 GitHub Page 建立免費的靜態 Blog

所需環境與工具

  1. 一個 GitHub 帳號

  2. NodeJS

  3. Git

建立一個 Repository

  1. 登入 GitHub

  2. 建立 Repository

  3. name 填入 yourname.github.io (yourname 請改成你的 GitHub ID)
    下方的 type 記得請勾選 “public”

安裝 Hexo

1
2
3
4
$ npm i hexo-cli -g
$ hexo init blog
$ cd blog
$ npm i

安裝 Hexo Git

1
$ npm i hexo-deployer-git

安裝 Blog 主題

這邊我們以安裝 minos 為例子
其中 minos 需要 hexo-renderer-sass 這個套件

1
2
$ git clone https://github.com/ppoffice/hexo-theme-minos.git themes/minos
$ npm i hexo-renderer-sass

調整設定

在 blog 資料夾內可以看到 “_config.yml” 這個設定檔案
打開後在中下方有個 theme 的部分改成:

1
theme: minos

最下方 deploy 的部分則改成：

1
2
3
4
deploy:
    type: git
    repository: http://github.com/yourname/yourname.github.io.git
    branch: master

這裡的 “yourname” 改成你的 github 帳號
其他更詳細的設定可參考 這裡

開啟 Server

1
$ hexo s -p [port]

預設在 http://localhost:4000 看 Local Page (裡面會有一篇 Hello World)

建置靜態網頁

把 Markdown File 轉成網頁

1
$ hexo g

發佈到 GitHub Page 上

1
$ hexo d

或是你也可以建置、發佈一起做

1
$ hexo d -g

網站轉址

既然我們已經有 Google Domain 跟 Hexo + GitHub Page 產的 Blog，該是串起來的時候了

設定 DNS

到 Google Domains 設定頁 -> DNS -> 自訂資源紀錄
添加一筆 Type A，IP 如下：

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

再添加一筆 CNAME：
name 填 subdomain (例如 “blog”)
data 填 yourname.github.io (yourname 請改成你的 github ID)

填完顯示如下：

設定 GitHub Page 的 Domain

  1. 在 /blog/source 資料夾建立 CNAME 檔案

    1
    2
    $ cd /blog/source
    $ touch CNAME

  2. 檔案內填寫入

    1
    subdomain.domain.com

    假設我的 subdomain 是 “blog”
    我買的 domain 是 brchen777.com
    那在這邊要填入的會是 blog.brchen777.com

  3. 假設有填好，進入 GitHub Repository -> Settings -> GitHub Pages 區塊，會有 “Your site is published at XXX” 的訊息，其中 XXX 就是 blog 的網址，顯示如下：

  4. GitHub Page 有內建 HTTPS，網站設定好一段時間之後就有 “Enforce HTTPS” 可選 (如上圖的下方)

設定多個 Subdomain 指向同一個 GitHub Page

因為 GitHub Page 不支援多個 CNAME 設定，所以其他的 subdomain 要自行設定轉址
到 Google Domains 設定頁 -> DNS -> 綜合記錄
假設要把 “www” 這個 subdomain 轉址，新增一筆子網域轉址如下：

以這篇案例來說，www.brchen777.com 與 brchen777.github.io 都會指到 blog.brchen777.com

參考資料

  1. 在 Google Domains 註冊購買網域名稱教學
  2. Hexo+GitHub，新手也可以快速建立部落格
  3. 如何搭建個人 Blog 使用 Hexo + Gitpage
  4. Hexo - 前端也能建置部落格！更換主題與發表文章篇
  5. Configuring a custom domain for your GitHub Pages site
  6. 自訂網域名稱：Google Domain
  7. Troubleshooting custom domains and GitHub Pages
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×