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

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

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

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

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

用到的货色：

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

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

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

ok,开始

vuePress

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

其实就是用markdown来写博客。

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

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

作者blog源码

Node.js写个简略的后盾

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

代码在这里vuePress-server

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

其实就只有几行代码

  const Koa = require('koa')const app = new Koaconst 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)

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

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

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

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

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

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 paralleljobs:# build是一个job的名称，build:# The type of runner that the job will run onruns-on: ubuntu-latest  # 上面是一个个stepsteps:# 切换到master分支- uses: actions/checkout@master  # Runs a single command using the runners shell# 这一步是装置node.js- name: Setup Node.js environmentuses: actions/setup-node@v2.1.0with:node-version: '12.x'  # 这一步是装置依赖，而后打包- name: Run install and buildrun: yarn && yarn build# 上传服务器(上面的意思其实是用了社区他人封装的actions)# 通过设定本人服务器的用户名和明码，将打包后的文件夹public里所有货色上传到服务器的/www/vuePress/blog下- name: Deploy to Serveruses: hengkx/ssh-deploy@v1.0.1with: # 以下为参数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服务

博客网站成果