vuepress-theme-reco + Github Actions to build static blogs and deploy to third-party servers

Latest blog links

Github Link

Understand this document before viewing it. Basic operations for vuepress

Configure with official documentation:

vuepress-theme-reco

VuePress

SamKirkland / FTP-Deploy-Action

Final results

Final Effect Link

thinking

Download the official theme template (scaffolding) for vuepress-theme-reco, modify it to suit your needs, configure the Github Actions file for your server, and upload it to Github, triggering the automatic build and deployment of Github Actions to third-party servers.In the future, Github Actions can be automatically deployed to third-party servers by simply submitting a markdown file to Github

Something Used

  • vuepress-theme-reco

  • VuePress

  • Github Actions

  • SamKirkland / FTP-Deploy-Action

Relevant

  • vuepress-theme-reco:

    A concise and elegant vuepress blog & document theme.

  • Github Actions:

    The GitHub action helps you automate software development workflows and collaborate on pull requests and issues at the same location where you store your code.You can write individual tasks, called operations, and combine them to create a custom workflow.A workflow is a custom automated process that you can create in the repository to build, test, encapsulate, publish, or deploy any code project on GitHub.

    GitHub operations allow you to build end-to-end continuous integration (CI) and continuous deployment (CD) capabilities directly in your warehouse.

  • SamKirkland / FTP-Deploy-Action:

    Automate deploying websites and more with this GitHub action

    Automatically deploy web pages and more through GitHub action

Blog Theme Configuration

Quick Start

Using templates

# Initialization
sudo yarn global add @vuepress-reco/theme-cli
theme-cli init my-blog

# install
cd my-blog
sudo yarn install

Change Latest Dependencies

// 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"
  }
}

Then, install dependencies

sudo yarn

directory structure

.
├── .git-ftp-include	// Use to last specify files or folders to deploy
├── .gitattributes	// Line breaks for encoding within a uniform file
├── .github
│   └── workflows
│       └── nodejs.yml	// Configuration file for Github Actions
├── .gitignore	// Ignore files or directories uploaded to Github
├── LICENSE	// License file
├── README.md	// Github project presentation file
├── docs	// VuePress project root directory
│   ├── .vuepress	// Folder where profile is stored
│   │   ├── config.js	// Configuration files for the entire project
│   │   ├── dist	// Last Generated File Directory
│   │   ├── public	// Media folders (mainly pictures)
│   │   └── styles	// Page Style Folder (empty, useless)
│   ├── README.md	// Page Home File
│   └── views	// Folder where markdown files are stored (you can avoid placing markdown files directly inside docs)
│       └── frontEnd	// Catalog (or not directly in views)
├── package.json	// Specify dependencies, project scripts, Node.js project description files
├── yarn-error.log	// Log files that record build failures
└── yarn.lock	// Automatically generate and update when changing dependencies

Add Blog Configuration

Then change some content and settings as needed, referring to the official documents, you can choose what you want.

vuepress-theme-reco

VuePress

// docs/.vuepress/config.js

