关于javascript:前端程序员如何利用vuePress和gitHub-Actions快速自动发布个人博客

前段时间因为写一个集体的小程序，买了一个腾讯的服务器，还有一个域名，然而小程序只是用了域名来做 CDN 减速，（因为域名备案要有服务器，！！）

小程序已上架（先推一波：gitHub 代码地址)

服务器不必也是节约了，所以又开始折腾写一个人人博客网站

对于一个前端而言，写前端页面不是一件难事，只有花点工夫就能够了。而如何在服务器上公布只本人的网站却不是所有前端的同学都玩的溜。

本文就选用我感觉比拟简便的法教一下大家如何写，以及用 继续集成 公布本人的个个博客网站。

用到的货色：

vuePress、服务器和域名、gitHub 仓库

先看网站成果 www.yingyinbi.com/

常规先发一张搬砖地点的图片：

ok, 开始

vuePress（官网）是一个简洁至上、vue 驱动、高性能的动态网站生成器。

其实就是用 markdown 来写博客。

跟椐官网一点一点的搭好博客的我的项目后就能够按以下的办法公布本人的网站了

当然你也能够参考一下我写的：

作者 blog 源码

很多前端都会 node.js，所以用 node 来写后盾比拟不便。

代码在这里 vuePress-server

基础薄弱的能够拿来看看，间接用也能够（求赞）

其实就只有几行代码


  

const Koa = require('koa')

const app = new Koa

const static = require('koa-static')

const path = require('path')

  

app.use(static(path.join(__dirname, '../blog')

))

  

app.listen(80, () => {console.log('success')

})

下面代码的意思就是开启了一个 80 端口，拜访时动态文件目录为 blog(会默认拜访 blog 下的 index.html)

简略说一下如何在服务器上运行这个程序

服务器全局装置 node
服务器全局装置 git
新建一个目录用来寄存 vuePress-server 代码（这里假如目录名为www)
上传 vuePress-server 代码到 gitHub 仓库，像咱们平时 clone 代码一样，将代码 clone 到 www 目录下
服务器全局装置 pm2(有了 node 后能够用 npm 装置)(传送门 pm2)

用 pm2 运行 vuePress-server 外面的 app.js 就能够启动 80 端口的服务了，然而当初咱们写的博客网页还没有公布到 blog 目录下

上面介绍如何将博客网页上传到 blog 目录下：

gitHub Actions 是 gitHub 的继续集成服务。能够看看阮一峰老师的文章：GitHub Actions 入门教程

简略来说就是能够在咱们提交代码到近程仓库后，gitHub Actions 能够主动触发，并执行咱们当时设定的动作(action)。

这些动作指的是一系列的运行流程，而且 gitHub Actions 有一个 actions 的市场，github 用户能够在那里公布本人写的 action，也能够应用其余用户公布的 action。

当你在 gitHub 创立了本人博客的仓库并上传了代码，在仓库的界面就能够看到这个 Actions 的入口：

点第二个红框就能够创立

上图第一个框是设定名称，第二个框就是要写的 workflows 了。

上面是我的:


# 名称

name: CI

  

# 当 master 分支有 push 或 pull_request 的时候会触发

on:

push:

branches: [master]

pull_request:

branches: [master]

  

# A workflow run is made up of one or more jobs that can run sequentially or in parallel

jobs:

# build 是一个 job 的名称，build:

# The type of runner that the job will run on

runs-on: ubuntu-latest

  

# 上面是一个个 step

steps:

# 切换到 master 分支

- uses: actions/checkout@master

  

# Runs a single command using the runners shell

# 这一步是装置 node.js

- name: Setup Node.js environment

uses: actions/setup-node@v2.1.0

with:

node-version: '12.x'

  

# 这一步是装置依赖，而后打包

- name: Run install and build

run: yarn && yarn build

# 上传服务器(上面的意思其实是用了社区他人封装的 actions)

# 通过设定本人服务器的用户名和明码，将打包后的文件夹 public 里所有货色上传到服务器的 /www/vuePress/blog 下

- name: Deploy to Server

uses: hengkx/ssh-deploy@v1.0.1

with: # 以下为参数

USERNAME: ${{secrets.DEPLOY_USER}} # 为了用户信息安全对敏感数据能够在 secrets 中配置请看下图

PASSWORD: ${{secrets.DEPLOY_PASSWORD}}

HOST: ${{secrets.DEPLOY_HOST}}

POTY: 22 // 默认就是 22，然而之前没有写，不能胜利。SOURCE: 'public'

TARGET: '/www/vuePress/blog'

因为服务器的帐号密码等信息不可公开，而本 gitHub 仓库是公开的，gitHub 在 setting 里有密匙爱护的机制

只有写完博客，提交一下代码到 master 分支上就能够了。而且 vuePress 用的是 markdown 办法写的，对大部分程序员来说都是会用的。markdown 虽不是最难看的文本格式，然而其对文字题目内容有档次的办法，可图片可代码，对程序员来说还是十分敌对的。

总结一些毛病：

gitHub 有点慢
actions 从运行到公布也不是很快
有时候会产生 actons 运行失败的问题

目前笔者次要的博客平台是思否。

所有的我的项目：

博客仓库

博客的 node 服务

博客网站成果

关于javascript:前端程序员如何利用vuePress和gitHub-Actions快速自动发布个人博客

vuePress

Node.js 写个简略的后盾

用 gitHub Actions 主动上传网页文件到服务器

最初