Vuepress is a document page generation tool provided by Vue. Although blog adaptation has not been officially implemented, it can now be used as its own blog generation tool with small configuration file modifications

preparation

To set up a blog, we need a place to put our blog pages, ideally on Github

Establish warehouse

Although Github now offers Github Pages for each repository, we still need github’s earphone cable domain name, so

  1. Create a RepositoryThe name of the repository must also be< your username >.github. IO.I’m Mizuka-wu.github. IO
  2. You can also create a CNAME file in the project directory and fill in your own domain name. SSL can be applied by certbot for three months (renewal of three months can be unlimited).
  3. Download Git and download the Git project locally

To establishvuepressworkflow

Why? Mainly I think… The default theme is nice

Basic Environment Setup (NPM)

  1. NPM init(create package.json)
  2. fromwww.gitignore.io/Downloading gitignore files is recommendedwget https://www.gitignore.io/api/node,webstorm+all,visualstudiocode -o .gitignore
  3. Create a blog folder (not using the doc vuepress uses because we are not creating a document)

Vuepress configuration

Vuepress generation depends on. Vuepress using the default configuration is also possible

We ended up using Vuepress to build the MD file we had written, and since github. IO is a static resource server, So the path becomes very important, so the configuration is basically to change the build path to /post/ in the root directory and put resources like index.html in the root directory once they are built

  • Increase vuepressnpm i vuepress -D
  • Create a. Vuepress folder under the blog foldercd blog && mkdir .vuepress
  • Create config.js basePath in the.vuepress folder to ensure the correct location of the output and generated file reference resources
const basePath = 'post'

module.exports = {
    // meta
    title: 'My Blog'.description: 'Everything is empty, everything is allowed.'.// vuepress config
    dest: basePath,
    base: ` /${basePath}/ `.serviceWorker: true.evergreen: true.ga: 'UA-112738831-1'
}
Copy the code
  • Add script to package.json
  "scripts": {
    "dev": "vuepress dev blog"."build": "vuepress build blog",},Copy the code
  • Automatically move files after build – my solution is to write a script through spwan to add files in the future. If you don’t mind adding && cp post/index.html./ under build command

Esm is recommended for a node that can use es Module

/** * Build blog * @author Mizuka 
      
        */
      @outlook.com>
import spawn from 'cross-spawn'
import { copyFile, writeFileSync } from 'fs'
import config from './blog/.vuepress/config'

const builder = spawn('vuepress'['build'.'blog'])
builder.stdout.on('data'.function (s) {
  console.log(s.toString())
})

builder.stdout.on('end'.function () {
  if (config.postsAsRoot) {
    copyFile('post/index.html'.'index.html', (err) => {
      if (err) {
        console.error(err)
        throw err
      }
      console.log('copy /post/index.html to /')})}})Copy the code

Start writing!

The rest is to write markdown files to your liking on your blog and post them to Github

Tip a home page and display all articles

Vuepress provides a syntax for generating a home page. Here is how to display all documents

Vuepress supports writing vue in Markdown!

Vuepress provides a lot of information, such as $site.pages

Add a piece of vue code under blog/ readme. md

# All articles
<div style="display: flex; flex-direction: column">
    <div v-for="page of $site.pages.filter(item => item.path ! = = '/')" :key="page.key" style="padding: 20px 0; max-width: 33%;">
        <router-link :to="page.path">
            {{page.title}}
            <div style="color: #c2c5cd; font-size: .5rem;">{{(page.frontmatter.tags || ['No label']).join(', ')}}</div>
        </router-link>
    </div>
</div>
Copy the code

After the

The default project files can be downloaded directly from my Github blog