跳至主要内容

6 篇文章 含有標籤「Tech」

檢視所有標籤

· 閱讀時間約 5 分鐘
Willis Chen

在這篇文章中,將探討如何使用Python的PlayWright模組來抓取巴哈姆特動漫瘋的彈幕數據。 目標如下:

  • 認識PlayWright
  • 如何安裝PlayWright。
  • 如何利用PlayWright控制網頁行為。
  • 如何改寫腳本,抓取、整理和儲存需要的數據。

什麼是PlayWright?

PlayWright 是Microsoft推出的開源專案,是一個Python用戶端,讓我們能夠自動化Web瀏覽器的行為,包括Chrome, Firefox, 和Safari等主流瀏覽器。你可以使用它來進行網站測試、抓取資料,甚至製作自動化的網頁腳本。透過PlayWright,你能控制整個瀏覽過程,包括產生彈幕等動態內容。

如何安裝PlayWright

安裝PlayWright相當簡單,只需要在你的命令列工具 (例如:終端機或Command Prompt) 輸入以下命令即可:

> pip install playwright

如何利用PlayWright控制網頁行為

首先,我們需要啟動一個PlayWright的實例,並且以我們選定的瀏覽器來執行我們的程式。以下是一個以Chromium瀏覽器為例的程式碼,同理也可以使用webkit瀏覽器:

> python -m playwright codegen -b chromium

執行上述命令後,您將開啟一個Chromium瀏覽器並開始與其互動。你的每一個操作,都會自動生成對應的Python程式碼。

codegen命令包含一些可用的參數,例如:

  • --target: 設定你的程式語言,如 python、JavaScript等。
  • -o: 指定存放生成程式碼的檔案名稱。
  • -b: 選擇你想要使用的瀏覽器,如 chromium、firefox或webkit。

以下是一個實際的例子,使用webkit瀏覽器抓取巴哈姆特動漫瘋網站並將程式碼儲存在damun.py文件中:

> python -m playwright codegen --target python -o damun.py -b webkit https://ani.gamer.com.tw/

此時的damun.py內容參考如下:


from playwright.sync_api import Playwright, sync_playwright
from bs4 import BeautifulSoup
import json
import sys
import time


def run(playwright: Playwright, sn) -> None:
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()

page.goto(f"https://ani.gamer.com.tw/animeVideo.php?sn={sn}")
time.sleep(5)

# screenshot
page.screenshot(path='ani.jpg', full_page = True)

### 稍後加上網頁解析
### 稍後加上內容萃取
### 稍後加上資料儲存

page.close()

# ---------------------
context.close()
browser.close()


with sync_playwright() as playwright:
run(playwright, sys.argv[1])

修改PlayWright腳本

為了包含抓取後的解析及整理,可以在前面透過點選產製的damun.py腳本中,新增解析的程式

  • 網頁解析: page內容為HTML,將其轉換成BeautifulSoup物件,方便後續操作。

    from bs4 import BeautifulSoup

    soup = BeautifulSoup(page.content(), 'lxml')
  • 內容萃取: 這邊藏的一個很關鍵的做法,用For迴圈直接將結果設計為JSON like的Python Dictionary格式。

    • 每次回圈的過程一次性的將擷取對象整理好。
      # for-loops
      res = []
      k = {}
      for li in soup.select('.sub-list-li'):
      k['userid'] = li.select_one('.name > span').text.strip()
      k['text'] = li.select_one('.sub_content').text.strip()
      k['msg_time'] = li.select_one('b').text.strip()
      print(k)
      res.append(k)
    • 如果你熟悉列表推導式(list comprehension),以下改寫更為直觀:
          res = [ {
      'userid': li.select_one('.name > span').text.strip(),
      'text' : li.select_one('.sub_content').text.strip(),
      'msg_time' : li.select_one('b').text.strip()
      } for li in soup.select('.sub-list-li')]
  • 資料儲存: 將Dict樣式存成JSON格式,方便後續運用。

    import json

    with open(f'damun_{sn}.json', 'w') as f:
    json.dump(res, f)
  • 最終的damun.py腳本內容:


from playwright.sync_api import Playwright, sync_playwright
from bs4 import BeautifulSoup
import json
import sys
import time


def run(playwright: Playwright, sn) -> None:
browser = playwright.chromium.launch(headless=False)
context = browser.new_context()
page = context.new_page()

page.goto(f"https://ani.gamer.com.tw/animeVideo.php?sn={sn}")
time.sleep(5)

