Edmond Yip

Edmond Yip
新手 VueJS 2 + Webpack 開發設定

VueJS

新手 VueJS 2 + Webpack 開發設定

不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。 開發環境 為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。 下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。 順序解說一下 * Beautify - 用來快速整理頁面
中文Web Fonts的選擇2017

Web Fonts

中文Web Fonts的選擇2017

在網頁中做用中文字體一直都是中文網頁設計師最煩惱的問題，現在網上有不少解決方案： Google Fonts Early Access 其中Google fonts提供完全免費的服務，不過只有正體中文的思源體而且還是測試中，大概因為容量不少，速度沒有保證也不穩定。 Adobe Typekit Type kit是Adobe的字庫，如果使用Adobe CC的話其實可以免費使用。不過也不是每個人也會用Adobe CC，而且速度也不樂觀，幾乎拖垮整個網站的速度。 Justfont Justfont是台灣的字庫，其中有不少原創的正體中文字型可供選擇，金萱體是他們網上集資開發而成的。中文字的選擇比較多，速度還可以，不過是要收限額的月費就是。 以上三個我也用過，Google免費雖好，但只有思源體及慢，Typykit也有思源體及少量其他中文字體，但選擇也不多，如果有用Adobe CC的話就跟免費一樣，但是速度也不夠快，有時候甚至比頁面還慢，Justfont中文字體數量比較多，宋體黑體甚至手寫體也有，當中也有原創字體，對字體比較有要求的可以選擇這個。 不過速度上，我希望可以更好，
SEO 新手實戰 (1) - Page Title優化

SEO

SEO 新手實戰 (1) - Page Title優化

SEO - Seach Engine Optimize，雖說是 Seach Engine，但大家還是把注意力落在 Google 中的排名。現在市面上很多公司聲稱可以為客戶提升 SEO 排名，是很難做到的事情嗎？ 其實沒想像中困難，是一般開發人員也可以做到的程度，現在就先由淺入深，從比較基本的 Page title說起吧！ 在 Google Search 搜尋出來的結果，藍色的標題就是 Page Title 了。 Page Title 優化Page Title 如果你見到一個網頁是 untitled title 的話，不單說 SEO，一般也會覺得是未完成的網頁吧。Page Title 在 SEO 中佔的比重也很重要，畢竟在搜尋結果中的標題位置。 建議字數 50 - 60
Ghost 1.0 版本更新

Ghost

Ghost 1.0 版本更新

有一段時間沒寫新的Note，Ghost已經來到1.0版本。今次更新時發現了有新的安裝方式 - Ghost CLI，喜歡嘗新的我馬上就來試試Ghost 1.0有什麼新功能。 Ghost CLI 現在官方推薦使用Ghost CLI作為安裝方式，使用 npm 安裝即可。舊版本用戶也建議使用Ghost CLI安裝全新的Ghost。 $ npm install g ghost-cli@latest 然後可以開一個新資料夾，簡單使用 ghost install $ mkdir /root/ghost $ cd /root/ghost $ ghost install 然後會問你一些問題來設定你的Ghost ? Enter your blog URL: ? Enter your MySQL hostname: ? Enter your MySQL username: ? Enter
重用PM2作管理系統

NuxtJS

重用PM2作管理系統

更新PM2 2.4.4後發現NuxtJS也可以正常Hot Reload，加上forever多次發生loading 100%的問題，所以全面改用PM2作NuxtJS的管理。 $ pm2 update $ pm2 -v 2.4.4 更新到最新版本 使用PM2管理NuxtJS 想好好管理NuxtJS使用PM2還是最方便，因為即使出現問題，restart 15次後說會暫停你的應用程式，以免對伺服器有過大的負擔。 由於要使用npm script來啟動NuxtJS，普通pm2 start的方式起動不了 $ pm2 start npm --name AppName -- run start e.g.你的程式叫AppName，起動script叫start * --name AppName是用來命名你的App * -- run start是用來啟動npm run start $ pm2 list ┌──────────┬────┬──────┬───────┬────────┬─────────┬────────┬─────┬────────────┬───
Sass in NuxtJS

NuxtJS

Sass in NuxtJS

以前對Sass/SCSS等需要預處理的CSS Style有一定抗拒，因為需要安裝一堆應用程式，每次更新都需要處理一次，但是現在在NuxtJS中有Vue Loader處理，不論那一種需要預處理的CSS都可以輕鬆搞定。 在多種預處理的CSS中我先是賞試了Sass，不用再加任何標點符號真的很棒！ Sass nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; } 原本是這樣的CSS nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px
更改網址

256pages

更改網址

