分分钟教你搭建Vuepress漂亮主题博客 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 和主题：

点击展示配置示例

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 心有猛虎，细嗅蔷薇',// 电子邮箱 email: 'facecode@foxmail.com',// 所在地 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 © Top Blog 2020 Theme By VuePress | youdeliang` },// 分页配置 pagination: { // 每页文章数量 perPage: 5, },// vssue 评论配置, 如果不需要，可以设置 comments: false comments: { owner: 'youdeliang', repo: 'vuepress-theme-melodydl', clientId: 'dfba8ecad544784fec1f', clientSecret: '1358ac11bc8face24f598601991083e27372988d', autoCreateIssue: false, }, } }

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

--- layout: about title: About subtitle: 你可以很好，但你无需完美 headerImage: /about-bg.jpg # public 文件夹下的图片 ---下面为个人信息等内容...

创建博文
在 src/_posts 下创建 md 文件

--- title: JS异步编程方案总结 date: 2019-04-01 tags: - Promise - JavaScript ---本篇博客主要是对 Javcscript 异步编程方案总结more 上面的内容是摘要，将显示在目录中。more 下面的内容只有浏览这篇文章时才会完全展示，不会显示在目录中。

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

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

Github 免费部署博客添加deploy.sh 文件

# 自动部署脚本 set -e # 构建 npm run build # 导航到构建输出目录 cd src/.vuepress/distgit init git add -A git commit -m 'deploy'# 推到你仓库的 master 分支 git push -f git@github.com:fantastic-cq/blog.git master

packages.json添加运行脚命令

"scripts": { "dev": "vuepress dev src", "build": "vuepress build src", "deploy": "bash deploy.sh" },

运行yarn deploy命令，会将打包后的文件发布到github master 新的分支上面，这边仓库得连接上远程github库上面。
修改github配置
首先必须将仓库名称改成youdeliang.github.io,用户名加.github.io格式，点击项目 setting。

文章图片

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

文章图片

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

文章图片

ps：小编之前是使用travis自动部署，奈何撸羊毛太严重，人家已经改成收费的。所以这种方式虽然繁琐点，但是简单易操作。后面也会探索另外的自动部署方式。
其他部署具体步骤可以参考 Vuepress 官方文档。传送门
分分钟搭建博客部署博客示范项目
Top Blog，可以把项目直接拷过去，需要在项目中找到config.js和package.json将里面的git地址或重要信息修改成自己的，不懂如何修改可以查看上面详细教程（git地址要改成自己的，其他的后面修改也可以）。运行yarn install, yarn dev 快速访问。部署方式参照上面免费部署流程，分分钟搭建漂亮的博客。
最后 【分分钟教你搭建Vuepress漂亮主题博客】如果觉得主题好用的话或者需要改进的地方，欢迎点赞Star和提issue，你的鼓励是对我莫大的支持，谢谢。