介绍下本博客的搭建流程,主要用到静态站点生成vuepress
、自动化部署github actions
、和阿里云OSS。
dev 分支
使用Vuepress
写博客push
到github
github actions
自动生成静态页面部署到master分支
github actions
自动部署到阿里云OSS
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
,开启方法是:仓库Setting -> GitHub Pages
,Source
选择master branch
,访问[用户名].github.io/[仓库名]
就能看到效果了。
如果想要在[用户名].github.io
根目录下访问,必须设置仓库名为:[用户名].github.io
GitHub Pages
会自动寻找index.html
或README.MD
作为网站入口。
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/actions-gh-[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
就能看到我们自己的博客了!非常完美!离成功只差最后一步了!
默认已有域名和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/setup-[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/
然后访问你的域名,就能看到你的博客了!我知道你的心情是喜悦的,但是一定要坚持写文章!加油,共勉!