# screenshot
page.screenshot(path='ani.jpg', full_page = True)

# 網頁解析
soup = BeautifulSoup(page.content(), 'lxml')

# 內容萃取(列表推導式)
res = [ {
'userid': li.select_one('.name > span').text.strip(),
'text' : li.select_one('.sub_content').text.strip(),
'msg_time' : li.select_one('b').text.strip()
} for li in soup.select('.sub-list-li')]

print(res)


# 資料儲存(JSON檔)
with open(f'damun_{sn}.json', 'w') as f:
json.dump(res, f)

page.close()

# ---------------------
context.close()
browser.close()
return res


with sync_playwright() as playwright:
run(playwright, sys.argv[1])

執行playwright腳本

接下來,執行我們生成的腳本,可以在命令列執行腳本。

33846為動畫的編號,可以更換成想要分析的動畫序號。

python damun.py 33846

然後,使用Python的ast模組將結果轉換為Python對象。以下是一個實際的例子:

# 此欄位內容於ipynb執行
res = ! python damun.py 33846
import ast
res = [ast.literal_eval(i) for i in res]
print(res)

將內容存為page.json

有兩種方式可以將我們獲得的結果儲存為json格式。一種方式是使用linux的命令行將結果重定向到一個json檔案中。例如:

> python damun.py 33846 > page.json

另一種方式是直接在Python腳本中將結果儲存為json檔案。以下是一個實際的例子:

import json

file_name = 'damun_33846.json'

with open(file_name, 'r', encoding='utf-8') as f:
my_data = json.loads(f.read())

print(my_data)

print(type(my_data))

解析的結果為:

擷取完成!

重點精華

  • PlayWright可以輕鬆的將使用者操作流程紀錄為程式碼。
  • PlayWright與Selenium最大的差異,不用刻意搜尋並安裝對應版本的模擬瀏覽器。
  • 結合常用的Beautiful可以快速解析內容,我偏好用類似CSS Selec。
  • 用列表推導式將爬梳的資料整理成字典,語法相當簡潔。
  • 將結果儲存成JSON2檔案,方便後續運用

小結

在上述的Python腳本中,首先定義了我們的檔案名稱。然後,我們使用Python的內建函數open讀取該檔案。最後,我們使用json模組的loads函數將讀取到的資料轉換為Python物件。

以上就是如何使用PlayWright抓取並分析巴哈姆特動漫瘋的彈幕數據的全過程。透過這個過程,我們不僅學習到如何使用PlayWright,如果有興趣,後續再介紹如何進一步分析數據,歡迎留言讓我知道。

· 閱讀時間約 5 分鐘
Willis Chen

用 "LINE Chat BOT"可以解決什麼問題

  • 隨手筆記的需求
  • 從不同APP分享連結的蒐集去處
  • 不用再經手別的生產力工具,直接歸一到最熟悉的HackMD

建立 "LINE Chat BOT" 的流程

  • 首先要申請 HackMD API
  • LINE Developers 創一個專屬 Channel,取得Token等資訊與訊息設定。
  • 在 Fly.io 創立雲端服務、建立好開發連線環境。
  • Fork 我的GitHub HackMD LINE bot on fly 程式碼,修改為您準備部屬在 Fly.io 的 LINE BOT 程式。
  • 將您 Fly.io 的連結 https://[APP Name].fly.io/callback填入您LINE Channel 的 Webhook。
  • 感動! 成功!。

LINE Chat BOT程式碼

https://github.com/willismax/hackmd-line-bot-on-fly

"LINE Chat BOT" 功能需求

  • 標示@靈感為開頭的文字,將作為一個獨立的靈感筆記。 link text

  • 標示@TODO為開頭的文字,將寫入一個連續的的代辦清單。

  • 無上述標示的文字,將寫入一個連續附加的在暫存筆記。也就是從別的文章分享的超連結都直接灌到此暫存筆記。

  • 如果要整理筆記,用電腦編輯整理即可。

:::spoiler 部署教學文參考

如何建立 LINE bot

  • LINE Developers 登入您的 LINE 帳號,建立 Provider 以及所屬 Channel, Channel 名稱就是您的 LINE bot 名稱,管理方式如同 LINE 官方帳號

  • 用程式控制的聊天機器人需要以下3個參數,請保管好勿外流。 在此範例程式中,需要將 Channel 查到的以下參數填入config.py檔案。

    CHANNEL_ACCESS_TOKEN = ''
    CHANNEL_SECRET = ''
    LINE_USER_ID = ''

