分類
网站

使用 Plausible 統計用戶事件

中文繁簡轉換工具用上 Bootstrap 後漂亮多了,使用 JavaScript 來請求表格減少了頁面的跳轉,用起來也比較方便。於是產生一個新需求就是想統計下「轉換」按鈕被點擊了多少次。關於自定義事件目標的具體介紹,可以參考 Plausible 的官方文檔Custom event goals,我這裏只是羅列下具體步驟。

前端 html 中的修改

確保 Plausible 配置有下面的第二行

<script async defer data-domain="<yourdomain.com>" src="https://plausible.yourdomain.com/js/plausible.js"></script>
<script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>

在需要統計的地方執行這行 JavaScript

plausible('my_event');

Plausible 後臺的設置

打開 Plausible 後臺,在左上角的域名處選擇 Site Settings。在 Goals 區域點擊 + Add goal。然後 Goal trigger 選擇 Custom event,Event name 要輸入 JavaScritp 請求的參數,這裏就是「my_event」。最後點擊 Add goal 就完成了。

分類
网站

使用 datatables 展示表格

計算得出的中國城市飲用水中全氟辛烷磺酸(PFASs)的平均濃度(ng/L)

調查城市PFOAPFOS平均值18年人口 (万)所在省份
Anshan0.40.91.3341.8Liaoning
Atushi0.050.050.128.55Xinjiang
Baoding0.560.061.28935.93Hebei
Beijing3.290.9997.1922154.2Beijing
Benxi0.61.72.3146.1496Liaoning
Binzhou6.722.2534.7392.25Shandong
Changchun0.6420.3525.876751.3Jilin
Changsha0.9360.40616.616815.47Hunan
Changshu19.3272.852122.4106.8Jiangsu
Changzhou9.0552.65428.1472.3Jiangsu
Chaohu10.563.3359.8979.62Anhui
Chengdu0.7630.323119.4231633Sichuan
Chongqing2.5390.2193.2633101.79Chongqing
Dalian0.2760.6392.463595.2Liaoning
Dezhou1.4190.554.7581Shandong
Dongguan2.90424.22739.554839.22Guangdong
Dongying6.8682.18524.365217.21Shandong
Foshan45.55.0253.1790.57Guangdong
Fuzhou0.5330.4623.993774Fujian
Guangzhou5.4414.68120.2151490.44Guangdong
Guiyang0.5780.25817.135488.19Guizhou
Haining27.4122.4549.38685.85Zhejiang
Hangzhou49.9610.8874.145980.6Zhejiang
Harbin0.5580.1578.958951.5Heilongjiang
Hefei1.8530.29320.647808.7Anhui
Heihe0.020.010.54159.3Heilongjiang
Hohhot0.40.1913.663312.6Inner Mongolia
Hong Kong1.045.8688.068745.1Hong Kong
Huaian4.7380.43812.5492.5Jiangsu
Jinan9.6483.84730.564746.04Shandong
Jining1.0350.0452.9834.59Shandong
Jiujiang156.52.17175489.68Jiangxi
Kunming6.7381.11360.39685Yunnan
Lanzhou0.850.212.18374.16Gansu
Lhasa0.750.4514.8555.44Tibet
Lianyungang61.42186.17332.63452Jiangsu
Macao1.36.27.563.16Macao
Mudanjiang0.8201.97252.5Heilongjiang
Nanchang6.8080.9718.593554.55Jiangxi
Nanjing8.781.08327.824843.62Jiangsu
Nanning0.10.25364.093725.41Guangxi
Shanghai12.4512.34526.9132423.78Shanghai
Shenyang1.6410.8965.989831.6Liaoning
Shenzhen8.5489.95423.9021302.66Guangdong
Shijiazhuang17.6019.92145.7661095.16Hebei
Suzhou34.6462.09561.3131072.17Jiangsu
Taian1.3570.3927.2564Shandong
Taipei3.75.49.1262.6Taiwan
Taiyuan0.740.4930.697442.15Shanxi
Tianjin2.2321.0187.6041559.6Tianjin
Urumqi0.40.1959.64350.58Xinjiang
Wuhan1.8970.21213.7711108.1Hubei
Wuxi27.6986.85493.622657.45Zhejiang
Xiamen2.60.763.36411Fujian
Xi'an0.3820.4969.5621000.37Shaanxi
Xining0.4450.21511.39237.11Qinghai
Xuzhou6.8330.87512.5880.2Jiangsu
Yangzhou7.6510.97112.5453.1Jiangsu
Yinchuan0.040.46828.036225.06Ningxia
Zhengzhou0.5160.18315.4761013.6Henan
Zhenjiang4.6741.6816319.64Jiangsu
Zhongshan0.60.61.2331Guangdong
Zhuhai0.7651.312.075189.11Guangdong
Zhuzhou2.110.335.54402.08Hunan
Zibo15.892.1141.01470.2Shandong
Zigong467.9551.606502.926292Sichuan

不同國家和美國各州發布的飲用水中 PFAS 準則