由於NYS網站結構比較複雜，所以決定先重建我的個人作品集，這個開發日誌就移到https://blog.256pages.com/ 好了。 https://256pages.com 就讓給我的個人主頁用，前面加上www太麻煩，加上我希望每一個subdomain都做成一個個人網站，就這樣沒有subdomain就好了。 順道組織一下架構： * Home * About - 介紹一下自己 * Portfolio - 作品集 * Contact - 聯絡我的方法 作品集結構也會比較簡單為主，以卡片式顯示 * Title * Description * Year * Image 大概先這樣，完成後再review一下
Nginx中使用NodeJS時更新Letsencrypt SSL

Nginx

Nginx中使用NodeJS時更新Letsencrypt SSL

Letsencrypt 自從Google提倡每個網站需要使用SSL為最低要求後，我也少不免申請SSL服務，在尋找的過程中發現了Letsencrypt。他們是提供免費的SSL認証機構，比較起一般免費試用SSL的公司比較起來更可靠，單看他們的Major Sponsors中有Google Facebook等大公司支持，已經是信心保証。 安裝 網上提供有不少安裝方法，基本上都不太難，我就使用官方建議的Certbot來進行安裝 $ sudo apt-get install letsencrypt 簡單以apt-get進行安裝 申請SSL Cert 最重要的部份了，整個申請過程也是可以用指令進行，非常方便的。 e.g. 我要申請的是256pages.com為例 $ letsencrypt certonly --webroot -w /var/www/256pages.com/ -d 256pages.com * certonly 是申請新Cert * webroot 是最得方法，還可用standalone但不好用，都建議用webroot * -w /
forever 出現 warning

NodeJS

forever 出現 warning

由於pm2管理下NuxtJS的hotreload失效，所以請出了forever來管理，但是近來forever中要startapp的時候會出現這種警告 $ forever start -c "npm run dev" ./ $ warn: --minUptime not set. Defaulting to: 1000ms $ warn: --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms 解決方法 由於找不到怎麼辦，只好跟他warning所指示加上參數 $ forever start --minUptime 1000 --spinSleepTime 1000 -c "npm run dev" ./ 馬上就成功了! 更新 後來發現PM2更新後也可以使用hotreload，
Content Security Policy中使用Google Analytics

CSP

Content Security Policy中使用Google Analytics

防範XSS攻擊 CSP是由Google提出的安全性工具，主要是因為多年來網站很容易受到Cross-site Scripting XXS攻擊。 完全封鎖 首先是試一試最安全的設定，根據CSP Evaluator的設定如下 script-src 'strict-dynamic' 'nonce-rAnd0m123' 'unsafe-inline' http: https:; object-src 'none'; base-uri 'none'; report-uri https://csp.example.com; 這個設定下....幾乎什麼script也不可能運作！連本地的script也被封死了... default-src 'self' https://*.google.com https://*.googleapis.com https://www.google-analytics.com https://*.gstatic.com; 不過我需要Google Analytics，因為Google Analytics需要多個source，所以我了defau

NuxtJS

Webpack loaderUtils.parseQuery()問題

在執行nuxt build的時候常常出現以下警告 $ (node:495) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56 連網址也有就去看看https://github.com/webpack/loader-utils/issues/56 似乎是Webpack loader上remove了parseQuery問題引起了錯誤 要在webpack.config.js中加入process.traceDeprecation = true才能防些此問題出現。 但是在NuxtJS中沒有webpack.config.js要加在那？ 答案就是看起來名字很像的nuxt.config.js 解決方法 process.traceDeprecation = true process.noDeprecation = tr
NuxtJS + Socket.io + https

NuxtJS

NuxtJS + Socket.io + https

我希望在NuxtJS中以Socket.io為傳送資料的方式，不過功力有限連Socket.io都沒搞定。發現NuxtJS官方其實有實例是在https中運作。 不過事情當然沒這麼簡單，官方上沒有什麼說明，我也只好當成NuxtJS一樣安裝。 $ npm install nodemon 這個例子用了nodemon作管理，我也直接照用好了 先安裝一下 $ npm run dev 啟動看一下 Socket.io不能通過https，瀏覽器會就說Mixed Content，就是https的頁面要取資料一定要經https才安全。 解決方法 想到解決的方法有兩個 * 把Socket.io變成https * 令到Socket.io不用https也能通過 經過一輪測試才找到方法 因為NuxtJS官方版本是用https的，我曾在nuxt.config.js內更改很多東西也不成，最後發現要修改如下 env: { HOST_URL: process.env.HOST_URL || 'https://www.256pages.com' }
See all