在 Fly.io 創立與部署雲端服務

先 Clone Fly.io 的 Python 示範專案。

  • 在本機電腦安裝git,您可以先完成以下示範範例後,再將程式碼改成LINE Chat BOT程式碼即可。

    git clone https://github.com/fly-apps/python-hellofly-flask
  • 進入專案資料夾

    cd  .\python-hellofly-flask\
  • 安裝該專案所需的外部套件

    python -m pip install -r requirements.txt
  • [選用] 如果要在本機進行開發測試,可以設置環境變數FLASK_APP,目的是指定主程式的執行檔,對此專案而言主程式為hellofly.py,經指定後flask run指定就是跑主程式,而且要結合 Ngrok建立臨時通道,對您來說太複雜的話可以跳過,只是各種測試就必須等待部署後。

    //設置環境變數
    export FLASK_APP=hellofly.py #linux
    set FLASK_APP=hellofly.py #windows
    //日後啟動flask的指令
    flask run

    !! 如果用環境變數都跑不出來,退而求其次,在hellofly.py最後加入:

    if __name__ == '__main__':
    app.run(debug=True)

    啟動flask指令改為python hello.py,請注意,這不是flask現在建議的啟用方式,本方法只適用於本機測試。

使用fly ctl 指令工具完成部署

上述範例程式碼測試無誤後,接續安裝 fly ctl 指令工具。Fly.io 最方便部署服務的方式是使用終端機指令工具flyctl,可以讓本機直接部署。

  • 安裝flyctl
    PowerShell

    iwr https://fly.io/install.ps1 -useb | iex

    Mac

    brew install flyctl #MAC

    Linux

    curl -L https://fly.io/install.sh | sh #LINUX
  • 用 flyctl 登入 fly.io

    flyctl auth login
  • 啟動一個 fly App 專案,執行 flyctl launch

    flyctl launch
  • 選擇伺服器區域,台灣鄰近的區域有香港、東京可選。

  • 修改程式,這邊在範例專案中特別提醒,Procfile檔案為設定連線服務用,與您的主程式檔名務必相符,也就是原本為web: gunicorn server:app記得改成web: gunicorn hellofly:app,這原理跟部署在 Heroku 是一樣的。

    # file name: Procfile

    web: gunicorn hellofly:app
    ^^^^^^^^記得確認為主程式
  • 檢查完程式後,一鍵佈署。

    flyctl deploy
  • 查看佈署,其中hostname就是網址了,可以用flyctl status確認狀態、用flyctl open開啟 APP、用flyctl logs確認有無 BUG。

    flyctl status    
    flyctl open
    flyctl logs
  • 如果需要設定 secrets

    flyctl secrets set DATABASE_URL= ....

    取消 secrets

    flyctl secrets unset DATABASE_URL= ....

    列出 secrets list

    flyctl secrets list

LINE Chat BOT程式碼

https://github.com/willismax/hackmd-line-bot-on-fly

  • 可以對照您上述部署完成的python-hellofly-flask程式碼進行修改,

    • 填入對應的參數到config.py
    • 修改app.py
    • 修改requestments.txt
  • 執行flyctl deploy部署。請注意,*.toml請用您自己的,該檔案是由 flyctl launch 產生,為了您的專案部屬所需的檔案,用範例檔會出錯唷。

  • 也請記得補上 HackMD API token 與筆記ID相關資訊:

    HACKMD_API_TOKEN = ''
    TODO_NOTE_ID = '' # paste your fixed TODO note id, len == 22
    TEMP_NOTE_ID = '' # paste your fixed TEMP note id, len == 22
  • 上述有問題的話就耐心看flyctl logs,我常作的方式是開兩個終端機,一個執行操作、一個看 log 。

  • 部署完成後,記得把您的 fly.io 專屬服務網址貼入 LINE Channel 的 Webhook ,網址應為 https://[APP Name].fly.io/callback ,特別是 */callback 記得填,並且設定開啟 Webhook。

  • 恭喜您完成!

· 閱讀時間約 2 分鐘
Willis Chen

多元化的課程內容 📚🎥

六角學院是台灣前端知名的線上教學服務平台,這次已非常少的售價開設了短期密集軟工體驗營,體驗的內容包含前端基礎、CSS、SCSS、切版任務、JS、Jquery、Ajax、Axios,在這次的體驗營中,我們在有限的時間內接觸了相當多的課程內容。這些線上影音很多是不同的直播、教學課程的集合。真的讓我感到既驚訝又欣喜!🎉

