前言

想要分分钟搭建本人博客，能够间接跳到最初，教你如何分分钟搭建博客。

速览

  • [x] 这是一款 Vuepress 主题，集成了博客所需的分类、TAG墙、分页、评论等性能。
  • [x] 主题谋求极简，配置上手简略，适配挪动端。
  • [x] 预览地址
  • [x] 主题插件GitHub地址
  • [x] 集体博客部署GitHub地址
  • [x] 博客成果展现：

主题应用

装置主题

创立一个新的我的项目 my-blog：

mkdir my-blogcd 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: '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 &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: Aboutsubtitle: 你能够很好，但你无需完满headerImage: /about-bg.jpg # public 文件夹下的图片---上面为个人信息等内容...

创立博文

在 src/_posts 下创立 md 文件

<!-- _posts/2019-04-01-JS异步编程计划总结.md -->---title: JS异步编程计划总结date: 2019-04-01tags:  - Promise  - JavaScript---本篇博客次要是对 Javcscript 异步编程计划总结more 下面的内容是摘要，将显示在目录中。<!-- more -->more 上面的内容只有浏览这篇文章时才会齐全展现，不会显示在目录中。

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

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

Github 收费部署博客

增加deploy.sh 文件

# 主动部署脚本  set -e# 构建npm run build# 导航到构建输入目录cd src/.vuepress/distgit initgit add -Agit 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 快速访问。部署形式参照下面收费部署流程，分分钟搭建丑陋的博客。

最初

如果感觉主题好用的话或者须要改良的中央，欢送点赞Star和提issue，你的激励是对我莫大的反对，谢谢。