搭建个人博客

搭建流程

• 在dev 分支使用Vuepress写博客
• push到github
• github actions自动生成静态页面部署到master分支
• github actions自动部署到阿里云OSS
• 完成，查看xiaomucool.github.io和xiaomucool.com

使用Vuepress

Vuepress是Vue 驱动的静态网站生成器，支持markdown语法、Emoji图标。

我们先来安装它：

npm i vuepress -S

Vuepress默认主题适合写接口文档，我们还要安装适合博客的主题vuepress-theme-meteorlxy：

npm i vuepress-theme-meteorlxy -S

环境安装好了，我们开始写文章吧！文章存放目录为：docs/_posts/**/*.md，它会默认读取这个文件夹下的md文件。

主题vuepress-theme-meteorlxy需要配置一些参数，详情请见主题指南

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

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

运行：

// 本地实时查看博客效果
npm run dev

// 构建HTML页面
npm run build

访问http://localhost:8080/就能看到属于你的博客页面了。

部署到Github Pages

首先要开启GitHub Pages，开启方法是：仓库Setting -> GitHub Pages，Source选择master branch，访问[用户名].github.io/[仓库名]就能看到效果了。

如果想要在[用户名].github.io根目录下访问，必须设置仓库名为：[用户名].github.io

GitHub Pages会自动寻找index.html或README.MD作为网站入口。

使用Github Actions

Actions是自动化运维，持续集成服务，不了解的可以看我这篇文章：《Github Actions 教程》。

需求：

我们把代码提交到dev分支，希望Actions可以自动npm run build并且把生成的HTML文件提交到master分支

实现：

首先在dev分支下创建.github/workflows/github_pages.yml：

name: Github Pages
# 触发事件：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: 构建HTML
      run: |
        npm i
        npm run build
    
    - name: 发布
      uses: peaceiris/[email protected]
      env:
        PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
        PUBLISH_BRANCH: master
        PUBLISH_DIR: docs/.vuepress/dist

我们主要使用到了peaceiris/actions-gh-pages这个action，其中：

• PUBLISH_DIR是Vuepress生成HTML文件的目录
• PUBLISH_BRANCH是你要提交的分支
• PERSONAL_TOKEN在你项目的Settings -> Secrets里设置，Secret Value在：个人Settings -> Developer settings -> Personal access tokens里设置。

至此，我们访问[用户名].pages.io就能看到我们自己的博客了！非常完美！离成功只差最后一步了！

使用阿里云OSS

默认已有域名和SSL证书。

创建OSS：

进入阿里云对象存储OSS控制台，点击创建 Bucket，区域选择中国（香港）（国内节点绑定自定义域名需要备案），读写权限选择公共读。

在基础设置 -> 静态页面设置首页和404页面，在域名管理 -> 绑定用户域名，绑定自定义域名。

创建accesskeys：

阿里云控制台点击头像，选择accesskeys，点击创建AccessKey按钮，然后在Github项目里的Settings -> Secrets设置AccessKeyID和AccessKeySecret。

编写Github Actions：

创建.github/workflows/oss.yml：

name: Ali OSS
# 触发事件：push到oss
on:
  push:
    branches:
      - oss
jobs:
  deploy:
    name: 部署到阿里云对象存储
    runs-on: ubuntu-latest
    steps:
    - name: 更新代码
      uses: actions/checkout@master

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

    - name: 构建HTML
      run: |
        npm i
        npm run build
    
    - name: 连接OSS
      uses: manyuanrong/[email protected]
      with:
        # 地域节点，在控制台查看
        endpoint: oss-cn-hongkong.aliyuncs.com
        # 刚刚创建的id和secret
        access-key-id: ${{ secrets.OSS_ACCESS_KEY_ID }}
        access-key-secret: ${{ secrets.OSS_ACCESS_KEY_SECRET }}
    
    - name: 发布到OSS
      run: ossutil cp -rf docs/.vuepress/dist/ oss://xiaomucool-blog/

然后访问你的域名，就能看到你的博客了！我知道你的心情是喜悦的，但是一定要坚持写文章！加油，共勉！