每日的切版與JS練習 🖥️🔬

除了假日以外,每日我們都有關於切版、JS的兩種練習。最後,這些練習都會回到產出作業上,讓我們有機會將所學應用到實際操作中,真的是學以致用!💡📝

作業審視與助教回饋 📋🔍

在產出作業的過程中,作業等級越高越完整。而這其中,最讓我感動的是有助教群細心審視我們的作業並提供回饋。這樣的機會真的非常難得,我們能夠從中學習到很多,進步也就在這一點一滴中實現。👍👏

交流討論與提問 🗣️💭

最後,也很感謝能夠在課程提問區提出問題,並透過交流討論來解答疑惑,慢慢走也是會往前的😊🐢

總結來說,我真的很感謝六角學院提供這樣的體驗機會。從中我學習到很多,並且在學習的道路上也逐步累積。期待下一次的學習體驗!🎈🚀

· 閱讀時間約 5 分鐘
Willis Chen

hackmd-github-sync-badge

如果你是一個 Docusaurus 使用者,你可能已經知道如何使用 Github Pages 部署你的網誌。但是,手動更新並部署你的網誌非常耗時,而且容易出錯。為了解決這個問題,你可以使用 GitHub Actions 來自動生成和部署你的網誌,這樣你就可以專注於撰寫新的文章了。

什麼是 GitHub Actions?

GitHub Actions 是一個自動化工具,可以幫助你自動執行各種任務,例如建立和測試你的應用程序,將你的應用程序部署到不同的環境中,或者自動發佈你的網誌文章。你可以使用 GitHub Actions 的預設工作流程,或者創建自己的自訂工作流程。

如何使用 GitHub Actions 自動部署 Docusaurus 網誌?

