GitHub Pages

GitHub Pages 鏄 GitHub 鎻愪緵鐨勫厤璐归潤鎬佺綉绔欐墭绠℃湇鍔★紝閫傚悎鎵樼′釜浜哄崥瀹銆侀」鐩鏂囨。銆佷綔鍝侀泦绛夈

姒傝堪

GitHub Pages 鐗圭偣锛

鍏嶈垂鎵樼锛氬叕寮浠撳簱鍏嶈垂浣跨敤
鑷瀹氫箟鍩熷悕锛氭敮鎸佺粦瀹氳嚜宸辩殑鍩熷悕
HTTPS 鏀鎸锛氳嚜鍔ㄦ彁渚 SSL 璇佷功
Jekyll 鏀鎸锛氬唴缃 Jekyll 闈欐佺綉绔欑敓鎴愬櫒
Actions 闆嗘垚锛氭敮鎸佽嚜鍔ㄥ寲閮ㄧ讲

缃戠珯绫诲瀷

鐢ㄦ埛/缁勭粐绔欑偣

浠撳簱鍚嶅繀椤绘槸 <username>.github.io锛岃块棶鍦板潃涓 https://username.github.io銆

椤圭洰绔欑偣

浠绘剰浠撳簱閮藉彲浠ュ惎鐢 Pages锛岃块棶鍦板潃涓 https://username.github.io/repo-name銆

蹇閫熷紑濮

鍒涘缓鐢ㄦ埛绔欑偣

鍒涘缓鍚嶄负 <username>.github.io 鐨勪粨搴
娣诲姞 index.html 鏂囦欢锛

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>鎴戠殑缃戠珯</title>
</head>
<body>
  <h1>Hello, GitHub Pages!</h1>
</body>
</html>

鍦ㄤ粨搴 Settings > Pages 涓閫夋嫨閮ㄧ讲鍒嗘敮
绛夊緟鍑犲垎閽熷悗璁块棶 https://username.github.io

鍒涘缓椤圭洰绔欑偣

杩涘叆浠撳簱 Settings > Pages
閫夋嫨 Source锛
- Deploy from a branch锛氫粠鍒嗘敮閮ㄧ讲
- GitHub Actions锛氫娇鐢 Actions 閮ㄧ讲
閫夋嫨鍒嗘敮鍜岀洰褰曪紙鏍圭洰褰曟垨 /docs锛
淇濆瓨鍚庣瓑寰呴儴缃插畬鎴

閮ㄧ讲鏂瑰紡

浠庡垎鏀閮ㄧ讲

鐩存帴浠庝粨搴撳垎鏀閮ㄧ讲闈欐佹枃浠讹細

Settings > Pages > Source > Deploy from a branch

閫夋嫨鍒嗘敮鍜岀洰褰曞悗锛孏itHub 浼氳嚜鍔ㄦ瀯寤哄拰閮ㄧ讲銆

浣跨敤 GitHub Actions 閮ㄧ讲

鎺ㄨ崘浣跨敤 Actions 閮ㄧ讲锛屾敮鎸佹洿澶氭瀯寤哄伐鍏凤細

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: 璁剧疆 Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: 瀹夎呬緷璧
        run: npm ci
      
      - name: 鏋勫缓
        run: npm run build
      
      - name: 閰嶇疆 Pages
        uses: actions/configure-pages@v4
      
      - name: 涓婁紶浜х墿
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist
  
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: 閮ㄧ讲鍒 GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

闈欐佺綉绔欑敓鎴愬櫒

React 搴旂敤

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./build

娉ㄦ剰锛氶渶瑕佸湪 package.json 涓璁剧疆 homepage锛

{
  "homepage": "https://username.github.io/repo-name"
}

Vue 搴旂敤

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

閰嶇疆 vite.config.js锛

export default defineConfig({
  base: '/repo-name/',
})

Next.js 闈欐佸煎嚭

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

閰嶇疆 next.config.js锛

const nextConfig = {
  output: 'export',
  basePath: '/repo-name',
}

Docusaurus

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - uses: actions/upload-pages-artifact@v3
        with:
          path: ./build

閰嶇疆 docusaurus.config.js锛

module.exports = {
  url: 'https://username.github.io',
  baseUrl: '/repo-name/',
}

Jekyll

Jekyll 鏄 GitHub Pages 鍐呯疆鏀鎸佺殑鐢熸垚鍣锛岀洿鎺ユ帹閫 .md 鏂囦欢鍗冲彲銆

鍒涘缓 _config.yml锛

title: 鎴戠殑鍗氬
description: 涓浜烘妧鏈鍗氬
theme: minima

鍒涘缓鏂囩珷 _posts/2024-01-01-hello-world.md锛

---
layout: post
title: "Hello World"
date: 2024-01-01
---

