如何快速搭建好看的个人博客(完整配置与源码)

为什么选择vuepress

博客地址 程序员成长指北(http://www.inode.club/)  可以先体验下。

之前使用docsify部署过个人博客, 在此之前也使用过gitbook, 这次使用vuepress来改版, 根据自己的体验, 将这三者做一个对比

• 从阅读体验来说(个人感觉): gitbook > docsify =vuepress

• 从配置上来说, docsify相比于vuepress和gitbook都要简单一些.

• 从性能上来说: vuepress > docsify

  虽然docsify也是基于vue的, docsify是运行时解析, vuepress是预先渲染HTML

• 灵活性上, vuepress也是相当占优势的, 对vue熟悉的朋友可以编写vue组件实现你想要的功能样式

vuepress特性

• 为技术文档而优化的内置Markdown拓展

• 在Markdown文件中使用Vue组件的能力

• Vue驱动的自定义主题系统

• 自动生成Service Worker(支持PWA)

• Google Analytics集成

• 基于Git的"最后更新时间

• 多语言支持

• 响应式布局

• 支持PWA模式

总的来说, 使用vuepress优势有挺多的, 特别是我之前使用docsify搭建的网站, 是一点也没有被浏览器收录啊, 怎么都搜不到,受到一万点打击,所以决心改一改

其实vuepress的官网已经写的挺好的了, 但是我这篇文章也有优势啊,是一步步的教你搭建, 这样就不用来回在文档中去找什么配置.(当然如果你想直接通过官网来学习, 可以直接看官网,点击链接就可以喔)

项目搭建

安装vuepress

第一步就是进行vuepress进行安装: 如果使用npm来安装, Node.js版本需要 >=8 才可以

yarn global add vuepress # 或者：npm install -g vuepress

注意

如果你的现有项目依赖了 webpack 3.x，推荐使用 Yarn而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

初始化项目

创建项目目录blog

mkdir blog
cd blog

初始化

yarn init -y # 或者 npm init -y

初始化完成后, 会创建一个package.json

{
  "name":"blog",  
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
  "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
  }
}

在package.json中, 配置启动命令

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

启动项目: npm run docs:dev这条命令就等于vuepress dev docs

打包项目: npm run build 这条命令就等于 vuepress build docs

创建docs目录, 主要用于放置我们写的.md类型的文章以及.vuepress相关的配置

mkdir docs

接着在docs文件夹中创建.vuepress文件夹

cd docs
mkdir .vuepress

这个文件主要就是放vuepress相关的配置

到这一步, 我们的项目大体架子已经搭建出来了,接下来进行配置.

页面具体内容配置

基本配置

接下来要让页面显示内容, 就需要进行配置, 新建一个总的配置文件config.js, 这个文件的名字是固定的.

cd .vuepress
touch config.js

config.js最基础的配置文件内容如下:

module.exports = {
    title: 'koala的博客',
    description: '专注 Node.js 技术栈分享，从前端到Node.js再到数据库',
}

如果这时运行npm run docs:dev或者yarn docs:dev, 会出现页面404页面,vuepress默认打开的是docs下的readme.md文件, 由于你没有创建,所以找到的是vuepress默认提供的404页面, 关于这有点,我们借助vue-devtoo