> [最新部落格連結](https://tsanfer.xyz/views/frontEnd/vuepress_theme_reco-Github_Actions.html) > [Github連結](https://github.com/Tsanfer/vuepress_theme_reco-Github_Actions) 檢視此文件前應先了解，[vuepress基本操作](https://tsanfer.xyz/views/frontEnd/VuePress%20+%20GithubPages%20+%20TravisCI%20.html#%E6%9C%80%E7%BB%88%E6%95%88%E6%9E%9C) 參考官方文件進行配置： > [vuepress-theme-reco](https://vuepress-theme-reco.recoluan.com/) > [VuePress](https://vuepress.vuejs.org/zh/) > [SamKirkland / FTP-Deploy-Action](https://github.com/marketplace/actions/ftp-deploy) ## 最終效果 [最終效果連結](https://tsanfer.xyz/)  ## 思路 下載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自動部署網頁等操作 ## 部落格主題配置 ### 快速開始 #### 使用模板 ```bash # 初始化 sudo yarn global add @vuepress-reco/theme-cli theme-cli init my-blog # 安裝 cd my-blog sudo yarn install ``` #### 更改最新依賴 ```json // 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" } } ``` 然後，安裝依賴 ```bash sudo yarn ``` ### 目錄結構 ```bash . ├── .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](https://vuepress-theme-reco.recoluan.com/) > > [VuePress](https://vuepress.vuejs.org/zh/) ```javascript // 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](https://github.com/marketplace/actions/ftp-deploy) ```yml # .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://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](https://tsanfer.xyz) 釋出！