本文来自于【阿里云官方镜像站：https://developer.aliyun.com/mirror/?utm_content=g_1000307095 】
转发自【https://juejin.cn/post/7041563888495624200#heading-0】
前言
我接触过很多博客平台：WordPress、Jekyll、Hexo、Typecho和Vuepress，有的是静态博客有的需要服务器运维，玩过花里胡哨后私以为博客最重要的是思考和记录，而不是不停地装饰。所以总结一些经验可以让大家快速把博客搭建起来，并且不会忧愁后续的维护。本文不是保姆教程，目标群体是有一定工作经验的开发者需要开箱即用的博客发布方案，部分小问题比如Node安装、Github访问、域名购买备案、Vim的退出等需要自行解决，那我们出发！
Github Actions部署
VuePress使用
前端库Vue.js之前是由Hexo驱动的，但是Vue作者纠结于网页加载性能和SEO也为了更好地释放Vue的用武之地创造了VuePress，我们接下来就是要创建这样的博客。
安装Node.js之后可以在命令行运行,yarn init的时候不需要输入什么一直按回车即可。
mkdir vuepress-blog && cd vuepress-blog
yarn init
yarn add -D vuepress
mkdir docs && echo '# Hello VuePress' > docs/README.md复制代码
package.json可以改成
{
"name": "vuepress-blog",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"vuepress": "^1.8.2"
},
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}复制代码
运行yarn dev之后打开http://localhost:8080/ 只有一个很简陋的“Hello VuePress”，不过对docs/.vuepress/config.js稍作修改和添加对应的目录文件就可以上线见面了，每个字段的含义参考VuePress文档, 另外也可以基于我的博客替换成自己的Markdown文档和文件路径。
markdown：配置markdown的渲染，如代码块的行号和插件、标题锚点、外链title：网站标题description：网站描述themeConfig：依赖的主题，nav配置右上方导航，sidebar为左侧导航，对应着docs文件夹下的文件或者文件夹，记得sidebar数组最后一项/:的空字符串数组是不能丢的，因为这代表一张首页的README.md。base：尤其重要，如果直接访问https://[用户名].github.io则默认不用填，我们上面的例子base要写成"/vuepress-publish/",上传后可访问https://[用户名].github.io/vuepress-publish// config.js
module.exports = {
base: "/vuepress-publish/",
title: '灰熊の博客'
}
// https://github.com/huixiongyu/blog中docs/.vuepress/config.js的配置
module.exports = {
markdown: {
lineNumbers: true
},
title: '灰熊の博客',
description: '进击的全栈Coder',
head: [
['link', { rel: 'icon', href: '/flower.ico' }],
],
themeConfig: {
nav: [
{
text: "博客",
link: "/blog/"
},
{
text: '阅读',
link: "/book/"
},
{
text: 'Github',
link: 'https://github.com/huixiongyu/blog'
}
],
sidebar: {
'/blog/': [
'',
{
title: '生活',
collapsable: true,
children: [
'/blog/Life/my-action-list',
'/blog/Life/train-habit',
'/blog/Life/about-PG-entrance-exam',
'/blog/Life/graduation-thesis'
]
},
...
...
...
],
'/book/': [
'',
'plan-and-record',
{
title:'前端相关',
collapsable: true,
children:[
'/book/HTML&CSS/02-css-secrets'
]
},
...
...
...
],
'/': [
''
]
},
sidebarDepth: 2,
displayAllHeaders: true,
nextLinks: true,
prevLinks: true,
lastUpdated: '更新时间',
docsDir: 'docs',
editLinks: true,
editLinkText: '帮助我完善这篇内容?'
}
}复制代码
构建GitHub Page
在GitHub上添加一个同名的私有仓库vuepress-blog,然后再创建一个公开的仓库vuepress-public，这里的思路是博客的源文件（md文件和config.js等）是私有的保护文章不被搬运（为了方便参考我设置为公开），我们提交代码后GitHub会帮我们构建渲染成HTML等静态文件推送到vuepress-public的gh-pages分支，用户就可以通过https://[用户名].github.io/vuepress-public访问。我们直接commit、push代码并不会自动构建部署，需要启用到代码仓库上边Actions一栏，点击"set up a workflow yourself"创建一个.yml文件，随意取个名字比如main、CI，点击保存后会在代码根目录.github/workflow文件夹下出现，这里建议先不保存，还有后续步骤，使用右键选择“在新标签页中打开链接”操作我们接下来的步骤：申请Token和设置Secret。
Actions的代码如下：
name定义workflow的名称；on记录触发的条件这里是master分支push的时候执行；jobs下面是任务集合而build是一个jobs，你也可以在build的同一个层级（缩紧）多建一个jobs，名字取执行步骤的意义即可；runs-on是执行的虚拟机系统，有Ubuntu、Windows和macOS可选；steps是单个job的执行步骤，这里是获取代码分支、运行vuepress部署；uses是选用官方或者第三方的action步骤，官方以actions/接名称，非官方（用户自发的）则是用[用户名]/[仓库名]来标注；env是依赖的action需要传入环境变量，注意我们使用${{ secrets.XXX }}来引入不便于暴露的信息，如何配置就是我们下一步要做的。name: CI
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
# 在当前环境中拉取你仓库然后进入到目录，下面的步骤在仓库的根目录中进行
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.TOKEN }}
TARGET_REPO: huixiongyu/vuepress-publish
TARGET_BRANCH: gh-pages
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: docs/.vuepress/dist/
CNAME: ${{ secrets.CNAME }}复制代码
Action中引入TOKEN的来自GitHub的授权。仓库右上角头像下拉选择Settings跳转后找到Developer settings,在Personal access Tokens创建，勾选repo就可以，如果长期使用要记得重新创建。提交后的token会马上显示，这时要及时复制，以后不会再出现。复制后回到仓库vuepress-blog选择Settings下Secrets可以新建一个密码本，Name是Actions里面${{ secrets.XXX }}的XXX,而Value就是真正要传入的值。这里我们在Name填入TOKEN然后Value直接粘贴刚刚申请的授权字符串。CNAME可以让我们使用值里面的域名直接访问[用户名].github.io的资源，如果你在阿里云、namecheap、腾讯云等已经购买域名，那么可以在域名控制台进行GitHub的CNAME配置。如果没有个人域名，可以将 Actions代码中CNAME所在的行删除即可。在设置了所有所需的Secrets就可以保存.yml的action文件了，此时点击Actions标签可以看到GitHub虚拟机执行actions的日志，如果成功的话会有绿勾，不然就出现❌。并且代码仓库vuepress-publish的gh-pages分支会有更新。因为我设置了CNAME，https://www.hackslog.com/vuepress-publish/（后来我将域名改为了blog.hackslog.com） 就可以访问构建出来的网页了，跟之前在本地http://localhost:8080/是一样的，如果没有设置CNAME，而我的GitHub用户名是huixiongyu，访问链接就是https://huixiongyu.github.io/vuepress-publish/。
部署到OSS
OSS是阿里云的对象存储服务，也就是文件存储，用户上传文件之后可以拿到公网可访问的链接，配合CDN加速可以让用户快速访问近距离的数据节点。阿里云、七牛云、华为云等对象存储产品使用方式基本一致，一年费用也就几块钱，可以放心使用。在OSS管理控制台中可以随意创建Bucket，对于个人网站可以一个网站用一个Bucket以防资源混乱。当使用控制台上传文件后，如果在文件详情中没有配置HTTP头或者绑定自定义域名，文件会自动下载而不是直接浏览，另外想使用https访问也是在控制台->传输管理里面配置，过程可以直接查提示文档只要细心些就可以申请到免费的SSL证书。如下图在SSL控制台中申请到证书之后点击最右边的部署即可，刚申请的证书似乎要半个或一个小时才会生效，可以做点别的。
回到vuepress-blog仓库的Actions代码，需要增加一个job将构建出的静态网页直接上传的OSS，于是.github/workflows/main.yml的完整代码如下：
name: CI
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
# 在当前环境中拉取你仓库然后进入到目录，下面的步骤在仓库的根目录中进行
- name: Checkout
uses: actions/checkout@master
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.TOKEN }}
TARGET_REPO: huixiongyu/vuepress-publish
TARGET_BRANCH: gh-pages
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: docs/.vuepress/dist/
CNAME: ${{ secrets.CNAME }}
build-to-OSS:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@master
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: '14.x'
- name: Build Web
run: |
node changeOssPath.js
yarn add -D vuepress
yarn install
yarn build
echo '${{ secrets.OSS_CNAME }}' > docs/.vuepress/dist/CNAME
mv docs/.vuepress/dist ./
- name: Upload to OSS
env:
OSS_REGION: ${{ secrets.OSS_REGION }}
OSS_BUCKET: ${{ secrets.OSS_BUCKET }}
OSS_KEY: ${{ secrets.OSS_KEY }}
OSS_SECRET: ${{ secrets.OSS_SECRET }}
OSS_URL: ${{ secrets.OSS_URL }}
run: |
ls
pwd
node ossSync.js
- name: Upload to Could Computer
uses: appleboy/scp-action@master
with:
host: ${{ secrets.IP_ADDRESS }}
username: ${{ secrets.SERVER_USER }}
port: "${{ secrets.SERVER_PORT }}"
key: ${{ secrets.SERVER_PRIVATE_KEY }}
source: "dist/**"
target: "${{ secrets.TARGET_PATH }}"复制代码
不要急着保存代码，我们还需要在Settings->Secret补充一些私密信息，其中OSS相关的可以在创建Bucket的控制台和右上用户头像下拉后显示的“AccessKey管理”获取，AccessKey切勿直接写入到代码，因为有操作所有Bucket的完整权限，为了顺利上传我还写了一些脚本，比如ossSync.js。Upload to Could Computer则是上传到云主机的步骤，不需要的可以删除～
TOKEN：GitHub的仓库管理授权字符串CNAME：GitHub Page的自定义域名OSS_CNAME：使用OSS访问时的自定义域名，跟Bucket绑定的一致OSS_REGION：Bucket所属区域，比如我选的广州，oss-cn-hangzhouOSS_REGION: Bucket自定义的名称，比如huixiong-blogOSS_KEY：AccessKey IDOSS_SECRET： AccessKey Id对应的密钥OSS_URL：自定义域名，没有的话写默认的，比如huixiong-blog.oss-cn-guangzhou.aliyuncs.comIP_ADDRESS：IP地址SERVER_USER：登录的用户名SERVER_PORT：传输端口，默认22SERVER_PRIVATE_KEY：对称密钥的私钥，字符串包含BEGIN RSA PRIVATE KEYTARGET_PATH： 传输到服务器的目录
Secret和代码保存后，很快Actions执行完了，并且OSS控制台也看到的文件更新，网页也可以正常访问。
深入Actions
Github Actions是持续集成的过程，运维部署包含着很多的步骤比如拉取代码、测试、构建成品、登录远程服务器、在远程服务器运行命令等等，GitHub把这些称为actions。并且GitHub发现了这些的任务的共同点，就是可以复用和随意组合，于是他们定义了一些规则，比如统一一些常量的意义、限制私密信息的输出，并统一用actions文件的格式，组件了一个官方市场供大家免费使用，使用Actions的过程变成了用别人的脚本和自己写脚本的过程。 在Action运行的时候，使用了actions/checkout@master工作环境就是代码的根目录，如果是手动把vuepress-blog推到其他仓库分支需要哪些命令呢？你大概会写这么多：
设置线上node.js版本，并安装依赖构建，docs/.vuepress目录下会出现dist文件夹进入到dist文件夹中，把CNAME写下来初始化git，然后要把这个文件夹推上分支yarn install
yarn build
cd docs/.vuepress/dist
ls
echo 'hackslog.com' > CNAME
git init
git config --global user.email "huixiongyu@gmail.com"
git config --global user.name "huixiongyu"
git add .
git commit -m "deploy"
git push --force "https://${{ secrets.TOKEN }}@github.com/huixiongyu/vuepress-publish.git" master:gh-pages复制代码
刚开始的时候我也是一通操作在Actions里面自己写了一些脚本，但是试了二三十遍构建无论如何都无法把dist推上vuepress-publish，后来进插件市场一通搜索，copy配置一下变量就可以了。如果需要多个节点，稍作配置一会时间就可以轻松部署博客到Github、码云、Coding、Gitlab...
- name: vuepress-deploy
uses: jenkey2011/vuepress-deploy@master
env:
ACCESS_TOKEN: ${{ secrets.TOKEN }}
TARGET_REPO: huixiongyu/vuepress-publish
TARGET_BRANCH: gh-pages
BUILD_SCRIPT: yarn && yarn build
BUILD_DIR: docs/.vuepress/dist/
CNAME: ${{ secrets.CNAME }}复制代码
上传到OSS似乎找不到合适的脚本，于是我开始自己写脚本。主要还是用里阿里云提供的Node.js SDK，通过process.env获取actions传过来的密钥初始化，getLocalFileList遍历出要上传到OSS的所有文件的名字，然后遍历文件的数组用putOneFile一个个把发上去，如果OSS已经有重名的文件会被覆盖。不过这个过程非常艰辛啊，遇到一个报错是Error: EISDIR: illegal operation on a directory, read解决花了两三个小时,只需要将fs.readdirSync``fs.readfileSync替换掉。
const fs = require('fs')
const OSS = require('ali-oss')
const {
OSS_REGION,
OSS_BUCKET,
OSS_KEY,
OSS_SECRET,
OSS_URL,
} = process.env;
const client = new OSS({
region: OSS_REGION, // 创建 bucket 选择的区域
bucket: OSS_BUCKET, // bucket名称
accessKeyId: OSS_KEY, // accessKeyId
accessKeySecret: OSS_SECRET, // accessKeySecret
});
function getLocalFileList(basePath) {
console.log(`current path is:${basePath}`)
const fileNamelist = fs.readdirSync(basePath)
console.log(fileNamelist)
let result = []
fileNamelist.forEach(name => {
const file = basePath + name
const statsObj = fs.statSync(file);
if (statsObj.isFile()) {
result.push(file)
} else {
result = result.concat(getLocalFileList(file + '/'));
}
})
return result;
}
async function putOneFile(fileName, dir) {
try {
const result = await client.put(fileName, dir);
console.log(OSS_URL + result.name);
} catch (e) {
console.log(e);
}
}
async function main() {
console.log('ossSync working...')
const fileList = getLocalFileList(__dirname + '/dist/')
console.log(fileList)
for(const file of fileList) {
const tempList = file.split('/dist/')
const fileName = tempList[1]
await putOneFile(fileName, file)
}
console.log('ossSync completed!')
}
main()复制代码
另外为了修bug还有一个脚本来解决部署到不同环境的问题，config.js原本没有写base: "/vuepress-publish/",这样就会导致在某个环境中CSS样式失效。如果你需要直接部署在[用户名].github.io仓库中就需要明白base的含义，可以把config.js中的base删除掉，而部署在域名根目录无论是OSS还是云服务器都可以保留着node changeOssPath.js一句。
// changeOssPath.js
const fs = require('fs')
let content = fs.readFileSync('docs/.vuepress/config.js', 'utf8')
content = content.replace(/base:\s["']{1}[\/A-Za-z0-9_-]*["']{1},/g, '')
console.log(content)
fs.writeFileSync('docs/.vuepress/config.js', content, { flag: 'w' })复制代码
你可能还会质疑Actions的安全性，我通过实现在控制台中输出了自己配置Secret，结果都会替换成****，依赖的脚本变量由用户提供，另外官方市场是通过安全验证的脚本，而其他仓库也是开源的，而Actions运行在自己的空间权限由GitHub的API管理，他们也没有条件收集任何私有信息的条件。所以安全第一责任人是开发者自身，另外尝试读源码，分享自己的代码吧。 Github Actions是个非常有趣的功能，大家可以发挥自己的才智白嫖服务器的资源，比如爬虫、比如定时任务等。auto-green这个仓库就是简单利用了Action的CronTab效果，定时推送代码，让自己全勤打卡。
name: ci
on:
push:
branches:
- master
schedule:
- cron: "0 */4 * * *"
jobs:
autogreen:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v2
- name: Auto green
run: |
git config --local user.email "huixiongyu@gmail.com"
git config --local user.name "huixiongyu"
git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
git pull --rebase
git commit --allow-empty -m "Stay hungry, stay foolish!"
git push复制代码
部署到云服务器
把dist文件夹传输到个人的云服务器就是用Nginx反向代理该文件，这里先讲如何连接，下一节说Nginx。 连接服务器无非IP地址、用户名、端口和密码，但是密码权限太高不建议使用，可以使用SSH密钥对，进入到ECS的控制台可以找到相应入口，生成的.cer文件跟Github Token一样只有一次保存机会。
- name: Upload to Could Computer
uses: appleboy/scp-action@master
with:
host: ${{ secrets.IP_ADDRESS }}
username: ${{ secrets.SERVER_USER }}
port: "${{ secrets.SERVER_PORT }}"
key: ${{ secrets.SERVER_PRIVATE_KEY }}
source: "dist/**"
target: "${{ secrets.TARGET_PATH }}"复制代码
以上是SCP文件上传，如果还想需要在自己的云服务器中有更多的操作命令，还可以使用ssh-action。
阿里云效部署
Hexo的使用
如果想使用瀑布流效果的博客，可以尝试Hexo。这个平台用户基础大，主题丰富，可以配置的东西多种多样，比如Next和fluid
npm install -g hexo-cli
hexo init hexo-blog
cd hexo-blog
npm install复制代码
新建完成后，指定文件夹的目录如下，_config.yml是网站的配置信息如网站名称、主题、文件夹名称，themes存放主题一般在这个文件夹clone仓库，source包含草稿和发布的文章。
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes复制代码
命令行：
hexo new "12月的计划" ：在_posts文件夹下创建一篇题为“12月的计划”文章hexo server:预览网站的效果，http://localhost:4000打开网页hexo generate:生成静态文件，一般在部署前使用，静态文件会生成在根目录的public文件夹下
云效OSS部署
阿里云效是一款优秀的团队协作平台，免费可用的代码存储有5GB，有日程和看板追踪任务，类似Confluence和Notion的块级富文本编辑器、类似Jenkins但是更易用的流水线免费构建、成品仓库、权限细分隔离的管理系统。值得注意的是同一台电脑其实可以管理多个git账号，方法是在使用ssh-keygen时注意输入~/.ssh/目录的文件名，然后分别用ssh-add添加这几个文件比如ssh-add ~/.ssh/id_rsa_aliyun,虽然能够识别不同的账号，但是每次创建或者clone后需要config各自的username和email一通，后来我采用全局只用云效，Github使用客户端管理。Hexo部署前先把代码上传到仓库，管理方式跟GitHub并没有什么差异：选择方式二：点击控制台左侧顶部的小方格，如云效第一张图红框示点击流水线然后创建流水线，有许多可选的模版，这里选择OSS。当展示下面的界面的时候直奔构建上传，选择Codeup是云效的代码仓库，如果你的代码在GitHub也可以通过他们平台的Settings->Security申请授权。因为是阿里云内部资源整合，代码仓库可以很快找到。代码进入带虚拟云主机之后，需要运行的命令是：
cnpm install
npm install hexo-cli -g
hexo g复制代码
点击服务授权以后可以选中博客所在的独立bucket，Bucket Folder应该是空的才是上传到根目录，图片仅仅是测试。点击保存并运行，会自动把public上传到public到根目录,这时通过Bucket绑定的自定义域名就可以访问网页了，部署脚本都不用写，是不是很方便呢？
云效部署到服务器
部署到ECS和自有主机也是创建流水线后点击对应的模板，构建上传的命令还是跟之前一样，不同的是public文件夹的文件会被打包送到服务器自己设定的目录，如果你有多条流水线执行到同一个主机需要改成不同的名字。阿里云买的ECS可以很快选择，如果是其他云的主机选择新建主机组就会有提示让你到该主机运行一条安装代理的命令。我的部署脚本如下： 先删除就有的文件，然后将上传物解压到目标文件夹下，如果目录下不存在文件夹需要事先创建，不然将报错失败。
rm -rf /usr/local/nginx/hexo/*
tar zxvf /home/admin/app/hexo-package.tgz -C /usr/local/nginx/hexo复制代码
保存并运行以后，链接上服务器可以查看到文件更新了，现在就剩下配Nginx了。
Nginx
安装nginx，如果配置不通的话可以参考其他资源，nginx配置能够通畅就可。
wget http://nginx.org/download/nginx-1.18.0.tar.gz
tar -xzf nginx-1.18.0.tar.gz
// cmake依赖
$ sudo apt-get update # 更新下apt源
$ sudo apt-get install gcc # Nginx必备
$ sudo apt-get install make # 编译安装需要make工具
$ sudo apt-get install libz-dev
$ sudo apt-get install libpcre3-dev
$ sudo apt-get install libssl-dev复制代码
nginx目录在：/usr/local/nginx/启动nginx
$ cd /usr/local/nginx/sbin
$ ./nginx
$ curl http://localhost # 这里返回的是html的代码代表成功复制代码
nginx的常用命令有：
./nginx # 启动
./nginx -v # 查看版本号
./nginx -t # 检查nginx.conf配置是否正常
./nginx -s reload # 热加载
./nginx -s stop # 停止
./nginx -s reopen # 重新打开日志复制代码
我的nginx配置文件在/usr/local/nginx/conf/nginx.conf下，使用Vim编辑vim nginx.conf，移动贯标在http内按i插入如下内容按ESC输入:wq,然后进入sbin目录热夹在nginx./nginx -s reload
server {
listen 80;
server_name hexo.hackslog.com;
location / {
root hexo;
index index.html;
}
}复制代码
访问成功！Hexo后续的优化折腾空间非常大，我当初就折腾了PV/UV统计、文章置顶、看板娘、Canvas背景、鼠标点击效果、回复评论等乐此不疲，新鲜过后还是需要写文章的啊。
Cloudbase静态网站托管
腾讯云Cloudbase这款产品挺有意思，他们的设计思路是帮助企业快速上云，日常开发代码上的功能比如登录、日志、数据库查询、文件存储等过程他们通过 API提供给开发者云端调用的能力，然后对于通用的平台他们有CMS提供统一的管理。这种开发方式可以实现快速开发省去运维的烦恼，缺点是平台依赖严重迁移困难。 静态网站托管他们提供了模板，但是我们目的是使用自己的代码上传到他们的存储空间，空间下的网页CNAME配置一下访客的链接就行了。
sudo npm i -g @cloudbase/cli
# 测试安装是否成功，成功则打出版本号
tcb -v
# hexo-blog 是博客的构建目录
cd hexo-blog
# 登录授权
# cloudbase login
# 部署public文件夹下的所有文件到空间的根目录
tcb hosting deploy public -e envId复制代码
hexo-blog还是上面我们之前使用的仓库，envId是在腾讯云创建之后给你ID，在部署之前请确认已经使用hexo g来生成博客的静态文件。很快public下的所有文件就会上传到空间，其实跟脚本推送到对象存储没太大差异。通过域名我们直接访问了刚刚发布的博客，如果需要美观的访问链接直接在控制台配置CNAME即可，另外这些空间的访问是按量收费的，跟对象存储价格差不多一年几块钱简单方便还要什么自行车呢。
写这篇文章花了非常多的时间去验证，虽然看起来都是会的东西，从前流行Travis CI现在换成了GitHub Action，为了与时俱进探索了一番。创作不易，你的点赞是我最大的鼓励！
