Teach you to build a beautiful Vuepress theme blog in minutes

Preface

If you want to build your own blog in minutes, you can skip to the end and teach you how to build a blog in minutes.

Quick glance

• [x] This is a Vuepress theme that integrates the classification, TAG wall, pagination, comment and other functions required by the blog.
• [x] The theme pursues minimalism, the configuration is simple to get started, and it is suitable for mobile terminals.
• [x] Preview address
• [x] Theme plugin GitHub address
• [x] Personal blog deployment GitHub address
• [x] Blog effect display:

Theme use

Install themes

Create a new project my-blog:

mkdir my-blog
cd my-blog

Initialize yarn or npm:

yarn init  或 npm init -y

Install vuepress and vuepress-theme-melodydl:

yarn add vuepress vuepress-theme-melodydl
或
npm install vuepress vuepress-theme-melodydl

Create the src/_posts folder and Vuepress configuration file. The project structure is roughly as follows:

my-blog
├── src # Blog 源文件目录
│   ├── .vuepress # Vuepress 目录
│   │   └── public # Vuepress 静态资源文件
│   │   └── config.js # Vuepress 配置文件
│   └── about # About 页面 文件夹
│   │   ├── index.md  # about 页面内容文件
│   └── _posts # 博客文件夹
│       ├── xxx.md
│       ...
└── package.json

Add the script field to package.json:

{
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
}

Configure the theme

Configure Vuepress and themes in src/.vuepress/config.js:

<details>
<summary>Click to show configuration example</summary>

module.exports = {
    // 网站 Title
      title: 'Top 的博客 ｜ Top Blog',
      
      // 网站描述
      description: '个人博客',
      
      // 网站 favicon 图标设置等
      head: [
        ['link', { rel: 'icon', href: '/favicon.ico' }],
        ['meta', { name: 'viewport', content: 'width=device-width,initial-scale=1,user-scalable=no' }]
      ],
      
      // 使用的主题
      theme: 'melodydl',
      
      // 主题配置
      themeConfig: {
        title: 'Top Blog',

    // 个人信息（没有或不想设置的，删掉对应字段即可）
    personalInfo: {
    
    // 名称
      name: 'melodydl',
      
      // 头像 public文件夹下
      avatar: '/avatar-top.jpeg',
      
      // 头部背景图
      headerBackgroundImg: '/avatar-bg.jpeg',
      
      // 个人简介 (支持 HTML)
      description: 'In me the tiger sniffs the rose<br/>心有猛虎，细嗅蔷薇',
      
       // 电子邮箱
      email: '[e-mail]',
      
      // 所在地
      location: 'Shanghai, China'
    },
    // 顶部导航栏内容
    nav: [ 
      {text: 'HOME', link: '/' },
      {text: 'ABOUT', link: '/about/'},
      {text: 'TAGS', link: '/tags/'}      
    ],
    
    // 首页头部标题背景图设置，图片直接放在 public 文件夹下
    header: {
      home: {
        title: 'Top Blog', 
        subtitle: '好好生活，慢慢相遇', 
        headerImage: '/home-bg.jpeg'
      },
      
      // tag页面头部标题背景图设置，图片直接放在 public 文件夹下
      tags: {
        title: 'Tags', 
        subtitle: '遇见你花光了我所有的运气', 
        headerImage: '/tags-bg.jpg'
      },
      
      // 文章详情头部背景图
      postHeaderImg: '/post-bg.jpeg',
    },
    
    // 社交平台帐号信息 
    sns: {
      csdn: { 
        account: 'csdn', 
        link: 'https://blog.csdn.net/weixin_44002432', 
      },
      weibo: { 
        account: 'weibo', 
        link: 'https://weibo.com/u/5656925978', 
      },
      juejin: { 
        account: 'juejin',
        link: 'https://juejin.im/user/3843548382238791'
      },
      zhihu: { 
        account: 'zhihu',
        link: 'https://www.zhihu.com/people/sheng-tang-de-xing-kong'
      },
      github: { 
        account: 'github',
        link: 'https://github.com/youdeliang'
      }
    },
    // 底部 footer 的相关设置 
    footer: {
      // gitbutton  配置
      gitbtn: {
        // 仓库地址
        repository: "https://ghbtns.com/github-btn.html?user=youdeliang&repo=vuepress-theme-top&type=star&count=true",
        frameborder: 0,
        scrolling: 0,
        width: "80px",
        height: "20px"
      },
      
      // 添加自定义 footer
      custom: `Copyright &copy; Top Blog 2020 <br /> 
        Theme By <a href="https://www.vuepress.cn/" target="_blank">VuePress</a>
        | <a href="https://www.github.com/youdeliang/" target="_blank">youdeliang</a>`
    },
    
    // 分页配置
    pagination: {
      // 每页文章数量
      perPage: 5,
    },
    
    // vssue 评论配置, 如果不需要，可以设置 comments: false
    comments: {    
      owner: 'youdeliang',
      repo: 'vuepress-theme-melodydl',
      clientId: 'dfba8ecad544784fec1f',
      clientSecret: '1358ac11bc8face24f598601991083e27372988d',
      autoCreateIssue: false,
    },
  }
}

