最新博客链接

Github链接

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

参考官方文档进行配置：

vuepress-theme-reco

VuePress

SamKirkland / FTP-Deploy-Action

最终效果

最终效果链接

思路

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

用到的东西

  • vuepress-theme-reco

  • VuePress

  • Github Actions

  • SamKirkland / FTP-Deploy-Action

相关

  • vuepress-theme-reco:

    一款简洁而优雅的 vuepress 博客 & 文档 主题。

  • Github Actions:

    GitHub 操作 帮助您在您存储代码的同一位置自动执行软件开发工作流程，并协作处理拉取请求和议题。 您可以写入个别任务，称为操作，并结合它们创建一个自定义的工作流程。 工作流程是您可以在仓库中创建的自定义自动化流程，用于在 GitHub 上构建、测试、封装、发行或部署任何代码项目。

    通过 GitHub 操作 可直接在仓库中构建端到端持续集成 (CI) 和持续部署 (CD) 功能。

  • SamKirkland / FTP-Deploy-Action:

    Automate deploying websites and more with this GitHub action

    通过GitHub 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-theme-reco

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://${{ secrets.FTP_IP }} # 服务器地址和端口（可以填域名，不过我服务器做了全站加速会导向加速结点的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 发布！

vuepress-theme-reco + Github Actions 构建静态博客，部署到第三方服务器的更多相关文章

  1. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  2. hexo搭建个人博客部署到个人服务器(git+nginx+hexo+next)

    本次以阿里云服务器为例,详细讲解步骤: 一.本地环境[客户端] 这里以本地的win10电脑为例 1.下载node, 默认安装,安装完成之后,node -v看看版本号 node下载 2.安装node(傻 ...

  3. 使用 GitHub Actions 实现 Hexo 博客自动部署

    一.Hexo 相关知识点 静态博客简单,但是发布博文时稍显麻烦,一般需要下面两步: hexo clean hexo g -d // 相当于 hexo g + hexo d 如果考虑到同步源文件,还需要 ...

  4. 在windows下创建基于github的hexo静态博客

    最近边上的人都突然买起了域名搭起了个人网站,渣渣的我介于期末没事干也跟风搭了个静态博客.虽说博客基本不更新T T,嘛嘛回归正题. 首先准备工作: 1)安装nodejs 2)安装msysgit(虽然现在 ...

  5. 通过hexo+NexT构建静态博客

    一般的教程网上有很多,主要讲下我遇到的问题以及解决方法: 一.hexo建立的文档无法上传github deploy: type: git repository: https://github.com/ ...

  6. Github+Hexo搭建静态博客

    开始 在安装hexo之前,必须确认你已经安装了Node.js和Git,并且注册了一个Github账号. 1.创建Github仓库 1) 仓库名为xxx.github.io 创建一个以"用户名 ...

  7. 使用 Hexo，Material Theme 以及 Github Pages 搭建个人博客

    准备条件 Node.js npm Git GitHub账号 开始搭建 hexo init Blog cd Blog npm install hexo-deployer-git --save npm i ...

  8. Hexo博客部署到个人服务器

    本文跳过阿里云创建git仓库.hexo部署到github的步骤,有需要的可以移步下面博客地址查看: 在阿里云服务器上创建git远程仓库 使用Hexo建立博客 一.服务器相关配置 本文使用hexo在本地 ...

  9. 我在GitHub Pages托管静态博客啦~

    https://jinhengyu.github.io/

随机推荐

  1. scarky test

  2. linux下载文件到本地_把linux服务器的文件下到本地windows

    tar -cvf script.tar scriptsz script.tar 文件夹先要打包,并且要指定打包的名字. 具体:  sz/rz命令:  一般来说,linux服务器大多是通过ssh来进行远 ...

  3. 深入理解Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  4. 关于JavaScript中bind、applay、call的区别

    在JavaScript中this的指向一直是一个困扰我们的问题,在JavaScript中this的指向是不固定的,但是我们可以通过使用bind().call().apply()来改变this的指向,但 ...

  5. HBase完全分布式集群搭建

    HBase完全分布式集群搭建 hbase和hadoop一样也分为单机版,伪分布式版和完全分布式集群版,此文介绍如何搭建完全分布式集群环境搭建.hbase依赖于hadoop环境,搭建habase之前首先 ...

  6. C++如何保留2位小数输出

    cout<<setiosflags(ios::);//需要头文件#include <iomanip> 然后再输出实数类型变量即可以保留2位小数输出了,当然你要保留三位小数,se ...

  7. Thomson Plaza里面的三家店以及水果大会

    旅行应该是一个发现的过程,至少我是这么认为的.很多时候并不一定要到什么特别的地方,也可以感受到旅游的乐趣.我觉得只要能看到值得回味的东西就好了.而能回味的东西,往往是需要仔细地来品.像旅行社安排的那样 ...

  8. Linux下无法生成core文件的解决办法

    1.检查ulimit [root ~]# ulimit -c 0 0:表示禁止生成core文件,此时需要执行ulimit -c unlimited(临时生效),或者在.bashrc中添加“ulimit ...

  9. linux下查找文件及查找包含指定内容的文件常用命令

    whereis <程序名称> 查找软件的安装路径-b 只查找二进制文件-m 只查找帮助文件-s 只查找源代码-u 排除指定类型文件-f 只显示文件名-B <目录> 在指定目录下 ...

  10. 一天速成Python教程

    一.Python基础 Python是对象有类型,变量无类型的动态类型语言,追求简单优雅易读.可以在终端中逐行运行,也可以编写成大型的面向对象的工程.在开始写之前,注意Python 2.X中,开头要写上 ...