最新博客鏈接
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:[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環境變數
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/[email protected]
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 發布！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140512.html
標籤：JavaScript
上一篇：仿美團頁面-訂單頁&“我的”頁面