vuepress-theme-reco + Github Actions 構建靜態博客，部署到第三方伺服器

"最新博客鏈接" "Github鏈接" 查看此文檔前應先瞭解， "vuepress基本操作" 參考官方文檔進行配置： "vuepress theme reco" "VuePress" "SamKirkland / FTP Deploy Action" 最終效果 "最終效果鏈接" 思路下載vuepr ...

最新博客鏈接

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

博客主題配置

快速開始

使用模板

# 初始化
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:[email protected]', 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環境變數