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

vuepress概述

• vue驱动的静态网站生成器
• 基于markdown语法生成网页
• 可自定义和扩展样式
• 可以发布至github

安装前准备

需要安装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: trueheroImage: /logo.webpactionText: 快速上手 →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.webp'}]    ],    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 来看下我部署的网站的效果，最后感谢大家的观看，点个赞，快去动手搭建一个属于自己的博客吧~