GoodLoving博客

# 基于VuePress的个人博客建立和部署

大家先看看完成后的大致效果 goodloving的个人博客（https://goodloving.github.io/） ，当然，该博客也可以在项目中查看。

博客中也会定期更新一些知识点和一些不同的项目教程，同时大家有兴趣也可以关注本人的个人公众号 迟亦早 ，内容会同步发布！

该实例简单易懂，能够实现快速建立个人博客和说明文档的需求；但是也有不足，文档格式相对固定，只针对markdown格式，样式比较统一！

# 1.知识储备

  • 1、了解基本的npm操作
  • 2、具有Vue.js基础
  • 3、了解markdown的基本语法

# 2.快速上手

  • 1、全局安装vuepress
yarn global add vuepress  或者 npm install -g vuepress
  • 2、创建项目目录
mkdir vuepress-starter && cd vuepress-starter
  • 3、初始化项目
npm init  或者 yarn init
  • 4、添加运行命令 在第三步生成的pageckage.json文件的script中添加项目运行和打包的命令
"scripts": {
    "dev": "vuepress dev docs",         //预览
    "build": "vuepress build docs"      //项目打包
}

进行到这里，我们输入下面项目运行命令并不会有效果，因为我们到现在还没有搭建项目基本的结构！

npm run dev 或者 yarn dev

# 3.建立项目结构

VuePress 遵循 “约定优于配置” 的原则，也就是说我们必须按照官网中要求的项目结构搭建项目目录，推荐的目录结构如下,当然官网上更加全面大家可以参照官网进行：

.
├── docs
│   ├── .vuepress 
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public 
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── config.js 
│   │ 
│   ├── README.md
│   ├── pages
│   │   └── 自己的md文档目录，比如该项目中我设置为blogs文件夹
│   └── config.md
├── deploy.sh     //之后用于编写上传、发布脚本的文件
└── package.json

建立完基本结构后我们还需要对项目中的基本内容进行填充：

  • 1、在config.js中进行顶部导航栏等项目核心配置
module.exports = {
  title: "GoodLoving博客", // 显示在左上角的网页名称以及首页在浏览器标签显示的title名称
  description: "goodloving的个人博客", // meta 中的描述文字，用于搜索引擎中搜索字段
  // 下面代码会注入当生成的HTML <head> 的标签中
  head: [
    [
      "link",
      { rel: "icon", href: "/deer.png" }, //浏览器的标签栏的图标，'/'表示public文件夹的文件
    ],
  ],
  themeConfig: {
    logo: "/deer.png", //网页顶端导航栏左上角的图标

    //顶部导航栏
    nav: [
      //格式一：直接跳转，'/'为不添加路由，跳转至首页
      { text: "首页", link: "/" },
      { text: "文章", link: "/pages/blogs/catalog.md" },
      { text: "CSDN", link: "https://blog.csdn.net/qq_31967985" },
      { text: "码云", link: "https://gitee.com/goodloving" },
      { text: "Github", link: "https://github.com/goodloving" },
    ]
  },
};

对应网页中的显示如下图：

  • 2、在README.md文件中修改首页样式
---
home: true
heroImage: /deer.png
heroText: GL的学习记录
tagline: 好好学习，天天向上
actionText: 进入Blogs →
actionLink: /pages/blogs/catalog.md
features:
- title: 零碎知识点
  details: 博客中涉及到html、js、css等相关的内容，大部分是个人中生活工作中所遇到和有兴趣去了解记录的，内容因个人而异。
- title: 框架应用
  details: 这里所指的框架不单单是前端框架如VUE、REACT、WEEX、FLUTTER等，也会涉及到后端框架如EXPRESS,不过绝大部分还是前端相关。
- title: 实例应用
  details: 所学目的为所有，博客中会结合所了解的web前后端技术、合理运用各种框架来实现各种程序应用，在写程序的过程中加深对技术的了解！
---

对应生成的首页如下图：

  • 3、在config.js中进行侧边导航栏等项目核心配置
