简介

之前有用hexo搭建的静态博客网站，但hexo搭建起来太麻烦了，记得之前搞了一整天，现在使用VuePress方便许多。

VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的单页面应用程序。如果你以前使用过 Vue，那么在编写或开发自定义主题时（甚至可以使用 Vue DevTools 来调试你的自定义主题！），你会融入到熟悉的开发体验中！

 

VuePress安装

安装node.js
安装node.js，版本要求在>= 8
node.js下载地址：https://nodejs.org/zh-cn/
配置环境变量

 

安装vuePress
创建文件 Blog
进入文件夹打开终端，输入

npm install -D vuepress

根据以下结构创建，具体配置参考官方

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

设置package.json的脚本配置
VuePress中有两个命令:
1.vuepress dev docs命令运行本地服务，通过访问(http://localhost:8080)即可预览网站
2.vuepress build docs命令用来生成静态文件，默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。
在这里将两个命令封装成脚本的方式，直接使用npm run dev和npm run build即可。

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

 

在docs的md文件就是我们要显示的页面，vuepress会为每个 markdown 文件都使用 markdown-it 编译为 HTML，然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue。

 

配置

首页配置
默认主题提供了一个主页布局。

home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /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
--- // 页尾

 

导航配置
导航配置文件在.vuepress/config.js中
在导航配置文件中nav是控制导航栏链接的，你可以把它改成自己的博客目录。

module.exports={
 title: 'hello vuepress',
 description: 'Just playing around',
 themeConfig: {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/guide/' },
       { text: 'External', link: 'https://google.com' },
     ]
   }
}

 

部署

配置完可以部署,执行npm run build 将项目打包,在文件config.js中 base至关重要,要将base设置成根目录。可以将发布在云盘中如百度X盘，github上可直接通过链接访问，也可将其发布在云服务器，由于我有个域名，所以打算就其发布在云主机，这里可以选择睿江云。选择广东的节点，大概每天0.88元，算起来比阿里云便宜点。

 

服务器上安装Apache或者nginx
这里拿nginx举例，文档
安装(在安装前要安装依赖包gcc zlib zlib-devel pcre-devel openssl openssl-devel)

//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.17.2.tar.gz
tar -xvf nginx-1.17.2.tar.g

 

将打包好的项目放在/var/www/下(配置前要将域名解析到我们的主机地址)

 

配置

main                                # 全局配置
events {                            # nginx工作模式配置
....
}
http {                                # http设置
 ....
 server {                        # 服务器主机配置
     listen 80;#监听端口
     server_name xxxx.com;#域名
     root        /var/www/dist;#站点目录
     index        index.php index.html index.html;
     ...
     location {                    # 路由配置
         ....
     }
         upstream name {                    # 负载均衡配置
     ....
 }
}

 

检查nginx.conf文件

cd /usr/local/nginx/sbin
./nginx -t  #查看nginx.conf文件是否有语法错误

 

启动nginx

cd /usr/local/nginx/sbin
./nginx -s reload

然后就可以访问站点。

睿江云官网链接：www.eflycloud.com