Jekyll、Hugo、Gatsby 都是靜態網站產生器(Static Site Generator,SSG),用於快速生成網站、博客等靜態網頁。

Jekyll
最古老、最穩定的 SSG 之一,是 GitHub 官方支持的 SSG。它使用 Ruby 撰寫,
可以輕鬆地在 GitHub Pages 上使用。Jekyll 優點是簡單易用,
有許多模板和主題可用,但其靜態網站生成速度較慢。

Hugo
是另一個受歡迎的 SSG,使用 Go 撰寫。它生成速度非常快,
支持多種模板引擎和主題,並有一個活躍的社區和豐富的文件。

Gatsby
最新的 SSG 之一,使用 React 撰寫。它優化了前端體驗,可以生成非常快速和互動的靜態網站。
它還支持許多插件和主題,可以與多種後端(如 WordPress)集成。

總體來說,Jekyll、Hugo、Gatsby 都是優秀的 SSG,具有各自的優點和特點,可以根據不同的需求和技術偏好進行選擇。

這邊就決定是你了  Gatsby
官網 https://www.gatsbyjs.com/

doc https://www.gatsbyjs.com/docs/conceptual/gatsby-concepts

 

gatsby v4需要node 14以上

image

安裝gatsby-cli

image

image

image

建新專案:
gatsby new [rootPath] [starter]     

自動長出結構如下:

image

image

npm install

npm run develop

image

image

會連graphQL一起架起來
一個簡單直覺的SQL語法

image

nginx

nginx、Apache  web server 的兩大巨頭
效能上的比較 Nginx 在處理 IO 並發與靜態文檔方面效能是比 Apache 還要好(3倍速度)、
配置更簡易、占用資源較少

只需執行 gatsby build 命令,所有網站數據都被打包到 public 文件夾中,
拷貝此文件夾到 nginx 即可完成網站發布。

 

下載 nginx     
https://nginx.org/en/download.html

image


啟動 nginx   
解壓縮後cmd進道路徑下直接  nginx start

image


查詢啟動是否成功     

image

image

image
 

關閉 nginx

強制停止 nginx -s stop 或 正常程序的停止 nginx -s quit

報錯:

(2: The system cannot find the file specified)

拿PID殺掉:
taskkill /F /PID 17152

 

image

 

開機自啟動nginx教學: https://monkeyjhong.pixnet.net/blog/post/340922532

固定IP

我們家是大大寬頻群健 網路上申請書填一填 拍照後以 e-mail 就可以了
我是截圖後手寫板在小畫家寫一寫 環保又快速

image

image

設備序號在家裡路由器上的貼紙上有

填到cpe mac那欄的是:

MAC address (媒體存取控制位址) 有時候也會稱為 LAN Address (區域網路位址)、
Ethernet Address (乙太網路位址)、burned-in address (燒寫位址)
或 Hardware address (硬體位址)、Physical Address (實體位址) 等名詞,這些全部都是「同義字」

image

image

or

cmd ipconfig /all

實體位址:0C-9xxxxxxxxxxxx

image

 

EMAIL寄出後1個多小時就收到回應了
隔天就收到手機簡訊通知固定ip

 

 

 

最後前面gatsby build 出的整包public丟進nginx html
nginx.config 再簡單設定一下指進去就搞定拉

 

更新 套件直接換成
https://www.gatsbyjs.com/plugins/gatsby-plugin-google-gtag/

可以支援新版GA4 gtag 

更上server後過個五分鐘用無痕開網站就看到有了

image

 

 

gatsby有google analytic分析插件可以用

gatsby-plugin-google-analytics

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/

 

一開始配置一直通不了 後來發現TRACKING ID放錯
GOOGLE代碼跟追蹤ID是不一樣的東西
這裡要配置的trackingId是前綴為UA-的那一個

 Google analytics 目前的最新版本 GA4 為「G_ID」,
「UA_ID」

image

image



image

image

 

favicon

image

image

 

arrow
arrow
    全站熱搜

    MonkeyJ 發表在 痞客邦 留言(0) 人氣()