VuePress静态博客搭建教程（一）

前言

VuePress 是一款比较好看的静态博客，主要由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。更多详情请访问官方网站 VuePress

效果预览

演示地址：https://icelox.github.io/

环境安装

• 需要使用Yarn或者npm来安装，Node.js版本需要>=8才可以。
• 如果不会安装npm请转到：npm指南

开始搭建

• 创建项目的文件夹

在你的电脑磁盘中创建一个文件夹，也可以使用mkdir命令创建：

mkdir vuepress
#该目录作为整本书的项目目录

• 全局安装VuePress

推荐使用VS Code 安装博客的搭建，在VS Code中打开项目文件夹，新建一个终端输入命令：

npm install -g vuepress
#全局安装VuePress

• 初始化项目

进入项目文件夹，然后初始化项目

cd vuepress
npm init -y
#初始化

在初始化完成时会生成一个package.jsno文件

• 创建docs目录

在当前的目录下面创建一个docs目录

mkdir docs
#这里主要存放网站的主要文件

• 首页文件书写

下面代码主要是网站的首页文件，在READEME.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: MIT Licensed | Copyright © 2018-present Evan You
---

核心配置

• 在docs目录下创建.VuePress目录

cd docs
mkdir .vuepress
#在这个目录下主要存放网站的核心配置文件

• 新建一个配置文件为config.js

cd .vuepress
touch config.js

在config.js文件中加入内容如下：

module.exports = {
    title: '冰洛学院',
    description: '开启百万年薪之路',
    port: '8080',
    locales: {
      '/': {
        lang: 'zh-CN',
      }
    },
    themeConfig: { 
      defaultTheme: 'dark',
    sidebarDepth: 2,
    nextLinks: true,
    prevLinks: true,
      lastUpdated: '最后更新',
        logo: 'https://note-icelo.oss-cn-shanghai.aliyuncs.com/Root/logo.png',
       //sidebar: 'auto',
      repo: 'iceloX/VuePress',
       sidebar:{
        '/ide/': [
          '',     /* /foo/ */
        ]},
       },
        editLinks: true,
        editLinkText: '编辑',
        nav: [
            {text: 'Home', link: '/' },
            {text: 'Guide', link: '/guide/' },
            {text: 'IDE', link: '/ide/' }
        ],
    }
}

在上述的配置文件中themConfig中有两个关键配置，nav，sidebar，咱们在下面的文章中在介绍！

• 运行

npm run docs:dev

在浏览器中打开： http://localhost:8080/
运行成功如下，即可正常访问

结语

以上教程暂时仅在本机实现，下面文章将会继续介绍如何配置主题的导航栏和侧边栏，以及如何部署到GitHubPage页面和自定义的域名页面！

版权声明：文章转载请注明来源，如有侵权请联系删除！