搭建流程

• 在dev 分支使用Vuepress寫博客
• push到github
• github actions自動(dòng)生成靜態(tài)頁面部署到master分支
• github actions自動(dòng)部署到阿里云OSS
• 完成喜每，查看xiaomucool.github.io和xiaomucool.com

使用Vuepress

Vuepress是Vue 驅(qū)動(dòng)的靜態(tài)網(wǎng)站生成器枪眉，支持markdown語法痪宰、Emoji圖標(biāo)椅邓。

我們先來安裝它：

npm i vuepress -S

Vuepress默認(rèn)主題適合寫接口文檔弱匪，我們還要安裝適合博客的主題vuepress-theme-meteorlxy：

npm i vuepress-theme-meteorlxy -S

環(huán)境安裝好了青瀑，我們開始寫文章吧！文章存放目錄為：docs/_posts/**/*.md萧诫，它會(huì)默認(rèn)讀取這個(gè)文件夾下的md文件斥难。

主題vuepress-theme-meteorlxy需要配置一些參數(shù)，詳情請(qǐng)見主題指南

配置好主題后帘饶，在package.json文件下增加：

"scripts": {
  "dev": "vuepress dev docs",
  "build": "vuepress build docs"
},

運(yùn)行：

// 本地實(shí)時(shí)查看博客效果
npm run dev

// 構(gòu)建HTML頁面
npm run build

訪問http://localhost:8080/就能看到屬于你的博客頁面了哑诊。

部署到Github Pages

首先要開啟GitHub Pages，開啟方法是：倉庫Setting -> GitHub Pages及刻，Source選擇master branch镀裤，訪問[用戶名].github.io/[倉庫名]就能看到效果了竞阐。

如果想要在[用戶名].github.io根目錄下訪問，必須設(shè)置倉庫名為：[用戶名].github.io

GitHub Pages會(huì)自動(dòng)尋找index.html或README.MD作為網(wǎng)站入口暑劝。

使用Github Actions

Actions是自動(dòng)化運(yùn)維骆莹，持續(xù)集成服務(wù)，不了解的可以看我這篇文章：《Github Actions 教程》担猛。

需求：

我們把代碼提交到dev分支幕垦，希望Actions可以自動(dòng)npm run build并且把生成的HTML文件提交到master分支

實(shí)現(xiàn)：

首先在dev分支下創(chuàng)建.github/workflows/github_pages.yml：

name: Github Pages
# 觸發(fā)事件：push到dev
on:
  push:
    branches:
      - dev
jobs:
  deploy:
    name: 部署到master分支
    runs-on: ubuntu-latest
    steps:
    - name: 更新代碼
      uses: actions/checkout@master

    - name: 安裝Node
      uses: actions/setup-node@v1
    
    - name: 構(gòu)建HTML
      run: |
        npm i
        npm run build
    
    - name: 發(fā)布
      uses: peaceiris/actions-gh-pages@v2.8.0
      env:
        PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
        PUBLISH_BRANCH: master
        PUBLISH_DIR: docs/.vuepress/dist

我們主要使用到了peaceiris/actions-gh-pages這個(gè)action，其中：

• PUBLISH_DIR是Vuepress生成HTML文件的目錄
• PUBLISH_BRANCH是你要提交的分支
• PERSONAL_TOKEN在你項(xiàng)目的Settings -> Secrets里設(shè)置傅联，Secret Value在：個(gè)人Settings -> Developer settings -> Personal access tokens里設(shè)置先改。

至此，我們訪問[用戶名].pages.io就能看到我們自己的博客了纺且！非常完美盏道！離成功只差最后一步了！

使用阿里云OSS

默認(rèn)已有域名和SSL證書载碌。

創(chuàng)建OSS：

進(jìn)入阿里云對(duì)象存儲(chǔ)OSS控制臺(tái)猜嘱，點(diǎn)擊創(chuàng)建 Bucket，區(qū)域選擇中國（香港）（國內(nèi)節(jié)點(diǎn)綁定自定義域名需要備案）嫁艇，讀寫權(quán)限選擇公共讀朗伶。

在基礎(chǔ)設(shè)置 -> 靜態(tài)頁面設(shè)置首頁和404頁面，在域名管理 -> 綁定用戶域名步咪，綁定自定義域名论皆。

創(chuàng)建accesskeys：

阿里云控制臺(tái)點(diǎn)擊頭像，選擇accesskeys猾漫，點(diǎn)擊創(chuàng)建AccessKey按鈕点晴，然后在Github項(xiàng)目里的Settings -> Secrets設(shè)置AccessKeyID和AccessKeySecret。

編寫Github Actions：

創(chuàng)建.github/workflows/oss.yml：

name: Ali OSS
# 觸發(fā)事件：push到oss
on:
  push:
    branches:
      - oss
jobs:
  deploy:
    name: 部署到阿里云對(duì)象存儲(chǔ)
    runs-on: ubuntu-latest
    steps:
    - name: 更新代碼
      uses: actions/checkout@master

    - name: 安裝Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: 構(gòu)建HTML
      run: |
        npm i
        npm run build
    
    - name: 連接OSS
      uses: manyuanrong/setup-ossutil@v2.0
      with:
        # 地域節(jié)點(diǎn)悯周，在控制臺(tái)查看
        endpoint: oss-cn-hongkong.aliyuncs.com
        # 剛剛創(chuàng)建的id和secret
        access-key-id: ${{ secrets.OSS_ACCESS_KEY_ID }}
        access-key-secret: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
    
    - name: 發(fā)布到OSS
      run: ossutil cp -rf docs/.vuepress/dist/ oss://xiaomucool-blog/

然后訪問你的域名粒督，就能看到你的博客了！我知道你的心情是喜悅的禽翼，但是一定要堅(jiān)持寫文章屠橄！加油，共勉闰挡！