1小时带你搭建vuepress高大上个人博客

vuepress概述

安装前准备

需要安装node环境和npm支持， vuepress 基于 node 8.0+，查看版本npm命令

node -v

我的是12的，没问题，npm版本不做要求。

安装步骤

1、全局安装

# 创建一个放项目的文件夹
mkdir vuepress
# 在文件夹中全局安装
npm install -g vuepress

2、项目初始化

npm init -y

初始化后会生成一个package.json文件

3、配置package.json，添加下面两行

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

4、创建主页

新建docs文件夹用来存放博客文件

进入到docs里面创建一个README.md文件，这个文件就是我们的首页，我们在里面编辑一些内容

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

5、启动一下

npm run dev

6、访问一下

大功告成，监听在了8080端口了

我们访问下 http://localhost:8080/ ，刚刚README.md里配置的一些信息也已经能够显示出来了

7、编译

按ctrl+C结束运行，执行以下命令编译

npm run build

编译完成以后在docs文件夹下多了一个.vuepress文件夹

8、配置信息

我们在.vuepress文件夹下新建一个config.js文件

这个文件是全局重要的配置文件，包括配置网站的标题、描述、主题、导航栏等信息，内容如下：

module.exports = {
    title: 'XXX的博客',
    description: 'XXX的博客',
    dest: './dist',
    port: '8080',
    head: [
        ['link', {rel: 'icon', href: '/logo.jpg'}]
    ],
    markdown: {
        lineNumbers: true
    },
    themeConfig: {
        nav: [{
            text: '指南', link: '/guide/'
        }],
        sidebar: {'/guide/':[
            {
                  title:'新手指南',
                  collapsable: true,
                  children:[
                    '/guide/notes/one',
                  ]
                },
                {
                  title:'java',
                  collapsable: true,
                  children:[
                    '/guide/notes/two',
                  ]
                }
            ]
        },
        sidebarDepth: 2,
        lastUpdated: 'Last Updated',
        searchMaxSuggestoins: 10,
        serviceWorker: {
            updatePopup: {
                message: "有新的内容.",
                buttonText: '更新'
            }
        },
        editLinks: true,
        editLinkText: '在 GitHub 上编辑此页 ！'
    }
}

nav是导航栏，sidebar是侧边栏，具体的配置，你想要的效果还有分组啥的，可以参考官网的写法，我这里只是一个demo的写法：官网导航栏侧边栏配置

9、写文章

完成了基础搭建后，按照config.js里面配置的目录结构，在docs目录下新增相应的.md文件，一篇文章就是一个.md文件

发布部署

1、部署nginx

首先要安装nginx，nginx是服务器，部署的文章参考《CentOS7源码方式安装nginx-1.18.0》

2、编译文件

再次执行npm run build，.vuepress下的dist文件夹，这里存放的就是编译后的文件

3、上传到服务器

先把文件夹打包 然后执行命令，上传到服务器

rz -y

在服务器端解压

unzip dist.zip

4、配置nginx

配置nginx.conf文件

server {
	listen 8081;
	location / {
			root /root/product/doc/dist; //这里就是dist解压出来的路径
			try_files $uri $uri/ /index.html;
			index index.html index.htm;
		}
    }

5、重启nginx

重新加载Nginx配置文件，然后以优雅的方式重启Nginx

nginx -s reload

6、访问

按照你部署的 ip:8081 端口访问，然后就是购买域名备案一些操作，完成以后就可以通过域名来访问啦！

大家可以通过 www.xiaojieboshi.com 来看下我部署的网站的效果，最后感谢大家的观看，点个赞，快去动手搭建一个属于自己的博客吧~