WordPress / 架站教學五:設定 SSL 加密連線,讓網站連線更安全 (以Apache為例)

WordPress / 架站教學五:設定 SSL 加密連線,讓網站連線更安全 (以Apache為例)

前面有提到關於 WordPress 網站連線有兩件重要的事,一是 domain name 網址的導引,這在前一篇已經談過。本篇要來談另外一個重要的事情,那就是網站的安全性。 SSL 憑證與 https 加密連線 早期的 http 連線是瀏覽器存取網站的通訊協定,最早期是在 1898 年由歐洲核子研究組織 (CERN) 所提出,在當時這樣的通訊協定已經可以滿足通訊的需要。http 它是一個沒有經過加密的明文通訊傳輸,隨著網路的發展以及駭客們的鼓勵 ?! 安全性的問題日漸被重視。 明文通訊的資安風險非常的高,因為你無法得知和你通訊的人 (伺服器) 是不是你想像中應該的那個人?而伺服器也無法得知目前的 client 端是否是可以信任的那個人?就算雙方身份都正確,亦無法確認你們兩個之間的通訊是否有被擷取、竄改、攔截。所以 https 就這麼誕生啦~ https 的全文是 HyperText Transfer Protocol Secure,安全超文本通訊協定。和原始的 http 不同的地方是,它透過雙方的認證 (handshake,交握) 過程,確認彼此的身份,並藉由 SSL 或 TSL 憑證加解密通訊內容。 所以簡單來說,申請了一份 SSL 憑證就能讓伺服器以 https 的方式通訊,讓網站的連線更加安全。 SSL 連線的基本流程概述 在建立 SSL 連線前,首先要先知道一個重要的角色以及幾個檔案: CA (Certificate Authority,憑證簽發機構) CRT 憑證 (也就是...

WordPress / 架站教學四:設定 Domain Name 及 Apache 參數 (單一WordPress)

WordPress / 架站教學四:設定 Domain Name 及 Apache 參數 (單一WordPress)

關於連線到我們網站的網址,有兩件重要的事情要設定:指定 Domain Name和設定安全的 SSL 連線 (下一篇)。 本篇前半段花了一些篇幅簡單介紹了 domain name 和 DNS 的運作方式和基本需要知道的概念,如果讀者已經對這部分熟悉或是就想直接查詢設定方式可以直接跳到 指定 Domain Name 給本地端 server 這一節。 另外,架站教學系列是針對單一 WordPress Bitnami 的教學,多站 (Multisite WordPress) 的設定會遠比單一網站複雜得多,可以參考多站教學系列文章。 Domain Name 簡介 在網路的世界當中 IP 位址就好像是每個裝置的地址,但那是給電腦看的,要人類記得一長串的數字 xxx.xx.xx.xx 實在是不容易也不好辨識,所以才有了 Domain Name 的出現。Domain name 就像我們常看到的網址,通常是由一個 domain 加上尾綴組成,像是 .com, .org, .com.tw, .co.uk 等等。 以這個網站為例,charlestw.com 就是我的 domain name。那麼前面的 note 呢?它就是 sub domain (子網域)。在註冊網域名稱的時候,只會註冊後面的...

WordPress / 架站教學三:更改 MySQL Administrator 密碼、設定外部靜態 IP 位址

WordPress / 架站教學三:更改 MySQL Administrator 密碼、設定外部靜態 IP 位址

這一篇要討論的是關於一些安全性相關的設定。在前兩篇當中我們已經架設好我們的 WordPress 網站,不過看一下 GCP 的控制面板,還是有一些提示建議我們去做的:更改暫時性的密碼、設定外部的靜態 IP 位址。 更改 MySQL Administrator 的密碼 這裡指的暫時性的密碼,並不是我們前面更改過的 WordPress 預設 user 這個使用者的密碼,而是這個 server 的 root 密碼,也就是 MySQL Administrator 的密碼,預設也是面板上的那一組 Admin password (Temporary)。 在 Bitnami 建立的環境下,很方面的是很多常用的功能都已經被寫成 script 腳本,我們只需要執行腳本、加入參數,就能完成原本麻煩的步驟。根據官方文件的說明,更改 root 密碼只需執行一個腳本即可。 ▍ 首先我們先用 SSH 連上主機,並輸入以下指令: 前面的路徑是 Bitnami stack 的安裝路徑,如果你沒有特別更改過,上面這就是預設的路徑。後面的 theNewPasswd 則是新的密碼,這邊替換成你自己的新密碼。 按下 Enter 之後必須再輸入一次原始的密碼,root 密碼就更改完成啦! 關於更改 root 密碼的詳細說明可以參考官方文件:Modify the MySQL Administrator Password...

WordPress / 搬家教學:一個按鍵幫網站搬家,使用 All-in-One Migration

WordPress / 搬家教學:一個按鍵幫網站搬家,使用 All-in-One Migration

幫整個網站搬家其實是一件非常繁雜的一件事情,除了搬移 server 上的那些前後端檔案之外,還有整個 Database 的搬移。這中間還牽扯到 IP 位置的更改、domain name 映射、相對目錄的設定等等。即便是老手也有可能不小心就破壞到了原始資料,輕則要花很多的時間 debug,重則直接造成不能挽救的慘劇。 除了記得在搬家之前做備份好之外,還好 WordPress 有提供內建的搬家工具,也有人提供搬家的 Plugin 可以使用,讓網站搬家這件事變得非常容易。 目前比較多人使用的工具有 WordPress 內建的 Export & Import 工具、Duplicaotr 和 All-in-One Migration 這兩個 Plugin。WordPress 內建的輸出/輸入工具非常好用,可以把大部分的文章內容搬到新的網站去,不過他沒辦法把整個網站一模模一樣樣的重現,只能算是幫內容複製貼上而已。 本篇文章要使用的是 All-in-One Migration,它的使用方式非常簡單,只需要幾個按鍵就能完成。目前它的免費版在輸出/備份功能沒有任何限制,不過在輸入功能有檔案大小的限制,官方最大可以支援到 512 MB。 步驟一:安裝 All-in-One Migration 並提升檔案上限 1. 安裝 Plugin 在本文撰寫的時候,Bitnami 版本的 WordPress 已經有先預設安裝 All-in-One Migration,你只需要在 Plugin 設定當中啟用他就可以了。如果沒有的話,就去搜尋此一套件安裝,啟用它之後就會在左側面板看到選項。 記得新舊網站都要安裝喔!舊網站要用來輸出、新網站要用來輸入。 2. 增加免費版的檔案大小限制 就像文章開頭說的,免費版的輸出/備份功能使沒有檔案大小的限制,但如果你要將你備份好的網站整個輸入到另一個 server 上,他預設只有...

WordPress / 移除 Bitnami 圖示

WordPress / 移除 Bitnami 圖示

用 WordPress Bitnami 架設的網站預設右下角都會有一個 Bitnami 的圖示,它叫做 Bitnami Info Page Banner。點擊它會進入 Bitnami 的說明文件,告訴你一些實用的功能,不過在那邊顯然是有點礙眼。好在的是,Bitnami 也沒有這麼霸道,它是能直接下個指令移除的。 移除 Bitnami Info Page Banner 首先,要先用 SSH 登入我們的 server。如果還不知道怎麼登入的話,請參考這篇WordPress / 架站教學二:透過 SSH 連線遠端控制 GCP 並設定 FTP 伺服器 (使用 WordPress Bitnami)。 登入主機之後,輸入下列指令執行 bnconfig : 紅字的部分是 WordPress 的根目錄位置,這是預設的位置。如果你是直接在 Marketplace 安裝 WordPress Bitnami 那麼就會是這個目錄。 參數 –disable_banner 設定 Bitnami Info Page Banner 是否要顯示出來,預設是 0 會顯示。我們把它設定為...

CSS / margin 邊界重疊

CSS / margin 邊界重疊

如果你對你的網站有複雜的 CSS 設定時,你可能會發現一種狀況,就是前後兩個 block 元件的邊界會有重疊的狀況。前一個元件的下邊界 (margin-bottom) 會和後一個元件的上邊界 (margin-top) 重疊,只會保留兩個之中較大的那一個,這就稱之為邊界重疊 (margin collapsing)。 不過有兩種例外狀況,當元件有設定 float 或 position: absolute 屬性,就不會產生邊界重疊的現象。 會產生邊界重疊的狀況 ▍ 同一層的元件相鄰 兩個位在同一層的 block 元件相鄰就會產生邊界重疊,margin 只會取其中最大的一邊。就像下面的範例,前後兩個段落之間的邊界最後只會有 40px。 <p style="margin-bottom: 16px">First element</p> <p style="margin-top: 40px">Second element</p> ▍ 父元素的邊界與第一個/最後一個子元素的邊界重疊 當子元素的邊界與父元素的邊界重疊時,依然只會取最大的邊界。下面的範例當中,段落 (p) 是區塊 (div) 的子元素,父子元素間的上下邊界都有邊界重疊的情況。最終上邊界取子元素的 20px、下邊界取父元素的 80px。 <div style="margin-top: 15px; margin-bottom: 80px;"> <p style="margin-top: 20px; margin-bottom: 20px;"> this parameter...

Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

Design / 免費照片、圖片、icon 分享,可用於平面、網頁、UI 設計 (2019.08更新)

▍照片、圖片庫 Unsplash 圖片、照片 Pexels 照片、影片 ▍UI 設計 Flaticon 向量 icon ▍字型 Google Fonts 各國語言字型 ▍綜合素材庫 Envatoelements 圖片、照片、影片、音樂、字體、簡報樣板、WordPress 主題 Freepik 向量圖檔、照片、圖片、向量 icon、平面設計樣板 Copyright announcement:the featured image: Photo by Jeff Sheldon on Unsplash

WordPress /  錯誤:Update Failed: Could not create directory.

WordPress / 錯誤:Update Failed: Could not create directory.

如果在安裝或更新 WordPress Plugin 的時候遇到這樣的錯誤:Update Failed: Could not create directory. 很有可能就是檔案權限設定錯誤造成的問題。 ▍ WordPress Bitnami 的預設檔案權限設定是: 所有的檔案及資料夾都被 bitnami 這個使用者所擁有,且都隸屬於 daemon 這個群組。 所有資料夾存取權限都是 775  所有檔案的存取權限都是 664 wp-config.php 這個檔案的存取權限是 640 ▍ 更改檔案存取權限的設定可以參考這篇文章:WordPress / WordPress Bitnami 正確的檔案權限設定 Copyright announcement:the featured image: Photo by Mr Cup / Fabien Barral on Unsplash

WordPress / WordPress Bitnami 正確的檔案權限設定

WordPress / WordPress Bitnami 正確的檔案權限設定

WordPress的檔案權限設定包含兩個部分:一是網站的根目錄 htdocs、二是 htdocs 以外的其他 WordPress 檔案。 檔案權限是伺服器當中非常重要的設定,它會牽涉到哪個使用者可以存取哪個檔案。沒設定好輕則網站無法瀏覽,重則資料被竊取、網站毀損無法恢復。當我們在架設網站的過程當中,有時可能會出現存取錯誤或權限錯誤,經常都是因為檔案權限的設定錯誤造成的。 網站根目錄 htdocs 的權限設定 htdocs 這個資料夾底下的權限設定比較單純,根據 Bitnami 的文件表示,所有 Bitnami 的應用程式 (包含 WordPress) 的預設權限設定如下: 所有的檔案及資料夾都被 bitnami 這個使用者所擁有,且都隸屬於 daemon 這個群組。 所有資料夾存取權限都是 775 所有檔案的存取權限都是 664 wp-config.php 這個檔案的存取權限是 640 ▍ 權限設定指令 要將所有檔案都改成這確的權限設定,只需要下列幾個步驟: 1. 首先先移到 htdocs 的目錄當中 2. 更改所有檔案的擁有者及存取權限 3. 更改 wp-config.php 的存取權限 其他的 WordPress 檔案權限設定 在 htdocs 以外的檔案權限設定比較複雜,其中牽涉到有些程式必須 root user 才能存取等,在此就不多做解說,直接附上所有檔案的預設權限: /wordpress...