DateAuthorityAgency指導值(ng/L)Guideline TypeReference
2006GermanyGerman Ministry of HealthPFOA+PFOS: 300Health-based guide valuehttps://www.umweltbundesamt.de/sites/default/files/medien/pdfs/pft-in-drinking-water.pdf
2006GermanyGerman Ministry of HealthPFOA+PFOS: 100Health-based precautionary valuehttps://www.umweltbundesamt.de/sites/default/files/medien/pdfs/pft-in-drinking-water.pdf
2014ItalyNational Institute of HealthPFOA: 500; PFOS: 30Health-based levelhttp://www.euro.who.int/__data/assets/pdf_file/0018/340704/FINAL_pfas-report-20170530-h1200.pdf
2015DenmarkDanish Environmental Protection AgencyPFOS: 100; PFOA: 100Quality Criteriahttp://mst.dk/service/publikationer/publikationsarkiv/2015/apr/perfluoroalkylated-substances-pfoa-pfos-and-pfosa/
2016AustraliaDepartment of HealthPFOA: 560; PFOS+PFHxS: 70Health-based guidancehttp://www.health.gov.au/internet/main/publishing.nsf/content/ohp-pfas-hbgv.htm
2016USAUSEPAPFOS+PFOA: 70Lifetime Health Advisoryhttps://www.epa.gov/sites/production/files/2016-05/documents/pfos_health_advisory_final_508.pdf
2016ConnecticutDepartment of Public HealthPFOA+PFOS+PFHxS+PFNA+PFHpA: 70Action Levelhttp://portal.ct.gov/DPH/Search-Results?SearchKeyword=PFAS
2018European UnionEuropean CommissionIndividual PFASs: 100Proposed Drinking Water Directiveec.europa.eu/environment/water/water-drink/review_en.html
2018European UnionEuropean CommissionSum of PFASs: 500Proposed Drinking Water Directiveec.europa.eu/environment/water/water-drink/review_en.html
2018CanadaHealth CanadaPFOA: 200; PFOS: 600Drinking Water Screening Valuehttps://www.canada.ca/en/services/health/publications/healthy-living/water-talk-drinking-water-screening-values-perfluoroalkylated-substances.html
2019MinnesotaDepartment of HealthPFOA: 35; PFOS: 15; PFHxS: 47; PFBA: 7000; PFBS: 2000Health Based Guidance for Waterhttps://www.health.state.mn.us/communities/environment/hazardous/topics/pfcs.html#safelevels
2019California Water Resources Control BoardPFOA: 5.1; PFOS: 6.5Notification Levelshttps://www.ecos.org/news-and-updates/california-lowers-pfas-notification-levels-initiates-regulatory-process/
2019VermontDepartment of Environmental ConservationPFOA+PFOS+PFHxS+PFHpA+PFNA: 20Maximum Contaminant Levelshttps://dec.vermont.gov/water/drinking-water/water-quality-monitoring/pfas
2020MichiganDepartment of Environment, Great Lakes, and EnergyPFOA: 8; PFNA: 6; PFHxA: 400000; PFOS: 16; PFHxS: 51; PFBS: 420; HFPO-DA: 370Maximum Contaminant Levelshttps://www.michigan.gov/egle/0,9429,7-135--534660--,00.html
2020New YorkDepartment of HealthPFOA: 10; PFOS: 10Maximum Contaminant Levelshttps://www.wamc.org/post/nys-adopts-drinking-water-standards-three-emerging-contaminants
2020New HampshireDepartment of Environmental Services PFOA: 12; PFOS: 15; PFHxS: 18; PFNA: 11 Maximum Contaminant Levelshttps://www4.des.state.nh.us/nh-pfas-investigation/?p=1185
2020New JerseyDepartment of Environmental ProtectionPFOA: 13; PFOS: 14Maximum Contaminant Levelshttps://www.penn-er.com/2020/06/08/new-jersey-establishes-mcls-ground-water-and-remediation-standards-for-pfoa-pfos/
2020MassachusettsDepartment of Environmental ProtectionPFOA+PFOS+PFHxS+PFNA+PFHpA+PFDA: 20Maximum Contaminant Levelshttps://www.mass.gov/lists/development-of-a-pfas-drinking-water-standard-mcl
2020SwedenSwedish Food AgencyPFOA+PFOS+PFHxS+PFNA+PFHpA+PFDA+PFBS+6:2FTS+PFBA+PFPeA+PFHxA: 90Action Levelhttps://www.livsmedelsverket.se/en/food-and-content/oonskade-amnen/miljogifter/pfas-in-drinking-water-fish-risk-management

數據來源及完整論文請參閱:Per- and polyfluoroalkyl substances (PFASs) in Chinese drinking water: risk assessment and geographical distribution。Liu, L., Qu, Y., Huang, J. et al. Per- and polyfluoroalkyl substances (PFASs) in Chinese drinking water: risk assessment and geographical distribution. Environ Sci Eur 33, 6 (2021). https://doi.org/10.1186/s12302-020-00425-3

如何在 WordPress 中展示上面的數據圖表

