MENU

VuePress静态博客搭建教程(一)

April 14, 2020 • Read: 203 • 教程学习

前言

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

效果预览

img

演示地址: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/
运行成功如下,即可正常访问
img

结语

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


作者:冰洛

链接:https://icelo.club/archives/43.html

版权:转载时须注明来源:冰洛博客

Last Modified: April 16, 2020
Archives QR Code Tip
QR Code for this page
Tipping QR Code