module.exports = {

  //隐藏上述代码·····

  themeConfig: {
    logo: "/deer.png", //网页顶端导航栏左上角的图标

    //顶部导航栏
    nav: [
      //格式一：直接跳转，'/'为不添加路由，跳转至首页
      { text: "首页", link: "/" },
      { text: "文章", link: "/pages/blogs/catalog.md" },
      { text: "CSDN", link: "https://blog.csdn.net/qq_31967985" },
      { text: "码云", link: "https://gitee.com/goodloving" },
      { text: "Github", link: "https://github.com/goodloving" },
    ],

    //侧边导航栏：会根据当前的文件路径是否匹配侧边栏数据，自动显示/隐藏
    sidebar: {
      "/pages/blogs/": [
        {
          title: "导航", // 一级菜单名称
          collapsable: true, // false为默认展开菜单, 默认值true是折叠,
          sidebarDepth: 1, //  设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
          children: [
            ["catalog.md", "目录"], //菜单名称为'子菜单1'，跳转至/pages/folder1/test1.md
          ],
        },
        {
          title: "Vue基础", // 一级菜单名称
          collapsable: true, // false为默认展开菜单, 默认值true是折叠,
          sidebarDepth: 1, //  设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
          children: [
            ["[Vue一]:了解Vue项目的建立.md", "[Vue一]:了解Vue项目的建立"], 
            ["[Vue二]:简单登录界面的实现.md", "[Vue二]:简单登录界面的实现"],
            ["[Vue三]:用户登录状态保存和判断.md", "[Vue三]:用户登录状态保存和判断"], 
            ["[Vue四]:node后端响应登录请求.md", "[Vue四]:node后端响应登录请求"],
            ["[Vue五]:Vue和echarts结合.md", "[Vue五]:Vue和echarts结合"], 
            ["[Vue六]:vue开发自定义插件.md", "[Vue六]:vue开发自定义插件"],
            ["[Vue七]:通过nginx的服务器配置.md", "[Vue七]:通过nginx的服务器配置"]
          ],
        },
        {
          title: "Node基础", // 一级菜单名称
          collapsable: true, // false为默认展开菜单, 默认值true是折叠,
          sidebarDepth: 1, //  设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
          children: [
            ["async、await与promise.md", "async、await与promise"], 
            ["node.js自带的异步写法.md", "node.js自带的异步写法"],
          ],
        },
        {
          title: "项目应用", // 一级菜单名称
          collapsable: true, // false为默认展开菜单, 默认值true是折叠,
          sidebarDepth: 1, //  设置侧边导航自动提取markdown文件标题的层级，默认1为h2层级
          children: [
            ["基于VuePress的个人博客建立和部署.md", "1、基于VuePress的个人博客建立和部署"], 
          ],
        },
        
      ]
      //...
    },
  },
};

进行到这里我们的项目基本可以运行npm run dev 或者 yarn dev简单观察下效果！ 注意：这里我们必须注意一点nav中对应的link为/pages/blogs/catalog.md，则在设置左侧侧栏时，所有的文档必须放在catalog.md的同一级别目录下！在通过sidebar中的 children对目录进行分类！

  • 4、项目对markdown的解析 进行完上面操作，我对于导航栏、侧边栏、首页我们应该都有所了解，当时当我们配置中的md文件不存在时，点击相应的导航将会跳转到404。如对应的md文件存在，在运行时项目会将md解析为对应的html文件！如下图所示：

# 4.快速部署和发布

在 docs/.vuepress/config.js 中设置正确的 base。
如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。
如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。
在该项目中我直接部署到github.io/
  • 1、在你的项目中，创建一个如下的 deploy.sh 文件（请自行判断去掉高亮行的注释）:
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
cd -
  • 2、修改package.json，添加执行发布部署脚本的命令
"scripts": {
    ......
    "deploy": "bash deploy.sh"
}

之后我们每次执行的时候，只需要运行 npm run deploy 或者 yarn deploy ,经过上述步骤我们就可以通过https://你的用户名.github.io访问自己的博客或者说明文档了！

欢迎大家关注本人的微信公众号，微信公众号将不定期发送相应学习文章和教程

微信号：chiyizao
或者微信公众号搜索：
迟亦早
二维码

文章参考：

  • 1、裂泉：https://juejin.im/post/5dce1e0e5188254eda3936c5
  • 2、官网：https://www.vuepress.cn/

← 2、UniApp开发小程序怎么可以这么简单 →