這裏使用了開源的js插件 DataTables 來展示上面的圖表。安裝方法可以參考官方安裝文檔,非常簡單。考慮到文件裏推薦的 CDN 方法在中國可能水土不服,所以我使用本地的安裝方法。在下載頁面勾選需要的組件(我只選了必須的 css 和 js,由於 WordPress 已自帶 jquery,所以不用選jquery)然後下載到一個 zip 包。我是將其上傳到 WordPress 的 wp-content/uploads/share/js 目錄中,然後解壓並修改文件所有者爲nginx( chown nginx:nginx -R DataTables ),就可以使用了。文章裏用到的代碼如下:

<link rel="stylesheet" type="text/css" href="/wp-content/uploads/share/js/datatables.min.css"/>
<script type="text/javascript" src="/wp-content/uploads/share/js/datatables.min.js"></script>

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

<script>
jQuery(document).ready(function($) {
    $('#table_id').DataTable();
} );
</script>
分類
网站

本站域名變更:從 wupo 到 shaman

首先感謝 EU.org 提供的 free 二級域名,本站從即日起開始在新域名 https://ft.shaman.eu.org 下更新,原 https://ft.wupo.info 會在一天後跳轉到本站。 https://emanon.wupo.info 由於停更,所以本次不會遷移到新域名,但是會在明年域名到期後下線。Emanon 有一個自然觀察的 Youtube 頻道,裡面都是些常見物種記錄。


本次遷移域名遇到的小問題

由於不是很緊迫,所以我是在同一個服務器上複製了一份數據庫,然後又複製了一份 wordpress 文件夾,最後再複製一份 nginx 的配置文件就搞定了。如果遇到 nginx 500 錯誤,記得檢查文件權限。需要在數據庫里操作的幾處我列一下:

#如果只是修改域名,則只需執行下面兩行
update options set option_value="https://ft.shaman.eu.org" where option_name="siteurl";
update options set option_value="https://ft.shaman.eu.org" where option_name="home";

#如果要修改用戶的電子郵箱
update users set user_email='[email protected]' where user_login='user1';
#如果要修改管理員的電子郵箱
update options set option_value='[email protected]' where option_name='admin_email';

還有一個問題是,配置 cloudflare 時出現循環 301 Moved Permanently 跳轉。原因是 cloudflare 默認的 SSL/TLS 設置是 Flexible,這種模式意味着用戶到 cloudflare 是 https,而 cloudflare 到我的服務器卻是 http。但是我的服務器也配置了如果是 http 就重定向到 https。於是就循環請求了。解決辦法是把 cloudflare的 SSL/TLS 設置為 Full (strict) 模式。