module.exports = {

  // Host:'0.0.0.0', //Generate web address (for local debugging)
  // Port:'22335', //Build Web Page Port (for local debugging)
  title: "Tsanfer's Blog",  // The name of the page displayed in the upper left corner and the title name of the first page displayed in the browser label
  description: 'A carbon-based life now living on the hunter's arm',  // Descriptive text in meta, for SEO
  head: [
    ['link', { rel: 'icon', href: '/favicon.svg' }],  //Page icon for browser's label bar, base address/docs/.vuepress/public
    ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }], //On the moving side, the search box zooms in when it gets focus
  ],

  theme: 'reco',  //Select theme'reco'
  themeConfig: {
    type: 'blog', //Select Type Blog
    blogConfig: {
      category: {
        location: 2, // Location in navigation bar menu, default 2
        text: 'classification' // Default Classification
      },
      tag: {
        location: 3, // Location in navigation bar menu, default 3
        text: 'Label' // Default Label
      },
    },
    nav: [  //Navigation Bar Settings
      { text: 'homepage', link: '/', icon: 'reco-home' },
      { text: 'Timeline', link: '/timeline/', icon: 'reco-date' },
      { text: 'contact', 
        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',  //Enable automatic sidebar generation on all pages
    record: 'Shu ICP No. 20005033 available-1',
    startYear: '2020', // Project start time, year only
    lastUpdated: 'Last Update Time', // string | boolean
    author: 'Tsanfer',
    authorAvatar: '/avatar.svg',  //Author's Avatar
    mode: 'light',  //Show daytime mode by default
    // Comment Settings
    valineConfig: {
      appId: process.env.LEANCLOUD_APP_ID,
      appKey: process.env.LEANCLOUD_APP_KEY,
    }
  },

  markdown: {
    lineNumbers: true //Code display line number
  },
  // Search Settings
  search: true,
  searchMaxSuggestions: 10,

  // Plug-in unit
  plugins: [
    ['flowchart'],  // Supporting flowcharts
    [
      '@vuepress-reco/vuepress-plugin-bgm-player',  // BGM Player
      {
        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'],  // Smooth scrolling
    ['@vuepress/nprogress'],  // Load Progress Bar
    ['reading-progress']  // Reading Progress Bar
  ]
}

Github Actions Configuration

Modify Github Actions Profile

Add a Github Actions profile to the Github Web page, refer to the official documentation, and choose what you want to keep secret. The Github Secrets environment variable needs to be added

SamKirkland / FTP-Deploy-Action

# .github/workflows/nodejs.yml

on: push  # The conditions that trigger this file to run
name: Github Actions  # Name of this workflow
jobs:
  FTP-Deploy-Action:
    name: FTP-Deploy-Action # Name of the task
    runs-on: ubuntu-latest  # Running Environment
    steps:
    - uses: actions/checkout@master # Switch Branch to master
      with:
        fetch-depth: 2

    - name: Use Node.js 12.x  
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'
        
    - name: Build Project # The name of this step
      run: yarn && yarn build # Download Dependencies and Build Projects
      env:
        LEANCLOUD_APP_ID: ${{ secrets.LEANCLOUD_APP_ID }} # ID of comment system
        LEANCLOUD_APP_KEY: ${{ secrets.LEANCLOUD_APP_KEY }} # KEY of Comment System

    - name: List output files
      run: ls -a docs/.vuepress/dist # Show generated directory files
      
    - name: FTP-Deploy-Action
      uses: SamKirkland/FTP-Deploy-Action@3.0.0
      with:
        ftp-server: sftp://39.107.221.57:22 #Server Address and Port (Domain name can be filled in, but my server does a site-wide acceleration that will lead to the IP of the acceleration node, so only the IP of the server can be used)
        ftp-username: ${{ secrets.FTP_USERNAME }} # FTP User Name
        ftp-password: ${{ secrets.FTP_PASSWORD }} # FTP Password
        git-ftp-args: --insecure --remote-root /home/www/htdocs # Where do you want to deploy to the server (I'm using SFTP, if it's an FTP connection--insecure doesn't need to be added)
        local-dir: docs/.vuepress/dist/ # Choose which files to deploy to the server, and when this option is selected here, add the appropriate path to.git-ftp-include
// .git-ftp-include

!docs/.vuepress/dist/

Add Github Token

To keep confidential, use variables to represent important information and add values to Github Secrets

Settings for warehouse --> Secrets --> Add a new secret

such as

  • Name: FTP_USERNAME
  • Value: admin

Finally, uploading code to Github automatically triggers the build and deploys it to a third-party server

This article is written by Tsanfer's Blog Release!

This article is published by blog OpenWrite Release!

Tags: Javascript github ftp git sudo

Posted on Sun, 22 Mar 2020 04:36:40 -0400 by macattack