分分钟教你搭建Vuepress漂亮主题博客

前言

想要分分钟搭建自己博客，可以直接跳到最后，教你如何分分钟搭建博客。

速览

• [x] 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等功能。
• [x] 主题追求极简，配置上手简单，适配移动端。
• [x] 预览地址
• [x] 主题插件GitHub地址
• [x] 个人博客部署GitHub地址
• [x] 博客效果展示：

主题使用

安装主题

创建一个新的项目 my-blog：

mkdir my-blog
cd my-blog

初始化 yarn 或 npm ：

yarn init  或 npm init -y

安装 vuepress 和 vuepress-theme-melodydl：

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

创建 src/_posts 文件夹和 Vuepress 配置文件，项目结构大致为：

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

在 package.json 加入 script 字段：

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

配置主题

在 src/.vuepress/config.js 中配置 Vuepress 和主题：

<details>
<summary>点击展示配置示例</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 评论插件

如果你知道 Gitment 和 Gitalk，那么 Vssue 其实和它们实现的功能没什么区别 —— 在 Github 的 Issue 系统中存储评论，在你的页面上发表和展示评论，还可以编辑和删除评论，提供了 Vuepress 的插件（最初的动力就是给自己的 Vuepress 博客开启评论）。

Vssue 评论插件使用可以查看文档手册。传送门。

about页面配置

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

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

创建博文

在 src/_posts 下创建 md 文件

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

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

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

<!-- more -->

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

运行相应 script 生成你的博客网站

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

Github Action 免费自动部署博客

添加.github/workflows/deploy.yml 文件

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 生成步骤：

首先

下一步

修改github配置

首先必须将仓库名称改成youdeliang.github.io,用户名加.github.io格式，点击项目 setting。

然后，找到GitHub Pages点击Check it out here!
找到source选择打包上传的分支和文件夹目录，点击save。

最后生成链接就是你博客的链接。

其他部署具体步骤可以参考 Vuepress 官方文档。 传送门

分分钟搭建博客

部署博客示范项目
Top Blog，可以把项目直接拷过去，需要在项目中找到config.js和package.json将里面的git地址或重要信息修改成自己的，不懂如何修改可以查看上面详细教程（git地址要改成自己的，其他的后面修改也可以）。运行yarn install, yarn dev 快速访问。部署方式参照上面免费部署流程，分分钟搭建漂亮的博客。

最后

如果觉得主题好用的话或者需要改进的地方，欢迎点赞Star和提issue，你的鼓励是对我莫大的支持，谢谢🙏。