乐趣区

关于vuepress:分分钟教你搭建Vuepress漂亮主题博客

jiezi

前言

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

速览

  • [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: '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: 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 收费部署博客

增加 deploy.sh 文件

# 主动部署脚本  
set -e
# 构建
npm run build
# 导航到构建输入目录
cd src/.vuepress/dist

git 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 快速访问。部署形式参照下面收费部署流程，分分钟搭建丑陋的博客。

最初

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

退出移动版