hexo博客CI自動部署網站[個人習慣]


簡 述: 前面有幾次因爲換了 Win 和 Mac 系統,且後面換過兩次主題,都是想着把前面舊的切斷,然後重新搭建;這裏再次記錄一下,用作備份,後面若是遷移,就有參考(這次涉及多 Action 自動化部署), 應該是不在需要再在新的環境中部署的


部署環境:

💻: MacOS 10.14.6 📎 uos20 amd64 📎 win10 2004
  在 Mac 和 Win 上面都有部署過靜態博客的經驗,其中 Mac 實際的坑會多一點。


部署記錄:

我的個人博客:現在是採用 Hexo + github Page + github 圖牀 + PicGo + cdn + Action 來完成自動化;

準備工作: 在本地機器上安裝 nodejshexo 這兩個,使用 --version 確認安裝成功;

注:其中 xmuliMark 爲在 github 上創建的新的空的倉庫,然後 clone 到本地機器的空文件夾;

# 建站:
hexo init xmuliMark
cd xmuliMark
npm install


# 使用 yun 主題
git clone -b master https://github.com/YunYouJun/hexo-theme-yun themes/yun
npm install hexo-render-pug hexo-renderer-stylus
將 yun 下的 .git 和 .github 文件夾 改名爲 backup.git 、backup.github # 便於後面 yun 主題升級
個性化配置 yun 和 hexo 主題


# hexo d 命令報錯 ERROR Deployer not found: git 的解決方案
npm install hexo-deployer-git --save


# 創建一個空的分支,設置爲默認分支,避免提交之後被記錄有貢獻
git checkout --orphan=noContributions
git rm -rf .
touch README.md
書寫 README.md
git push origin master  -f
在 github 網頁設置爲默認分支

在書寫 *.md 文章的倉庫中,在 github 網頁的 “settings-Secrets” 中,創建一個名爲 HEXO_DEPLOY_KEY 的變量(下面腳本會用到),其值爲本地機器的 git 私有祕鑰( cat ~/.ssh/id_rsa 所輸出的值);

在 xxx/.github/workflows/hexoDeploy.yml (注:hexoDeploy 可以爲任意名稱)裏面書寫如下;用作自動 CI (ACtion) 使用,自動部署到 xmuli.github.io 這個倉庫下。該腳本作用是收到 push 就會觸發,將這裏的倉庫解析爲腳本,生成網頁到 xmuli.github.io 倉庫下;

name: Hexo Deploy Automatically

on: [push]

jobs:
  build:

    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout
      uses: actions/checkout@v2
      
    - name: Node.js envs
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"
    
    - name: Hexo deploy
      env:
        HEXO_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
      run: |
        mkdir -p ~/.ssh/
        echo "$HEXO_DEPLOY_KEY" > ~/.ssh/id_rsa
        chmod 600 ~/.ssh/id_rsa
        ssh-keyscan github.com >> ~/.ssh/known_hosts
        git config --global user.name "xmuli"
        git config --global user.email "[email protected]"
        npm i -g hexo-cli
        npm i
        hexo clean && hexo generate && hexo deploy

經過上面的部署後,最終的效果如下:

可以在任意一臺電腦下書寫 .md 文件,然後 push 上傳的 github 的倉庫,就會自動部署看到的網頁;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章