VuePress搭建个人博客

时间：2021-03-12 08:36:46 阅读：54 评论：0 收藏：0 [点我收藏+]

npm install -g vuepress

技术分享图片

npm init -y

技术分享图片

新建文件夹docs

配置package.json，添加下述兩行

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

技术分享图片

进入docs文件夹创建 README.md文件

此时运行命令

npm run dev

技术分享图片

结束运行，执行命令build

技术分享图片

然后看文件变化多了个node_modules
docs 多了个 .vuepress文件夹

study
+--docs
+----.vuepress
+------ dist   //打包后的文件夹
+----README.md
+--package.json
+--node_modules

我们在.vuepress 创建
config.js 文件
添加

module.exports = {
  title: ‘个人博客‘,
  description: ‘个人博客‘,
  head: [ // 注入到当前页面的 HTML <head> 中的标签
    [‘link‘, { rel: ‘icon‘, href: ‘/logo.jpg‘ }], // 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: ‘/‘, // 这是部署到github相关的配置
  markdown: {
    lineNumbers: false // 代码块显示行号
  },
  themeConfig: {
    nav:[ // 导航栏配置
      {text: ‘ceph‘, link: ‘/ceph‘ },
      {text: ‘算法题库‘, link: ‘/algorithm/‘},
      {text: ‘微博‘, link: ‘https://baidu.com‘}      
    ],
    sidebar: ‘auto‘, // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
  }
};

md文件放在README.md同级目录下

技术分享图片

运行看下

技术分享图片

至此，搭建完成！

VuePress搭建个人博客

原文：https://www.cnblogs.com/mabiao008/p/14521517.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)