下面是一個簡單的步驟,可以幫助你在 GitHub Actions 中自動生成和部署你的 Docusaurus 網誌。

  1. 在你的 Docusaurus 存儲庫中,創建一個名為 .github/workflows/deploy.yml 的文件。

  2. deploy.yml 文件中添加以下內容:

    name: Deploy website
    on:
    push:
    branches:
    - main
    jobs:
    deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Install Node.js
    uses: actions/setup-node@v1
    with:
    node-version: '14.x'
    - name: Build and deploy
    uses: JamesIves/github-pages-deploy-action@4.1.3
    with:
    branch: gh-pages
    folder: build
    clean: true

    這個工作流程會在主分支上進行 push 時運行。它會在最新的 Ubuntu 環境中運行,安裝 Node.js,構建你的 Docusaurus 網誌,然後將它部署到 gh-pages 分支。

  3. 在你的 Docusaurus 存儲庫中,建立一個名為 build 的文件夾。

  4. 執行以下命令,生成你的 Docusaurus 網誌:

    npm run build` 

    這將在 build 文件夾中生成編譯後的靜態網頁。

  5. 執行以下命令,將你的更改提交到存儲庫中:

    git add .
    git commit -m "Update website"
    git push

    這會觸發 GitHub Actions,自動生成和部署你的 Docusaurus 網誌。你可以在 GitHub Actions 的頁面上查看進度和結果。如果一切順利,你的網誌應該已經部署到 gh-pages 分支中。

  6. 現在你可以在瀏覽器中訪問你的網誌,例如 https://yourusername.github.io/yourblog/。如果一切正常,你應該能夠看到你的網誌文章。

如何優化你的 Docusaurus 網誌的 SEO?

現在你已經成功地使用 GitHub Actions 自動部署了你的 Docusaurus 網誌,接下來你可能想要優化你的網誌的 SEO,以便更好地吸引流量和讀者。以下是一些簡單的技巧,可以幫助你優化你的網誌的 SEO。

1. 使用關鍵字進行標題和內容的優化

在你的網誌文章的標題和內容中使用關鍵字,以便搜索引擎能夠更好地理解你的內容,並將其排名更高。但是,不要過度使用關鍵字,否則你的內容可能會被搜索引擎視為垃圾郵件。關鍵字優化的訣竅是參考Google搜尋結果的相關搜尋,將相關搜尋的文章進一步整理為合適的內容,讓讀者能在這一篇文章就可以滿足需求。

2. 創建有價值的內容

創建有價值的內容是吸引讀者和排名更高的關鍵。寫出具有深度和價值的內容,以便讀者和搜索引擎都能夠看到你的專業知識和價值,自己的洞見非常重要,讀者不會想只看到類似 ChatGPT 生成的大量文章。

3. 使用適當的標記和元數據

使用適當的標記和元數據,例如標題標記、描述標記和關鍵字標記,以幫助搜索引擎更好地理解你的內容。同時,使用適當的元數據,例如 Open Graph 協議和 Twitter 卡片,以使你的內容在社交媒體上分享時更有吸引力。

4. 使用友好的 URL

使用友好的 URL,以便讀者和搜索引擎更好地理解你的內容。使用有意義的字詞和短條目,避免使用難以理解的符號和數字。同時,使用靜態 URL,以便搜索引擎可以更輕鬆地索引你的網站。

5. 關注網站的速度和性能

優化你的網站的速度和性能,以便更好地吸引流量和提高排名。使用快速的網站主機和優化的圖像,避免使用過多的 JavaScript 和 CSS,以減少網站的加載時間。同時,使用快取和網站緩存,以便減少服務器負載並提高網站的速度。

6. 建立高質量的內部和外部連結

建立高質量的內部和外部連結,以幫助搜索引擎更好地理解你的內容並提高你的排名。使用有意義的錨文本和鏈接到相關的內容,同時建立高質量的外部鏈接,以提高你的網站的權威性和排名。

7. 監測和分析你的流量和排名

監測和分析你的網站的流量和排名,以了解你的目標讀者是誰,以及他們如何找到你的內容。使用 Google Analytics 或其他分析工具來跟踪你的流量和排名,並根據這些數據調整你的 SEO 策略。

結論

使用 GitHub Actions 自動部署你的 Docusaurus 網誌是一個簡單而有效的方式,可以幫助你更輕鬆地管理和更新你的網誌。同時,優化你的網誌的 SEO 是一個重要的步驟,可以幫助你吸引更多的流量和讀者,並提高你的排名。遵循上述的技巧和策略,你可以建立一個成功的網誌,吸引更多的讀者和流量,並在搜索引擎上排名更高。

· 閱讀時間約 2 分鐘
Willis Chen

hackmd-github-sync-badge

您也想要自己用AI繪圖嗎?

  • 生成式AI ( AIGC ) 是2023年的顯學,開源的 AI 繪圖模型越來越多,在Civitai有非常多網友創作(需註冊,許多有年齡限制),您也想自己嘗試嗎? 網路上已經有許多自行下載執行 Python 程式與模型,但就需要自備 GPU 顯卡。
  • 有網友在此 GitHub 整理諸多 AIGC 模型,而且可以用 Colab 直接產圖, Colab 是個可以免費暫時執行 GPU 運算的虛擬機,可執行 Python 及 Linux指令,您唯一要付出的是等待時間,一起來製作香香的圖吧。

在這個範例,您只要兩個步驟就可以完成囉:

  1. 打開以下 Colab ,一鍵執行以下程式碼,程式跑完會出現3個連結,點選第2個連結會開啟新分頁,是生圖的 UI 介面。
  2. 在介面新介面的 Text2Img 有兩個文字框,可以輸入以下兩個正向、負向語詞(Prompt),
    • 正面語詞
      8k, RAW photo, best quality, masterpiece:1.2), (realistic, photo-realistic:1.4), ultra-detailed, (Kpop idol),perfect detail ,  looking at viewer,make up,
    • 負面語詞
      paintings,sketches, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, bad anatomy,(long hair:1.4),DeepNegative,(fat:1.2),facing away, looking away,tilted head, {Multiple people}, lowres,bad anatomy,bad hands, text, error, missing fingers,extra digit, fewer digits, cropped, worstquality, low quality, normal quality,jpegartifacts,signature, watermark, username,blurry,bad feet,cropped,poorly drawn hands,poorly drawn face,mutation,deformed,worst quality,low quality,normal quality,jpeg artifacts,signature,watermark,extra fingers,fewer digits,extra limbs,extra arms,extra legs,malformed limbs,fused fingers,too many fingers,long neck,cross-eyed,mutated hands,polar lowres,bad body,bad proportions,gross proportions,text,error,missing fingers,missing arms,missing legs,extra digit, extra arms, extra leg, extra foot,
  • 還可以img2img繼續生圖

Colab 遏阻了腳本指令濫用

  • 鑒於越來越多人使用 Colab 跑 stable-diffusion,已經對前述 WebUI 的腳本操作封鎖,您可以有限制的使用或付費,但最好的情況是自行下載在自己的電腦跑,如果電腦運算資源夠的話。
  • 相信未來會有更適當的做法,像是 Bing 可以直接以文字繪圖(模型是 OpenAI 的 Dell.E),或者使用 Leonardo.ai 就可以做出驚人的效果。

參考

· 閱讀時間約 4 分鐘
Willis Chen

如何使用 GitHub Pages 部署 Docusaurus,可以透過以下步驟,輕鬆地建立自己的網誌。

  • 步驟1. 事前準備一個 GitHub 帳號,並且安裝 Git 工具Node.js
  • 步驟2. 創建新的 Repository,作為 GitHub Pages 靜態網頁存放用。
  • 步驟3. 下載 Docusaurus 範本
  • 步驟4. 安裝和測試 Docusaurus

步驟一:事前準備

在開始之前,我們需要先確保以下條件都已經滿足:

  • 一個 GitHub 帳號,可以在 GitHub 上免費註冊。
  • 安裝 Git 工具,可以從 Git 官網 下載安裝包進行安裝。
  • 安裝 Node.js 和 npm,可以在 Node.js 官網 下載安裝包進行安裝。

步驟二:創建新的 Repository

首先,在 GitHub 上創建一個新的 Repository,用來存放網誌的代碼和部署文件。以下是創建 Repository 的步驟:

  1. 登錄 GitHub,進入主頁面。
  2. 點擊右上角的 “+” 按鈕,然後選擇 “New repository”。
  3. 在創建 Repository 的頁面中,填寫 Repository 名稱、描述和設置等信息,然後點擊 “Create repository” 按鈕創建 Repository。

步驟三:下載 Docusaurus 範本

接下來,我們需要下載 Docusaurus 的範本代碼,作為網誌的基礎。以下是下載 Docusaurus 範本的步驟:

  1. 打開命令行工具,進入要存放 Docusaurus 範本的文件夾。
  2. 輸入以下命令,下載最新版本的 Docusaurus 範本:
    npx @docusaurus/init@latest init my-blog classic
  3. 執行命令後,Docusaurus 範本會被下載到當前目錄下的 my-blog 文件夾中。

步驟四:安裝和測試 Docusaurus

在下載 Docusaurus 範本之後,我們需要進行安裝和測試,以確保網誌可以正常運行。以下是安裝和測試 Docusaurus 的步驟:

  1. 進入 my-blog 文件夾,打開命令行工具。

  2. 輸入以下命令,安裝 Docusaurus 和相關的依賴:

    npm install
  3. 安裝完成後,輸入以下命令,啟動 Docusaurus 的本地測試服務:

    npm start
  4. 在 Github 上建立新的 repository

    在 Github 上建立一個新的 repository,命名為 {username}.github.io,其中 username 是你的 Github 使用者名稱。例如,我的 Github 使用者名稱是 chatgpt,因此我會命名我的 repository 為 chatgpt.github.io

  5. 將 Docusaurus 專案上傳至 Github

    在你的電腦上開啟終端機(Terminal)或命令提示字元(Command Prompt),進入到 Docusaurus 專案的根目錄下,並執行以下指令:

    git init
    git remote add origin git@github.com:{username}/{username}.github.io.git
    npm run build
    npm run deploy

    其中,username 是你的 Github 使用者名稱,請注意要改成你自己的。這些指令的作用如下:

    • git init:初始化 Git 儲存庫。
    • git remote add origin git@github.com:{username}/{username}.github.io.git:設定 Git 儲存庫的遠端位置。
    • npm run build:建立 Docusaurus 專案的靜態網頁檔案。
    • npm run deploy:將靜態網頁檔案上傳至 Github。

    在執行 npm run deploy 的時候,會需要你輸入 Github 的使用者名稱和密碼(或是 Personal Access Token)。請輸入正確的資訊後,等待上傳完成。

  6. 檢查網站是否正常運作

    完成上傳後,打開瀏覽器,輸入 https://{username}.github.io,其中 username 是你的 Github 使用者名稱,就可以看到你的 Docusaurus 網站了!如果你看到了你的網站,那就代表部署成功了。

  7. 編輯 Docusaurus 網站

    現在,你可以開始編輯你的 Docusaurus 網站了。編輯完成後,只需要執行以下指令:

    git add .
    git commit -m "Update website"
    git push origin main

    其中,Update website 是你的提交訊息,你可以自己替換成任何訊息。執行這些指令後,你的修改就會自動更新到你的 Github Pages 上了。

結語

以上使用 Github Pages 部署 Docusaurus 教學,希望能幫助到您。