丢掉烂大街的Hexo吧，用Vuepress搭建专属你的博客吧

1、先来聊聊搭建博客

1.1. 什么人喜欢折腾博客

一般若是不是爱折腾或者有特别需求的普通人，通常对于搭建博客的需求其实不大，一般主要一下几类人会搭建博客本身玩玩。

• 程序员 (喜欢写一些技术博客，分享一些问题)
• 设计工做者 (须要一个平台暂时本身，一般的网站知足不了他们)
• 技术爱好者 (不必定是干IT的，可是但愿搞一个博客交流的)
• 文艺青年 (喜欢写写文章分享给你们的)
• 极客 (喜欢追求极致，喜欢作一些酷炫吊炸天的网站的异类)

对于上述几类人群，咱们再细分一下，他们可以搭建博客的方式。

• 博客平台 (CSDN、博客园、Farbox之类的一站式平台，写好文章网上丢就能够了)
• 纯本身码 (须要超强的技术壁垒)

• 搭建博客的工具 (下面会进行详细说明，目前也是最主流的方式)

  • WordPress
  • Hexo
  • Hugo
  • Vuepress (本文主要说的)
  • jekyll

1.2. 简单对比一下几个吧！(不废话，直接说缺点)

• WordPress：第一个是麻烦，学习成本高，第二个必需要搞一个本身域名主机，操做很麻烦，新手门槛高。
• Hexo：好，好，好 ，轻量 、简单 、实用 、方便 —————but 烂大街了，如今随便百度仍是谷歌搜一下都是Hexo搭建博客，NexT主题也被用烂大街了，致使搭一个博客一点新意都没，没有那种成就感。(固然你本身能另写主题就算了)
• Hugo：小众 文档少 优化少 主题少 坑多
• jekyll：跟Hugo也差很少
• Vuepress：哈哈哈，比Hugo/jekyll 文档还少，主题更少 (惊不惊喜，意不意外) ，教程也少，要否则都是重复的。--------but 真心好看，是尤雨溪大神的力做，优化更不要说了，总体风格极简却又很是适合文档阅读，并且流畅，最重要，使用的人少，个性化定制多，只要你会点vue，你的博客只属于你。

1.3. 废话很少说，直接看效果

预览效果：https://domyselfzy.github.io/

首页

文章

时间线

关于我

2、正菜开始

2.1 直接开干

vuepress官网：https://vuepress.vuejs.org/zh/

若是想搭建一个简单的vuepress博客，很简单。

1. 项目安装

   不推荐全局安装方式，由于一个新手很难把握文件层级

   # 将 VuePress 做为一个本地依赖安装
   yarn add -D vuepress # 或者：npm install -D vuepress
   
   # 新建一个 docs 文件夹
   mkdir docs
   
   # 新建一个 markdown 文件
   echo '# Hello VuePress!' > docs/README.md
   
   # 开始写做
   npx vuepress dev docs

   目录以下：

2. package.json配置

   须要在刚刚生成的文件夹下，找到package.json，在里面添加如下内容（若是没有本身新增）

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

3. 运行命令

   yarn docs:dev # 或者：npm run docs:dev

   在浏览器地址上输入：http://localhost:8080/

   因而你就看到如下这个页面了

4. 构建和生成静态页面

   yarn docs:build # 或者：npm run docs:build

至此，一个简单基于vuepress的博客就诞生了！是否是如此简单。

2.2 基于vuepress主题的搭建

确定不少人看完第一眼感受，靠，这么low，也好意思拿出来，就是一个白页嘛~

对 ，你说的都对 ，就是这么个白页，可是正是由于这个白页才体现它的强大。

why？？？

由于咱们以后写博客基本都是基于markdown编写 ，因此咱们以后vuepress的页面大部分状况均可以经过markdown进行布局。固然若是你是vue的高手，你也能够本身使用vue编写layout布局。

2.2.1 vuepress-theme-reco

这个主题应该是现存vuepress最好的一个主题之一，是博主午后南杂制做的一个超赞主题。

主题地址：https://vuepress-theme-reco.recoluan.com/

2.2.2 动手干

以前咱们是以项目安装的方式进行构建

如今不须要了 ，直接安装主题就完了。（废弃以前的文件夹，从新指定一个新文件夹位置my-blog，能够因此指定）

# create
npx vuepress-theme-reco-cli init my-blog
# or
npm install  -g
reco-cli init my-blog

# install
cd my-blog
npm install

# run
npm run dev

# build
npm run build

安装的时候选择1.0版本

安装完成后目录以下：

基本和以前的相似 ，只是含一些主题文件对应的.md文件

这个时候文件夹是没有node_modules依赖模块，因此咱们仍是要按照以前的方式从新依赖一遍

yarn add -D vuepress

慢慢等待完成

而后，直接运行命令yarn dev直接看效果吧。

效果图：

这个就是主题文件运行的效果了。

3、优化篇

至此主要的工做已经所有完成了，下面你就能够定制你须要的博客了。

固然离定制化博客仍是差之千里，有兴趣能够关注个人公众号，看一下我以后的文章，专门对vuepress主题进行优化。

具体效果能够参考个人博客：https://domyselfzy.coding.me/

错过期光