VuePress从零开始搭建本身的博客

时间 2019-11-24

标签 vuepress 开始搭建本身博客繁體版

原文原文链接

VuePress从零开始搭建本身的博客

最近将本身的博客从Hexo转移到VuePress中来，使用VuePress的过程当中也遇到了一些问题，写一篇文章来记录一下搭建过程和踩过的坑。javascript

VuePress是什么？

VuePress是以Vue驱动的静态网站生成器，是一个由Vue、Vue Router和webpack驱动的单页应用。在VuePress中，你可使用Markdown编写文档，而后生成网页，每个由VuePress生成的页面都带有预渲染好的HTML，也所以具备很是好的加载性能和搜索引擎优化。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用，其余的页面则会只在用户浏览到的时候才按需加载。html

详情请看VuePress官方文档vue

VuePress特性

为技术文档而优化的内置Markdown拓展
在Markdown文件中使用Vue组件的能力
Vue驱动的自定义主题系统
自动生成Service Worker(支持PWA)
Google Analytics集成
基于Git的"最后更新时间"
多语言支持
响应式布局

环境搭建

安装

VuePress支持使用Yarn和npm来安装，Node.js版本须要>=8才能够。java

全局安装VuePress

yarn global add vuepress # 或者：npm install -g vuepress
复制代码

建立项目目录

mkdir project
cd project
复制代码

初始化项目

yarn init -y # 或者 npm init -y
复制代码

新建docs文件夹

docs文件夹做为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。android

mkdir docs
复制代码

设置package.json

VuePress中有两个命令，vuepress dev docs命令运行本地服务，经过访问http://localhost:8080便可预览网站，vuepress build docs命令用来生成静态文件，默认状况下，放置在docs/.vuepress/dist目录中，固然你也能够在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build便可。webpack

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
复制代码

建立.vuepress目录

在docs目录中，建立.vuepress目录，.vuepress目录主要用于存放VuePress相关的文件。ios

mkdir .vuepress
复制代码

建立config.js

进入到.vuepress目录中，而后建立config.js，config.js是VuePress必要的配置文件，它导出y一个javascript对象。git

touch config.js
复制代码

建立public文件夹

进入到.vuepress目录中，而后建立public文件夹，此文件夹主要放静态资源文件，例如favicons和 PWA的图标。github

mkdir public
复制代码

此时，项目的结构差很少就出来了。web

project
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

复制代码

以上只是简单了搭建了一下博客的开发环境，接下来是博客主要的基本配置config.js，也是必需要作的。

基本配置

一个config.js的主要配置包括网站的标题、描述等基本信息，以及主题的配置。这里简单的列举一下经常使用配置。

网站信息

module.exports = {
    title: '我的主页', 
    description: '姜帅杰的博客',
    head: [
        ['link', { rel: 'icon', href: '/img/logo.ico' }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
    ]
}
复制代码

title：网站标题
description：网站描述
head：额外的须要被注入到当前页面的HTML"head"中的标签，其中路径的"/"就是public资源目录。

具体配置详情请看文档：配置

主题配置

module.exports = {
       themeConfig: {
        nav: [
            { text: '主页', link: '/' },
            { text: '博文',
              items: [
                { text: 'Android', link: '/android/' },
                { text: 'ios', link: '/ios/' },
                { text: 'Web', link: '/web/' }
              ] 
            },
            { text: '关于', link: '/about/' },
            { text: 'Github', link: 'https://www.github.com/codeteenager' },
        ],
        sidebar: {
            '/android/': [
                        "",
                        "android1", 
                    	 ...
                         ],
                "/ios/":[
                        "",
                        "ios1",
                        ],
                "/web/":[
                        "",
                        "web1",
                        ...
            				 ],
            },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated', 
    },
}
复制代码

nav：导航栏配置，此配置主要用于配置导航栏的连接，例如以上主页的link为"/"，默认是根目录下的README.md。"/android/"连接到根目录docs下的android文件夹下的README.md文件。
sidebar：侧边栏配置，你能够省略.md拓展名，同时以/结尾的路径将会被视为 */README.md。'/android/'、'/ios/'和'/web/'是经过路由的方式将每一个页面的标题抽取出来显示。"/android/"是指根目录下android文件夹中的路由，每一个路由连接都要有README.md。因此目录结构以下：
```
├─── docs
├── README.md
└── android
│   └── README.md
└── ios
   └── README.md

复制代码
```
sidebarDepth：嵌套的标题连接深度，默认的深度为1。
lastUpdated：最后更新时间。

侧边栏如图：

具体主题配置详情请看文档：主题配置

PWA配置

VuePress默认支持PWA配置的，须要在基本配置中开启serviceWorker。

module.exports = {
	 serviceWorker: true,
}
复制代码

而后再添加icons和Manifest配置，在public中添加manifest.json配置，和图标。若是不知道PWA的能够到PWA配置查看相关资料。

{
  "name": "姜帅杰",
  "short_name": "姜帅杰",
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#2196f3",
  "description": "姜帅杰的我的主页",
  "theme_color": "blue",
  "icons": [
    {
      "src": "./logo.png",
      "sizes": "144x144",
      "type": "image/png"
    }
  ],
  "related_applications": [
    {
      "platform": "web"
    },
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
复制代码

在config.js配置中添加manifest.json，因为iphone11.3不支持manifest的图标，因此加上apple-touch-icon图标配置便可。

module.exports = {
	head: [
	        ['link', { rel: 'manifest', href: '/manifest.json' }],
	        ['link', { rel: 'apple-touch-icon', href: '/img/logo.png' }],
	      ]
}
复制代码

最后在iphone中访问网站，而后添加主屏幕便可。

自定义页面

默认的主题提供了一个首页（Homepage）的布局(用于这个网站的主页)。想要使用它，须要在你的根级 README.md的home: true，而后添加数据。

---
home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专一于写做。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每一个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将做为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
复制代码

效果以下：

若是你想自定义首页或者其余页面，能够在页面的md文件中添加页面Vue文件。Vue文件放置在docs/.vuepress/components目录中。

---
layout: HomeLayout
---
复制代码

例如我博客的自定义首页：

部署上线

因为构建的时候生成静态页面，因此将dist文件夹中的内容能够部署在gitHub的pages或者coding的pages均可以。若是使用git上传到github上，操做比较繁琐，这里使用脚本的方式自动部署到github上。

建立一个deploy.sh

在project下建立deploy.sh。

touch deploy.sh
复制代码

编写脚本

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 若是是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 若是发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 若是发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
复制代码

设置package.json

{
	"scripts": {
	    "deploy": "bash deploy.sh"
	  },
}
复制代码

运行npm run deploy 便可自动构建部署到github上。

详情请看，部署

示例：个人博客