</details>

Vssue comment plugin

If you know Gitment and Gitalk, then Vssue is actually no different from the functions they implement-store comments in Github's Issue system, post and display comments on your page, edit and delete comments, and provide a plug-in for Vuepress (The initial motivation was to open comments on your Vuepress blog).

The Vssue comment plug-in can be used to view the documentation manual. Portal .

about page configuration

---
layout: about 
title: About
subtitle: 你可以很好，但你无需完美
headerImage: /about-bg.jpg # public 文件夹下的图片
---

下面为个人信息等内容...

Create a blog post

Create md file under src/_posts

<!-- _posts/2019-04-01-JS异步编程方案总结.md -->
---
title: JS异步编程方案总结
date: 2019-04-01
tags:
  - Promise
  - JavaScript
---

本篇博客主要是对 Javcscript 异步编程方案总结

more 上面的内容是摘要，将显示在目录中。

<!-- more -->

more 下面的内容只有浏览这篇文章时才会完全展示，不会显示在目录中。

Run the corresponding script to generate your blog website

# 开发
npm run dev
# 构建
npm run build

Github Action free automatic deployment blog

Add .github/workflows/deploy.yml file

name: Build and Deploy
on: [push] // 推送代码触发脚本
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master

    - name: vuepress-deploy
      uses: jenkey2011/vuepress-deploy@master
      env:
        ACCESS_TOKEN: ${{ secrets._TOKEN }} // github Token
        TARGET_REPO: youdeliang/youdeliang.github.io  // 仓库

        TARGET_BRANCH: gh-pages    // build 之后推到的分支名
        BUILD_SCRIPT: yarn && yarn build
        BUILD_DIR: src/.vuepress/dist/     //build 之后的目录
        CNAME: www.ydlcq.cn

Secrets Token generation steps:

Firstly

Next step

Modify github configuration

First, you must change the warehouse name to youdeliang.github.io , the user name plus .github.io format, click the item setting.

Then, find GitHub Pages click Check it out here!
Find the branch and folder directory of the source, select the package upload, and click save.

The last generated link is the link to your blog.

For other specific deployment steps, please refer to the official Vuepress documentation. Portal

Build a blog in minutes

Deploy a blog demonstration project
Top Blog , you can copy the project directly, you need to find config.js and package.json in the project and modify the git address or important information inside to your own. If you don’t know how to modify it, you can check the detailed tutorial above (change the git address to your own , Other subsequent modifications are also possible). Run yarn install , yarn dev quick access. The deployment method refers to the free deployment process above to build a beautiful blog in minutes.

At last

If you think the theme is useful or needs improvement, please Star and raise the issue. Your encouragement is your great support for me, thank you 🙏.