nginx 和 cloudflare 設置 301 跳轉都很簡單,這裡寫下用 cloudflare 設置跳轉的方法。在 Page Rule 中新建一條(免費用戶最多可以創建三條)Page Rule。URL matches 填「*ft.wupo.info/*」,接着的兩個下拉框分別選「Forwarding URL」和「301 - Permanent Redirect」,最後一個輸入框填「https://ft.shaman.eu.org/$2」。保存並啟用就可以了。

本文更新於 2020/11/04。

分類
网站

嘗試攔截來自 Cloudflare IP 的密碼猜解

我的 WordPress 安裝了 Limit Login Attempts 插件,其中可以設置輸入錯誤密碼 m 次封鎖這個 IP n 小時,並記錄下這個 IP。本站最近有很多來自 Cloudflare IP 的錯誤登錄嘗試,於是我試圖使用下面兩個方法攔截,可惜結果證明無效。於是我使用了 OTP (One-time password)來增加暴力破解的難度,直到再次找到可行的攔截方法。我還安裝了一個修改 WordPress 登錄頁網址的插件 WPS Hide Login,應該也能有些作用。

Cloudflare Firewall

免費 Cloudflare 用戶可以創建 5 個防火牆規則,我建立了如下兩條:

(http.host in {"ft.wupo.info"} and ip.geoip.asnum in {13335})
(ip.src in {173.245.48.0/20 103.21.244.0/22 103.22.200.0/22 103.31.4.0/22 141.101.64.0/18 108.162.192.0/18 190.93.240.0/20 188.114.96.0/20 197.234.240.0/22 198.41.128.0/17 162.158.0.0/15 104.16.0.0/12 172.64.0.0/13 131.0.72.0/22} and http.host eq "ft.wupo.info")

我隨便查了幾個 Cloudflare IP 的 AS 編號都是 13335,所以第一條就是如果 IP 的 AS 編碼是 13335 就攔截。順便推薦個我經常用的查 IP 的網站 IP-API

第二條是根據 IP 地址來封鎖,從這裡獲得 Cloudflare 的 IP

(ip.geoip.country ne "KP" and http.host eq "ft.wupo.info")

如果想根據 IP 所在國家來限制訪問也是可以的,上面的便是限制了北韓以外 IP 的訪問本站。

在 Limit Login Attempts 插件中限制 IP

這個就是一行一個填已經攔截的 IP 就可以了,可以把所有 IP 複製下來,然後粘貼到 LibreOffice Calc 中,按需要進行排序後複製出 IP 列貼回插件中就可以了。

分類
网站

WordPress 使用 OTP 增強站點安全性

一次性密碼 (One-time password)又稱動態密碼或單次有效密碼,是指計算機系統或其他數位裝置上只能使用一次的密碼,有效期為只有一次登入會話或交易。OTP 避免了一些與傳統基於密碼認證相關聯的缺點;一些實作還納入了雙因素認證,確保單次有效密碼需要存取一個人有的某件事物以及一個人知道的某件事物。——維基百科

本站使用的開源 OTP 插件是 WP-OTP。安裝啟用後在「使用者」>「個人資料」頁面,會有二維碼出現,用自己喜歡的 OTP 客戶端掃描後輸入生成的密碼就開啟了網站的 OTP 登錄。

我使用的 OTP 軟件是開源的 andOTP。安裝後會提示給 andOTP 客戶端自己設置個密碼,以保護動態密碼的安全。設置好後點擊主界面右下角的「+」,掃描 WordPress 個人資料頁的二維碼,將出現的數字填入 WordPress 後台就完成了所有的設置。

平常使用的場景是:打開 WordPress 的登錄頁,輸入賬號密碼。打開手機上的 andOTP 查看當前的動態密碼( 6 位數字)。將動態密碼也輸入登錄頁,完成登錄。

分類
方法

在 Centos 7 上安裝 LNMP

上周更新 php7.3 的時候順手執行了下 yum update 導致無法進入系統,在客服的幫助下複製出了數據,然後自己重裝了系統,記錄下。本文主要參考了G. T. Wang的CentOS 7 安裝 Nginx、MySQL/MariaDB、PHP7,架設 LEMP 網頁伺服器筆記,非常感謝!

安全設置

阻止內核升級

#在 /etc/yum.conf 中加入
exclude=kernel*

上次進不了系統比較懷疑是升級內核後grub沒更新導致的,但是也不確定,為了系統穩定性最好還是禁用內核升級。不過禁止了內核升級也就不能安裝 kernel 相關庫,需要的時候臨時打開就行。

新建 sudo 用戶

# 新增使用者
adduser USERNAME
# 設定密碼
passwd USERNAME
# 將 USERNAME 加入 wheel 群組
usermod -aG wheel USERNAME

設定時區

# 使用 timedatectl 列出可選擇的時區:
timedatectl list-timezones
# 設定時區為亞洲的台北:
sudo timedatectl set-timezone Asia/Shanghai
# 其他常用時區
sudo timedatectl set-timezone Asia/Hong_Kong
sudo timedatectl set-timezone Asia/Taipei
# 查看本機時間
date

防火牆

參考:CentOS Linux 7 以 firewalld 指令設定防火牆規則教學。我這裡只記錄下我的操作。

# 檢查 firewalld 服務狀態
systemctl status firewalld

#啟動 firewalld 服務,默認是有開啟22端口的,
#如果你的 SSH 端口已經更改,啟用防火牆可能會導致 SSH 連不上
systemctl start firewalld

# 停止 firewalld 服務
systemctl stop firewalld

# 重新啟動 firewalld 服務
service firewalld restart

# 設定開機自動啟動 firewalld 服務
systemctl enable firewalld

# 列出預設區域
firewall-cmd --get-default-zone
#一般是public

# 將 http 服務新增至 public 區域中
sudo firewall-cmd --zone=public --add-service=http

# 永久將 http 服務新增至 public 區域中
sudo firewall-cmd --zone=public --permanent --add-service=http

# 開啟 tcp 的 8080 連接埠
sudo firewall-cmd --zone=public --add-port=8080/tcp

# 永久開啟 tcp 的 8080 連接埠
sudo firewall-cmd --zone=public --permanent --add-port=8080/tcp

# 若欲將 ssh 端口改為 20222
firewall-cmd --permanent --direct --add-rule ipv4 filter INPUT_direct 0 -p tcp --dport 20222 -m state --state NEW -m recent --set
# 增加30秒4次的登錄頻率限制
firewall-cmd --permanent --direct --add-rule ipv4 filter INPUT_direct 1 -p tcp --dport 20222 -m state --state NEW -m recent --update --seconds 30 --hitcount 4 -j REJECT --reject-with tcp-reset

# 列出 public 區域永久的服務設定值
sudo firewall-cmd --zone=public --permanent --list-services

# 將 http 服務從 public 區域中移除
sudo firewall-cmd --zone=public --remove-service=http

# 永久將 http 服務從 public 區域中移除
sudo firewall-cmd --zone=public --permanent --remove-service=http

SSH加固

#如果本機沒有~/.ssh/id_rsa.pub
#則應該先生成密鑰對
mkdir -p ~/.ssh
chmod 700 ~/.ssh
ssh-keygen
#問題默認即可
#複製本機 id_rsa.pub 到服務器
ssh-copy-id -i ~/.ssh/id_rsa.pub [email protected]
#然後嘗試直接密鑰登錄
ssh [email protected]
#修改 sshd 配置文件 /etc/ssh/sshd_config
#關閉密碼登錄
PasswordAuthentication no
#如果已新建用戶,可以禁止 root 遠程登錄
PermitRootLogin no
#修改端口,注意防火牆應開啟對應端口
Port 42222
#重啟 sshd 服務
sudo systemctl restart sshd

安裝LNMP服務

更新系統套件

#更新下系統套件
sudo yum upgrade
#啟用 EPEL
sudo yum install epel-release
sudo yum update

安裝 Nginx

sudo yum install nginx
#啟動 Nginx 服務
sudo systemctl start nginx
#開機自動啟動 Nginx 服務
sudo systemctl enable nginx

安裝 MariaDB

yum install mariadb-server mariadb
#啟動 MariaDB 服務,並設定開機自動啟動
sudo systemctl start mariadb
sudo systemctl enable mariadb
#強化 MySQL/MariaDB 資料庫設定的安全性
mysql_secure_installation
#修改 /etc/my.cnf 綁定本機 IP
[mysqld]
bind-address = 127.0.0.1

新建數據庫用戶和導入備份的數據可以參考mysql tricks

安裝 PHP 7.3

#開啟 Remi repository
sudo yum install http://rpms.remirepo.net/enterprise/remi-release-7.rpm
#安裝 yum-utils
sudo yum install yum-utils
#開啟 php 7.3的軟件源
sudo yum-config-manager --enable remi-php73
#或者開啟其他版本 php 的軟件源
sudo yum-config-manager --enable remi-php72
sudo yum-config-manager --enable remi-php71

#安裝常用的 php 庫
sudo yum install php php-mcrypt php-cli php-fpm php-gd php-curl php-mysql php-ldap php-zip php-fileinfo php-xml php-mbstring

#修改 /etc/php-fpm.d/www.conf
listen = 127.0.0.1:9000
user = nginx
group = nginx
#修改 /etc/php.ini
cgi.fix_pathinfo=0
upload_max_filesize = 32M
post_max_size = 32M
max_file_uploads = 50

#啟動 php-fpm 服務,並設定開機自動啟動
sudo systemctl start php-fpm
sudo systemctl enable php-fpm

我的服務器只有1核 CPU 和 512 MB內存,默認的php配置會耗光服務器資源,可以通過修改下面這些值來使服務器穩定。如果有更好的配置方案歡迎留言。

#修改 /etc/php-fpm.d/www.conf
listen.allowed_clients = 127.0.0.1
pm = dynamic
# Total number of processes allowed
pm.max_children = 5
# The number of child processes created on startup 
pm.start_servers = 2
# The minimum number of idle processes
pm.min_spare_servers = 1
# The maximum number of idle processes
pm.max_spare_servers = 2
# The number of seconds an idle process will be alive
pm.process_idle_timeout = 10
# The execution time of each child process and is used to curb memory leaks
pm.max_requests = 200

配置 nginx

#修改 /etc/nginx/nginx.conf
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    client_max_body_size 40M;
    gzip on;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    include /etc/nginx/conf.d/*.conf;
}
#新增 /etc/nginx/nginx.d/ft.wupo.info.conf
    server {
        listen      443 ssl;
        listen      [::]:443;
        server_name ft.wupo.info ;
        root        /usr/share/nginx/html/ft.wupo.info;
        index       index.php index.html index.htm;

        ssl         on;
        ssl_certificate      /etc/letsencrypt/live/ft.wupo.info/fullchain.pem;
        ssl_certificate_key  /etc/letsencrypt/live/ft.wupo.info/privkey.pem;


        location ~ \.php$ {
    	    fastcgi_pass   127.0.0.1:9000;
    	    fastcgi_index  index.php;
    	    fastcgi_param  SCRIPT_FILENAME   $document_root$fastcgi_script_name;
    	    include        fastcgi_params;
	}
        location / {
                try_files $uri $uri/ /index.php?$args;
        }
    }

	server {
		listen 80;
		server_name ft.wupo.info;
		return 301 https://$server_name$request_uri;
	}
#https://certbot.eff.org/lets-encrypt/centosrhel7-nginx
#啟用 certbot 的源
yum-config-manager --enable rhui-REGION-rhel-server-extras rhui-REGION-rhel-server-optional
#安裝 certbot 
sudo yum install certbot python2-certbot-nginx
#生成證書
certbot -d ft.wupo.info --nginx certonly

如果是首次獲取生成證書,nginx 應該會報錯,因為證書找不到。可以先只打開 80 端口,待證書獲取成功後再打開 443。

分類
其它

使網站更節能的17種方法

原文由 Tom 在2019年10月23日發布與 Wholegrain Digital 原文鏈接:17 ways to make your website more energy efficient




關於網站的碳足跡,在過去的幾年中我們已經討論了很多。 互聯網的碳影響主要是由用電引起的。 現在的問題是:

作為網絡專家,我們可以讓互聯網更節能一些嗎?

本文旨在回答這個問題,提供一些方便的清單,通過這些方法您可以最大程度地減少能源浪費,並幫您確保您所創建的互聯網產品盡量節能。

而且,這裡列出的幾乎所有內容不僅可以幫助提高網站的能效,還可以改善網站的性能和用戶體驗!

網站能耗的一些背景

如果您不熟悉此主題,那麼簡短的說就是——互聯網,包括數據中心、電信網絡和終端用戶設備(如電話和筆記本電腦)會消耗大量電能。 實際上,如果將它們消耗的電量全部加在一起,互聯網所消耗的電量與英國(世界上最大的經濟體之一)消耗的電量大致相同。

數據中心 <---> 電信網絡 <---> 終端用戶設備

隨著我們在日常生活中不斷消耗越來越多的互聯網數據,互聯網消耗的電量也迅速增長。 它可能不容易被我們看到或想到,但互聯網的這種巨大功耗卻實實在在地產生了巨大的碳足跡,而這是我們需要解決的問題。

對於我們從事網頁設計和開發的人們來說,下面這些是我們可以做到的:

設計與內容

當我們談論網站的能源效率時,很容易就認為這只是一個純技術性話題。不是的,我們甚至可以在建立網站之前就提高能源效率。設計和內容對能效有很大的影響,以下是需要考慮的關鍵領域。

1. SEO(搜索引擎優化)

SEO似乎與網站效率沒有任何關係,但實際上,SEO的目標與降低能耗的目標在本質上是一致的。在針對搜索引擎排名優化網站時,我們正在幫助人們快速,輕鬆地找到他們想要的信息。如果搜索引擎優化的好,人們可以減少在網絡上查找信息和瀏覽不滿足其需求的頁面的時間。這意味著消耗的能量更少,用戶消耗的能量用到了實處。

2. 文案撰寫

與搜索引擎優化類似,文案撰寫會影響網站效率,因為它會影響人們花在瀏覽網站上的時間。 有時,我們希望人們在網站上花費大量時間,使自己沉浸在我們的內容中。我們不希望人們把時間浪費在只有很少價值或根本沒有價值的內容上。因此,清晰有效的文案寫作可以幫助減少用戶在互聯網上的浪費時間,進而減少浪費的能源。

3. 用戶體驗(UX)

良好的用戶體驗的核心要素之一是減少用戶使用過程中的摩擦。我們希望人們能夠找到想要的東西,並以儘可能簡化的方式來操作。良好的用戶體驗使每個人都可以更輕鬆而愉快地使用網絡,這再次減少了浪費精力導航到不正確的頁面上,或是盯著網頁推測下一步該點哪裡。

4. 減少或縮小圖像

在大多數網站上,圖像是頁面文件大小的最大貢獻者。您使用的圖像越多,這些圖像文件越大,則需要傳輸的數據就越多,所消耗的能量也就越多。無論技術上如何優化,設計人員和內容創建者都應仔細考慮其圖像使用方式。

  • 圖像是否真的為用戶增加了價值?
  • 它傳達有用的信息嗎?
  • 如果圖像較小,是否可以達到相同的效果?
  • 我們能否減少用戶看不見的圖像,例如輪播中的圖像?
  • 我們可以使用矢量圖形(甚至 CSS 樣式)代替照片來達到相同的效果嗎?

在不影響用戶體驗的情況下思考這些問題並將圖像保持在最低限度將有助於降低能耗。

5. 減少視頻

儘管視頻的使用頻率低於圖像,但視頻作為網上的一種內容格式正變得越來越流行,並且它是迄今為止數據強度和處理強度最高的內容形式。與圖像一樣,問下自己是否真的需要視頻。如果是這樣,請查看是否可以通過禁用視頻自動播放並保持視頻內容簡短來減少視頻產生的網絡流量量。就頁面大小而言,具有視頻播放功能的網站可能比沒有視頻的網站大一個甚至兩個數量級,並給用戶的CPU帶來更高的負載,從而導致能源消耗大大增加。

6. 仔細選擇字體

網絡字體可以增強網站的視覺吸引力,但也大大增加了使用它們的網站文件大小。單個字體文件可能多達250kb,這還只是標準粗細。如果要加粗,需要再多250kb!

為了幫助減少自定義網絡字體的影響,設計人員應考慮以下選項:

        
  • 盡可能使用系統字體。它們並不總是那麼漂亮,但是可以使用諸如 Arial 和 Times New Roman 這樣的字體,而根本不加載任何字體文件,因為它們已經在用戶設備上了。
  •     
  • 使用較少的字體變化。您可能會覺得確實有必要使用自定義網絡字體,但是在選擇的字體數量和每種字體使用的不同粗細數量方面要節儉。

開發

開發人員對他們創建和維護的網站的能源效率有很大的影響。儘管設計師和內容編輯做出的某些決定不在開發人員手中,但是在某些領域中,開發人員可以完全控制,在這些領域中,他們可以優化所提供的內容和設計。

7. 編寫整潔的代碼

整潔,精簡的代碼本來說是一件好事。保持代碼簡潔明了,避免重複代碼並編寫高效的查詢語句。幕後的代碼看上去應該像是一台保養良好的精緻機器。

請記住,這不僅適用於您編寫的代碼,而且還適用於您借來的代碼。如果您使用的是現有的框架和庫,請確保它們也得到了完善和調試,以有效地提供所需的功能,並且您沒有在用高射炮打蚊子。如果您使用的是 WordPress 之類的內容管理系統,請避免使用不必要的插件。這些插件會增加負擔,請盡量選擇服務器負載較小並且不會在前端增加不必要的文件大小的插件。我們的格蘭諾拉入門主題旨在幫助您做到這一點。

8. 減少使用 JavaScript

JavaScript 通過兩種方式影響網站效率:通過增加文件大小到網頁上以及增加用戶設備所需的處理量。其中的第二點比其他類型的文件更明顯。

由 JavaScript 驅動的功能在用戶的電腦或手機上處理,並增加了CPU使用率,從而增加了設備的能耗。聽到筆記本電腦上的那些呼呼響的散熱風扇聲了嗎?那正是能源被浪費掉的聲音。

尋找使用更有效的技術(例如 CSS )來實現前端交互、功能和動畫,或者至少有效地使用 JavaScript 。此處應特別提及跟踪和廣告腳本,這些腳本很少為用戶提供價值,但卻會增加文件的大小,導致大量的CPU運算,降低網站速度並可能侵犯用戶隱私。 Webtest.app 是一個衡量廣告腳本的性能、數據和能源消耗影響的出色工具。

Safari 中新的網絡檢查器提供了一個有用的工具,可幫助評估網頁對最終用戶設備的能源消耗影響,蘋果 Webkit 開發者的這篇文章 提供了一些詳細的使用建議。

9. 優化圖像

如上所述,圖像是大多數網頁上傳輸數據量最大的貢獻者之一。除了設計者和內容作者能對圖像使用做出決定外,還有一些技術決定會嚴重影響頁面上顯示的圖像文件大小。這些包括:

  • 以正確的比例加載圖像,而不是依靠CSS來調整它們的大小,從而避免加載比其顯示比例大的圖像。
  • 使用 TinyPNGShortPixel 之類的工具壓縮圖像文件而不會造成質量損失。我們在這裡記錄了我們最喜歡的圖像壓縮工具
  • 對每個圖像使用最有效的文件格式,例如 WebP 而不是 JPEG 。

遵循這些步驟後,可以顯著減小圖像文件的大小,從而減少能耗並縮短加載時間,而不會給網站訪問者帶來不利影響。

10. 優化字體

有一些技術方法可用於減少網站上的字體大小,即使使用自定義字體,它也可以使文件大小減少97%之多。嘗試以下方法以減小字體文件的大小:

  • 堅持使用 WOFF 和 WOFF2 之類的現代網絡字體文件格式,與 TTF、OFT 和 SVG 文件格式相比,它們使用更高的壓縮方法。
  • 子集字體僅包含網站上所需的字符。

有關優化網絡字體的性能和大小的更多信息,請參閱 Josh 的這篇文章

11. 使用加速移動頁面(AMP)

加速移動頁面旨在通過去除不必要的代碼和文件大小來簡化移動設備上的內容加載,並提供原始網頁的簡潔版本。從理論上講,如果網站效率高,諸如加速移動頁面之類的技術實際上並不會有多大幫助。但是在原始網頁不夠理想的情況下,加速移動頁面可以成為一種有用的工具。它可以快速地生成出提供面向移動用戶的更輕便,更節能的版本。

還應注意,谷歌尤其優先考慮移動搜索結果中與新聞相關主題的加速移動頁面內容,因此它可以幫助提高網站內容的曝光量。缺點是您的內容可能會在谷歌產品上提供,而加速移動頁面刪除的某些內容可能是您認為重要的內容。這是一個功能強大的工具,但要謹慎使用。

12. 建立靜態網頁

內容管理系統支持的網站對網站數據庫進行查詢並動態生成頁面。簡單來說,這意味著網絡服務器必須進行處理,考慮每次有人嘗試加載頁面時要向用戶發送哪些信息,這將導致服務器消耗更多的能量。一種解決方案(下面列出來)是使用服務器緩存技術,但是在某些情況下,可能完全不用數據庫就可以簡單地對靜態網頁進行服務器處理。

這可以通過將網頁直接編寫為 HTML、CSS 和 JS 等靜態文件,或者使用靜態網站生成器或專業的靜態網站託管服務商將由內容管理系統生成的網站轉換為靜態文件來實現。

13.使用漸進式網絡應用技術(PWA)

漸進式網絡應用技術使網站能夠利用通常只有本地應用程序中才能看到的功能。就像克里斯最近寫道,漸進式網絡應用技術的核心功能之一是能夠在用戶設備上緩存文件,這意味著在重複訪問時無需重新加載內容和資料。這可以顯著減少重複訪問者加載的數據量,尤其是在移動設備上,其數據傳輸比有線連接的能耗更高。想其他那些方法一樣,它也可以幫助縮短加載時間和用戶體驗,而沒有任何實際缺點。

網絡主機託管

數據中心中的網站以及與數據中心之間的數據傳輸都消耗大量能量。因此,精心選擇網絡託管服務可能會對能源效率和網頁速度產生重大影響。以下是要考慮的要點。

14. 使用服務器緩存

對於使用內容管理系統的網站(例如 WordPress 或 Drupal ),每次有人訪問網頁時都會動態生成頁面。這是非常低效的,因為它需要針對每個單個頁面進行服務器處理,從而增加了網絡服務器的能耗。

諸如 Varnish 之類的緩存技術可以預先生成每個頁面的靜態版本,從而為大多數訪問者顯著地減少服務器開銷,不僅降低了服務器的能耗還對大大優化了頁面加載時間。

雖然設置起來可能很複雜,但是許多主機(例如 KinstaWP Engine )現在都提供此選項作為現成的功能,這意味著您只需付出很少的精力就可以提高網站的能效和網絡性能。

15. 選擇具有較高電源使用效率(PUE)等級的主機

PUE 也就是「電源使用效率」是通常被用來對數據中心進行能源效率評估的指標。通過將進入數據中心的能量除以用於運行其中的計算機的能量來確定電源使用效率。然後,這突出顯示了在非計算活動(例如冷卻)上浪費的能量數量。數據中心的典型電源使用效率約為1.67,這意味著進入數據中心的每1.67瓦電中,只有1瓦電用於為計算系統供電。由谷歌運營的高效數據中心的電源使用效率可以高達1.11

16. 使用靠近用戶的數據中心

互聯網使用的大量能量用於通過電信網絡傳輸數據。毋庸置疑,信息傳播的越遠,其旅行所消耗的能量就越多。因此,選擇靠近目標受眾的數據中心將有助於減少能耗。例如,您可能會從美國的託管公司那裡找到便宜的網絡託管套餐,但是如果目標訪問者在英國或德國,則將浪費能源在整個大西洋上傳輸數據。而且,這種額外的距離也可能導致頁面加載時間的延遲,因此將您的網站放置在靠近主要受眾的數據中心內將對用戶體驗和地球都有好處。

17.使用 CDN(內容分發網絡)

將數據中心放置在與主要受眾群體接近的地方非常好,但是如果您的受眾分佈在世界各地,那就沒那麼容易了。內容分發網絡( CDN )為此提供了一個很好的解決方案,可以為來自全球數據中心網絡的資料(例如圖像文件)提供服務。這意味著在大多數情況下,將從用戶自己區域中的 CDN 位置加載最大的文件,從而減少了每次加載頁面時數據傳輸的距離。於是,能源效率得以提高,頁面加載時間得以縮短。

總結

至關重要的是,我們減少了網絡行業內的能源浪費。我們很難甚至不可能準確地測算網站的能源消耗(儘管有諸如 Website Carbon 和 Safari 網絡檢查器之類的工具提供幫助),但是我們可以做很多事情來消除浪費並提高效率。這些操作大多數都不是不可能完成的任務,它們只需要在設計,內容創建,開發和託管的各個方面都注重細節並仔細思考。

而且,我們這些有助於提高網站能效的方法,同時也帶來了多方面的好處,無論是更好的 SEO ,更好的網絡性能還是更好的用戶體驗。一個高效的網站從根本上說是一個更好的網站。

如果您有減少網站能耗的技巧,請聯繫並告知我們

另外,如果您有興趣創建更綠色的網絡空間,請閱讀並簽署《可持續網絡宣言》

彩蛋小撇步!

自從發布此文以來,我們還就如何減少網站的能耗提出了一些其他建議。

18. 阻止爬蟲

BlogVault 的 Akshat Choudhary 建議,阻止網絡爬蟲可以降低能耗。他說:「網絡爬蟲通常會佔用處理和帶寬等資源的50%。」

19. 深色模式

Hazel Ho 建議減少空白空間並採用深色模式。深色的網站是許多年前在網站上普及的節能技術之一,並且隨著液晶屏幕的出現而逐漸消失,液晶屏幕不同於 CRT 屏幕具有永久背光,無論屏幕上實際可見的顏色如何,都使用相同的能量。但是,隨著 OLED 屏幕分別點亮每個像素的出現,使用較暗的顏色再次成為減少終端用戶設備能耗的可行技術。

20. 使用最新的 PHP 版本

這是來自 Kinsta 的 Katalin Juhasz 提出的建議,我們還應該考慮服務器上運行的技術,以確保我們使用最有效的版本。她特別提到,較新版本的 PHP 不僅速度更快,而且使用的服務器資源更少,因此能耗也更少。 Kinsta 撰寫了有關更新 PHP 版本的好處以及對性能的影響的文章。毫無疑問,這也將適用於其他非 PHP 的方案。




如果我們不能保護地球,我們就也不能保護我們自己。環保不是送給瀕危野生動物的禮物,而是在實實在在地保護我們自己。少點一次外賣,不要浪費食物,循環利用塑料袋,使用公交卡而非二維碼搭乘公共交通,減少網上衝浪的時間用來思考,這些都是有用的。