vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

程序员文章站 2022-07-06 12:39:23

"最新博客链接" "Github链接" 查看此文档前应先了解， "vuepress基本操作" 参考官方文档进行配置： "vuepress theme reco" "VuePress" "SamKirkland / FTP Deploy Action" 最终效果 "最终效果链接" 思路下载vuepr ......

最新博客链接

github链接

查看此文档前应先了解，vuepress基本操作

参考官方文档进行配置：

vuepress

samkirkland / ftp-deploy-action

最终效果

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

思路

下载vuepress-theme-reco官方的主题模板（脚手架），再根据自己的需要进行相应的修改，再根据自己的服务器配置github actions文件，最后上传到github，触发github actions自动构建部署到第三方服务器。以后就只需提交markdown文件到github，github actions便可自动部署到第三方服务器

用到的东西

vuepress-theme-reco
vuepress
github actions
samkirkland / ftp-deploy-action

博客主题配置

快速开始

使用模板

# 初始化
sudo yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog

# 安装
cd my-blog
sudo yarn install

更改最新依赖

// package.json

{
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "dependencies": {
    "vuepress": "^1.4.0",
    "vuepress-theme-reco": "^1.3.2",
    "vuepress-plugin-flowchart": "^1.4.3",
    "@vuepress-reco/vuepress-plugin-bgm-player": "^1.1.2",
    "@vuepress/plugin-nprogress": "^1.4.0",
    "vuepress-plugin-reading-progress": "^1.0.8"
  }
}

然后，安装依赖

sudo yarn

目录结构

.
├── .git-ftp-include	// 用于最后指定需要部署的文件或文件夹
├── .gitattributes	// 用于统一文件内编码的换行符
├── .github
│   └── workflows
│       └── nodejs.yml	// github actions的配置文件
├── .gitignore	// 忽略上传到github的文件或目录
├── license	// 许可证文件
├── readme.md	// github项目展示文件
├── docs	// vuepress项目根目录
│   ├── .vuepress	// 存放配置文件的文件夹
│   │   ├── config.js	// 整个工程的配置文件
│   │   ├── dist	// 最后生成的文件目录
│   │   ├── public	// 媒体文件夹（主要是图片）
│   │   └── styles	// 网页样式文件夹（里面空的，没有用）
│   ├── readme.md	// 网页首页文件
│   └── views	// 存放markdown文件的文件夹（可以不要直接把markdown文件放在docs里面）
│       └── frontend	// 分类目录（也可以不要分类目录直接放在views里面）
├── package.json	// 指定依赖，项目脚本，node.js项目描述文件
├── yarn-error.log	// 记录构建失败的日志文件
└── yarn.lock	// 变更依赖时自动生成和更新

添加博客配置

然后根据需要更改一些内容和设置，参考官方的文档，可自行取舍相应内容

vuepress

// docs/.vuepress/config.js

