iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
1
Modern Web

透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 系列 第 27

不會程式也能用 VurPress 玩 JAMStack 架設網站(1)

不會程式也能用 VurPress 玩 JAMStack 架設網站(1)

我在研究 JAMstack 的過程中,一直在想是否能夠整理出一個流程,讓即使是完全不懂技術的使用者也能簡單的架設出一個網站,同時還能保有一定程度的客製化。

於是這篇文章就產生了,這邊我用來示範操作的模板依然是之前已經介紹過的 z3by/vuepress-blog-template


先來到 Template 的 Repository

來到 Template 的 Repo 後,點擊右上角的 Fork 按鈕,可以將 Repo 整份複製你自己的帳號下方,透過 Fork 我們才能取得 Repo 的控制權。

Forking~~~~

Fork 完成後,可以看到 Repo 前面是我們的帳號,只是下方會顯示來源


建立 CI/CD 腳本

進入儲存庫之後,第一件事情就先來透過滑鼠點擊資料夾的方式,進入 vuepress-blog-template/.github/workflows/ 目錄來設置自動化部屬的腳本

進入目錄後點擊 Add file > Create new file 來新增檔案

接著如上圖步驟,依序輸入檔案名稱、檔案內容後進行儲存,檔案內容其實就是前面章節有提到過的 GitHub Actions 腳本:

name: Deploy gh-pages

on:
  push:
    branches:
      - master

jobs:
  build:
    name: Build and deploy gh-pages
    env:
      MY_SECRET   : ${{secrets.commit_secret}}
      PUBLISH_DIR : .vuepress/dist
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x]

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - uses: borales/actions-yarn@v2.0.0
      with:
        cmd: install # will run `yarn install` command
    - uses: borales/actions-yarn@v2.0.0
      with:
        cmd: build # will run `yarn build` command
    - name: Commit files
      run: |
        echo ${{secrets.DEPLOY_PASSWORD}} | sudo -S chown -R $USER:$USER $PUBLISH_DIR
        cd $PUBLISH_DIR
        git init
        git config --local user.email "action@github.com"
        git config --local user.name "GitHub Action"
        git status
        git remote add origin https://$MY_SECRET@github.com/$GITHUB_REPOSITORY.git
        git checkout -b gh-pages
        git add --all
        git commit -m "deploy to Github pages"
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        branch: 'gh-pages'
        force: true
        directory: '.vuepress/dist'

開始運行 GitHub Actions 部署腳本

在儲存之後,其實 GitHub Actions 就會自動開始運行了,我們可以在 Actions 的頁籤中看到目前正在運行中與已經失敗的腳本

圖示中第一個的 Actions 顯示已經失敗,但這個可以暫時先無視,這是因為 z3by/vuepress-blog-template 專案中有設置 Markdown 語法檢查機制,但是預設的內容卻不符合檢查規則,這個錯誤並不影響網站的部署,所以這邊暫時不作處理。

不過其實,我們剛剛才加入的 Deploy 腳本也會發生錯誤喔:

這個原因其實是模板中 config.js 的某參數設置不當造成的,我們下一篇再來解決這個問題囉。


上一篇
來用 Vue 玩弄 Markdown 囉
下一篇
不會程式也能用 VurPress 玩 JAMStack 架設網站(2)
系列文
透過 VuePress 建構 JAMstack 網站來肆意玩弄 Markdown 30

尚未有邦友留言

立即登入留言