vuepress静态博客搭建

最新推荐文章于 2024-08-21 19:59:10 发布

Boke_Lu

最新推荐文章于 2024-08-21 19:59:10 发布

阅读量339

点赞数

本文链接：https://blog.csdn.net/qq_38855572/article/details/115750940

版权

vuepress基本框架搭建

请注意：在搭建vuepress框架前，请先安装 node.js 依赖的软件工具，安装教程请百度。

1、新建一个文件夹，并命名为：boke_vuepress 。（命名自愿随意）

2、在 boke_vuepress 文件夹下，全局安装 vuepress 插件，运行指令为: npm install -g vuepress 。

3、在 boke_vuepress 文件夹下，初始化项目，运行指令为：npm init -y 。

4、在 boke_vuepress 文件下，新建 docs 文件夹，docs 文件夹作为项目文档根目录，主要放置 Markdown 类型的文章和 .vuepress 文件夹。

5、运行初始化指令（ npm init -y ）后，会生成一个 package.json 文件，对 package.json 进行设置。

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

7、原先初始化后的 package.json 的内容如下：

{
  "name": "boke_vuepress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

我们新增的内容为：

"dev": "npm dev docs",
"build": "npm build docs"

设置 package.json 的内容如下：

{
  "name": "boke_vuepress",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

（注意：设置成 “dev”: “npm dev docs” 的 “dev”: 和 “build”: 就可以在编译器的控制台直接运行： npm run dev 和 npm run build ,）

8、在 docs 目录中，创建 .vuepress 目录，运行的命令行为： mkdir .vuepress 文件夹， .vuepress 目录主要用于存放 vuepress 相关的文件。

9、进入到 .vuepress 文件夹，然后创建 config.js 文件，运行的命令行为：touch config.js ，config.js 为 vuepress 必要的配置文件，它导出一个JavaScript 对象。

10、在 .vuepress 文件夹下，创建 public 文件夹，运行的命令行为：mkdir public ，public文件夹主要放置静态资源文件，例如favicons和PWA的图标。

11、在 docs 文件下，新建一个 md 文件，命名为：README.md ，这个 README.md 是博客模板的首页展示文件，不可缺少。

12、在 11 点提到的 README.md，配置如下：

---
home: true
heroImage: /images/logo.jpg
actionText: 快速浏览 →
actionLink: /index/
features:
- title: 前栈
  details: 前栈专注于记录vue、react、uniapp、小程序、微信公众号、easyUI、ES6、JavaScript、node、webpack...等技术栈点的记录。
- title: I Miss You
  details: 以 Markdown 为中心的项目结构，以开发技术栈为节点，以日常开发足迹为线索，专注于日常技术开发的记录，留下足迹，以便日后浏览。
- title: 后栈
  details: 后栈专注于记录java、spring、springboot、springCloud、MongoDB、MQ、mybatis、springMVC、Struts...等技术栈点的记录。
footer: MY Blog | Copyright © 2021-present Event For You
---

（注意：actionLink: /index/ 是首页的“快速浏览”按钮跳转链接地址，这个“index”是 docs 文件下的一个 index 文件夹，直接跳到二级页面，也是博客的主要内容页，并且不用
在 config.js 文件中配置路径）

13、此时，项目的结构差不多出来了，基本上算是一个基础模板了。

在这里插入图片描述

14、接下来配置是 config.js 文件配置，基础模板配置如下（实际可以根据自己需要配置）：

module.exports = {
    title: 'Boke_Lu(LuYiqiang)\'s blog', //首页显示的文字标题
    description: '记录个人博客', //首页显示的主题描述
    head: [ // 注入到当前页面的 HTML <head> 中的标签
      ['link', { 
        rel: 'icon', 
        href: '/images/logo.jpg' //首页的中间图片
     }], // 增加一个自定义的 favicon(网页标签的图标)
    ],
    // base: '/myBlog.github.io/', // 这是部署到github相关的配置
    base: '/', // 这是本地相关的配置
    markdown: {
      lineNumbers: false // 代码块显示行号
    },
    themeConfig: {
      displayAllHeaders: true, //头部显示所有
      // 导航栏配置
      nav:[ 
        {text: '首页', link: '/'},
        {text: '前端博文', link: '/FrontEndBlog/' },
        {text: '后端博文', link: '/algorithm/'},
        {text: '后端技术', 
            items:[
                {text: 'Java技术类', link: '/www.baidu.com/'},
                {text: 'Go技术类', link: '/www.jingdong.com/'},
            ]
        }      
      ],
       // 添加侧边栏
       sidebar: [
        {
          title: 'vuepress&Markdown',
          children: [
            'vuepress/vuepress框架搭建.md',
            'vuepress/markdown基本语法.md',
          ]
        },
        {
          title: 'Java',
          children: [
              {
                title: 'JDK',
                children: [
                  'Java/jdk环境安装教程.md'
                ]
              },
              {
                title: 'Java的集合系列',
                children: [
                  'Java/properties.md',
                ]
              }
          ]
        }     
      ]
    }
  };

15、然后最关键的是 config.js 文件中，配置的头部导航栏和侧边栏。大致模板如上代码所示，然后在 docs 文件夹下，新建对应的文件夹和文件，如新建 Java 文件夹，在此文件夹下新建 jdk环境安装教程.md 。
如下图项目结构：

在这里插入图片描述

16、在编译器的控制台，回滚到初始新建的文件夹 boke_vuepress 下，如果想运行访问此框架博客，命令行为：npm run dev 。打包此框架博客，命令行为：npm run build 。
运行后如图：

在这里插入图片描述

此基础博客模板源码下载链接：(留言发送)

如果是在GitHub或者在码云上面克隆下来的模板代码，记得一定要在克隆下来的本模板文件夹下，初始化一下vuepress依赖（npm install -g vuepress），如果初始化了依赖还是不行，那就是初始化的过程中，vuepress依赖没有初始下载完全，那就要先把本模板项目删掉，再重新克隆下来，再次初始化vuepress依赖，直到可以在vscode控制台运行 npm run dev 命令行。

有问题请留言，联系方式（1145382675@qq.com）