module.exports = {

  // host: '0.0.0.0',  // 生成网页地址（本地调试使用）
  // port: '22335',  // 生成网页端口（本地调试使用）
  title: "tsanfer's blog",  // 显示在左上角的网页名称以及首页在浏览器标签显示的title名称
  description: '现居住于猎户臂上的一个碳基生命',  // meta 中的描述文字，用于seo
  head: [
    ['link', { rel: 'icon', href: '/favicon.svg' }],  //浏览器的标签栏的网页图标,基地址/docs/.vuepress/public
    ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }], //在移动端，搜索框在获得焦点时会放大
  ],

  theme: 'reco',  //选择主题‘reco’
  themeconfig: {
    type: 'blog', //选择类型博客
    blogconfig: {
      category: {
        location: 2, // 在导航栏菜单中所占的位置，默认2
        text: '分类' // 默认 “分类”
      },
      tag: {
        location: 3, // 在导航栏菜单中所占的位置，默认3
        text: '标签' // 默认 “标签”
      },
    },
    nav: [  //导航栏设置
      { text: '主页', link: '/', icon: 'reco-home' },
      { text: '时间线', link: '/timeline/', icon: 'reco-date' },
      { text: '联系', 
        icon: 'reco-message',
        items: [
          { text: 'github', link: 'https://github.com/tsanfer', icon: 'reco-github' },
          { text: 'csdn', link: 'https://blog.csdn.net/qq_27961843/', icon: 'reco-csdn' },
          { text: 'bilibili', link: 'https://space.bilibili.com/12167681', icon: 'reco-bilibili' },
          { text: 'qq', link: 'tencent://addcontact/?fromid=50&fromsubid=1&subcmd=all&uin=1124851454', icon: 'reco-qq' },
          { text: 'twitter', link: 'https://twitter.com/a1124851454', icon: 'reco-twitter' },
          { text: 'gmail', link: 'mailto:a1124851454@gmail.com', icon: 'reco-mail' },
        ]
      }
    ],
    sidebar: 'auto',  //在所有页面中启用自动生成侧栏
    record: '蜀icp备20005033号-1',
    startyear: '2020', // 项目开始时间，只填写年份
    lastupdated: '最后更新时间', // string | boolean
    author: 'tsanfer',
    authoravatar: '/avatar.svg',  //作者头像
    mode: 'light',  //默认显示白天模式
    // 评论设置
    valineconfig: {
      appid: process.env.leancloud_app_id,
      appkey: process.env.leancloud_app_key,
    }
  },

  markdown: {
    linenumbers: true //代码显示行号
  },
  // 搜索设置
  search: true,
  searchmaxsuggestions: 10,

  // 插件
  plugins: [
    ['flowchart'],  // 支持流程图
    [
      '@vuepress-reco/vuepress-plugin-bgm-player',  // bgm播放器
      {
        audios: [
          {name: 'faster than light',artist: 'andreas waldetoft / mia stegmar',url: 'https://cdn-image.tsanfer.xyz/music/andreas%20waldetoft%2cmia%20stegmar%20-%20faster%20than%20light.mp3',cover: 'https://p1.music.126.net/gxv6d9w4yd9q9wnhppi8rw==/1379887104073348.jpg'},
          {name: 'dawn',artist: 'ddrkirby(isq)',url: 'https://cdn-image.tsanfer.xyz/music/dawn%20-%20ddrkirby%28isq%29.mp3',cover: 'https://p2.music.126.net/ipnqmck8yan9inwyv2bdgq==/18774161044446693.jpg'},
          {name: 'tron legacy (end titles)',artist: 'daft punk',url: 'https://cdn-image.tsanfer.xyz/music/daft%20punk%20-%20tron%20legacy%20%28end%20titles%29.mp3',cover: 'https://p2.music.126.net/qootiykbslw9rhb0vi83ga==/737772302281958.jpg'},
          {name: 'broken boy',artist: 'tonspender',url: 'https://cdn-image.tsanfer.xyz/music/tonspender%20-%20broken%20boy.flac',cover: 'https://p2.music.126.net/4tntryhqa3-d2h1unoa00w==/109951163666994621.jpg'},
          {name: 'life of sin pt. 4',artist: 'mitis',url: 'https://cdn-image.tsanfer.xyz/music/mitis%20-%20life%20of%20sin%20pt.%204.mp3',cover: 'https://p2.music.126.net/lmjtrswvslsnbsffsqfo6g==/2533274793491743.jpg'},
          {name: 'sea of voices (rac mix)',artist: 'porter robinson',url: 'https://cdn-image.tsanfer.xyz/music/porter%20robinson%20-%20sea%20of%20voices%20%28rac%20mix%29.mp3',cover: 'https://p1.music.126.net/zjqrokeuoku7is5euvnvzq==/3264450027161111.jpg'},
          {name: 'new lipstick',artist: 'the kissaway trail',url: 'https://cdn-image.tsanfer.xyz/music/the%20kissaway%20trail%20-%20new%20lipstick.flac',cover: 'https://p2.music.126.net/vjn74c1hoygpcez9dngeqw==/109951163772624643.jpg'},
        ],
      },
    ],
    ['vuepress-plugin-smooth-scroll'],  // 平滑滚动
    ['@vuepress/nprogress'],  // 加载进度条
    ['reading-progress']  // 阅读进度条
  ]
}

github actions配置

修改github actions配置文件

在github网页上添加github actions配置文件，参考官方的文档，可自行取舍相应内容，其中需要保密的部分需要添加github secrets环境变量

samkirkland / ftp-deploy-action

# .github/workflows/nodejs.yml

on: push  # 触发此文件运行的条件
name: github actions  # 此工作流程（workflow）的名字
jobs:
  ftp-deploy-action:
    name: ftp-deploy-action # 此任务（job）的名字
    runs-on: ubuntu-latest  # 运行环境
    steps:
    - uses: actions/checkout@master # 切换分支到master
      with:
        fetch-depth: 2

    - name: use node.js 12.x  
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
        
    - name: build project # 此步骤（step）的名字
      run: yarn && yarn build # 下载依赖和构建项目
      env:
        leancloud_app_id: ${{ secrets.leancloud_app_id }} # 评论系统的id
        leancloud_app_key: ${{ secrets.leancloud_app_key }} # 评论系统的key

    - name: list output files
      run: ls -a docs/.vuepress/dist # 显示生成的目录文件
      
    - name: ftp-deploy-action
      uses: samkirkland/ftp-deploy-action@3.0.0
      with:
        ftp-server: sftp://39.107.221.57:22 # 服务器地址和端口（可以填域名，不过我服务器做了全站加速会导向加速结点的ip，所以只能用服务器的ip）
        ftp-username: ${{ secrets.ftp_username }} # ftp用户名
        ftp-password: ${{ secrets.ftp_password }} # ftp密码
        git-ftp-args: --insecure --remote-root /home/www/htdocs # 要部署到服务器的哪个位置（我这用的是sftp，如果是ftp连接的话--insecure不用加）
        local-dir: docs/.vuepress/dist/ # 选择哪些文件要部署到服务器，这个选项在这里选了之后，要在.git-ftp-include中添加相应的路径

// .git-ftp-include

!docs/.vuepress/dist/

添加github token

为了保密，把重要信息用变量表示，在github secrets中添加相应的值

仓库的settings --> secrets --> add a new secret

比如

name: ftp_username
value: admin

最后再把代码上传到github便可自动触发构建，部署到第三方服务器

本文由tsanfer's blog 发布！

上一篇：第一次做伴郎

下一篇：给WEB前端初学者的一封信，请收好！

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

最终效果

思路

用到的东西

相关

博客主题配置

快速开始

使用模板

更改最新依赖

目录结构

添加博客配置

github actions配置

修改github actions配置文件

添加github token

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器