杩欐槸鎴戠殑绗涓绡囧崥瀹㈡枃绔犮

鑷瀹氫箟鍩熷悕

閰嶇疆鑷瀹氫箟鍩熷悕

鍦ㄤ粨搴 Settings > Pages > Custom domain 涓濉鍐欏煙鍚
鍦ㄥ煙鍚嶆湇鍔″晢澶勯厤缃 DNS锛

Apex 鍩熷悕锛堝 example.com锛锛

A 璁板綍锛
199.108.153
199.109.153
199.110.153
199.111.153

**瀛愬煙鍚嶏紙濡 www.example.com锛**锛

CNAME 璁板綍锛歶sername.github.io

閰嶇疆鏂囦欢

鍦ㄤ粨搴撴牴鐩褰曞垱寤 CNAME 鏂囦欢锛

www.example.com

HTTPS

GitHub Pages 鑷鍔ㄤ负鑷瀹氫箟鍩熷悕鎻愪緵 HTTPS 璇佷功銆傞厤缃鑷瀹氫箟鍩熷悕鍚庯紝鍕鹃 "Enforce HTTPS"銆

閮ㄧ讲鏈浣冲疄璺

浣跨敤 gh-pages 鍒嗘敮

灏嗘瀯寤轰骇鐗╂帹閫佸埌 gh-pages 鍒嗘敮锛

name: Deploy

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - name: 閮ㄧ讲鍒 gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

棰勮堥儴缃

涓 Pull Request 鍒涘缓棰勮堥儴缃诧細

name: Preview

on:
  pull_request:
    types: [opened, synchronize, reopened]

permissions:
  contents: read
  pages: write
  id-token: write
  pull-requests: write

jobs:
  preview:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - name: 閮ㄧ讲棰勮
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: dist

甯歌侀棶棰

404 閿欒

妫鏌ヤ互涓嬮」鐩锛

鏂囦欢鍚嶆槸鍚︿负 index.html
鍒嗘敮鍜岀洰褰曢厤缃鏄鍚︽ｇ‘
鏄鍚︾瓑寰呬簡瓒冲熸椂闂达紙閫氬父鍑犲垎閽燂級

鏍峰紡鍔犺浇澶辫触

妫鏌 base 鎴 homepage 閰嶇疆鏄鍚︽ｇ‘锛

// Vite
base: '/repo-name/'

// React (package.json)
"homepage": "https://username.github.io/repo-name"

// Next.js
basePath: '/repo-name'

鍒锋柊椤甸潰 404

SPA 搴旂敤闇瑕侀厤缃閲嶅畾鍚戙傚垱寤 404.html 閲嶅畾鍚戝埌 index.html锛屾垨浣跨敤 HashRouter銆

鏋勫缓澶辫触

鏌ョ湅 Actions 鏃ュ織锛屽父瑙佸師鍥狅細

渚濊禆瀹夎呭け璐
鏋勫缓鍛戒护閿欒
杈撳嚭鐩褰曚笉姝ｇ‘

闄愬埗

GitHub Pages 鏈変互涓嬮檺鍒讹細

椤圭洰	闄愬埗
浠撳簱澶у皬	1GB
鏋勫缓鏃堕棿	10 鍒嗛挓
鏈堟祦閲	100GB
鏂囦欢鏁伴噺	100,000

鍙傝冭祫婧

GitHub Pages 瀹樻柟鏂囨。
Jekyll 鏂囨。
[GitHub Pages 涓婚榏(https://pages.github.com/themes/)

姒傝堪​

缃戠珯绫诲瀷​

鐢ㄦ埛/缁勭粐绔欑偣​

椤圭洰绔欑偣​

蹇閫熷紑濮​

鍒涘缓鐢ㄦ埛绔欑偣​

鍒涘缓椤圭洰绔欑偣​

閮ㄧ讲鏂瑰紡​

浠庡垎鏀閮ㄧ讲​

浣跨敤 GitHub Actions 閮ㄧ讲​

闈欐佺綉绔欑敓鎴愬櫒​

React 搴旂敤​

Vue 搴旂敤​

Next.js 闈欐佸煎嚭​

Docusaurus​

Jekyll​

鑷瀹氫箟鍩熷悕​

閰嶇疆鑷瀹氫箟鍩熷悕​

閰嶇疆鏂囦欢​

HTTPS​

閮ㄧ讲鏈浣冲疄璺​

浣跨敤 gh-pages 鍒嗘敮​

棰勮堥儴缃​

甯歌侀棶棰​

404 閿欒​

鏍峰紡鍔犺浇澶辫触​

鍒锋柊椤甸潰 404​

鏋勫缓澶辫触​

闄愬埗​

鍙傝冭祫婧​

姒傝堪