简单实现Vuepress博客首页

最新推荐文章于 2024-09-06 16:45:43 发布

原创最新推荐文章于 2024-09-06 16:45:43 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack #前端

博客搭建专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Vuepress创建并配置个人博客。首先讲解Vuepress的基本概念和环境搭建，包括Node.js和Vuepress的安装。然后详细阐述了基本配置步骤，如创建目录结构、配置package.json、修改README.md以及配置config.js以定制主页标题和描述。通过这些步骤，你可以快速建立一个简单的Vuepress博客框架。

Vuepress简介

VuePress 是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

官方中文文档

环境搭建

在此之前要先安装好 node.js 和 webpack

node.js 安装 : node.js官网

webpack 安装：

npm install webpack -g

本文主要针对 Vuepress

首先打开控制台( win+R 输入 CMD )

输入以下命令

#win安装vuepress,-g代表全局安装
npm install -g vuepress

安装完毕，在控制台切换到想要存放的目录

#新建文件夹
mkdir blog-demo

#进入blog-demo文件夹
cd blog-demo

#这里可以理解为，新建README.md文件
#并把"#Hello Vuepress"写入文件内
echo "#Hello Vuepress" > README.md

#运行项目
vuepress dev

这时候项目就跑起来了
在这里插入图片描述

复制提供的地址，这里是 http://localhost:8081/，打开浏览器跑一下，就可以看到页面了
在这里插入图片描述

可以看到现在是空白的，这只是一个基本的框架，我们还没有添加主题

基本配置

创建目录结构

我们先来看基础的目录结构，详细目录结构在此

按照此目录和文件在blog-demo文件夹里建好，把刚刚的 README.md 拖进docs目录里

.
├── docs 项目入口目录
│   ├── .vuepress  		 
|	|	 └──config.js 相关配置都在这里 
│   └── README.md  没有指定其他网页会展示此文件
│ 
└── package.json

我们编写的网页都是由.md为后缀的文件，即Markdown，这里推荐一个不错的md编辑器 Typora

配置package.json

回到blog-demo文件夹，打开 package.json 文件

文件里加入下面的代码

{
  "scripts": {
    "docs:dev": "vuepress dev docs",  //vuepress dev 指令运行docs目录
    "docs:build": "vuepress build docs" //vuepress build 指令运行docs目录，即打包
  }
}

这样就可以在该项目编辑器里使用相关命令

这里用的是Webstorm，可以点击下方的Show npm Scripts

在这里插入图片描述

以后点击这里就可以直接运行项目了

修改README.md

在接下来我们要修改 README.md 文件内容，官方提供了默认主题

---   
home: true
heroImage: 
actionText: 快速上手 →
actionLink: /guide/
features:
- title: 简洁至上
  details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
  details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
  details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present xxxxxx
---

复制上面所有内容，粘贴到 README.md 所有内容前面

再次运行项目，就可以看到效果了，上面的内容属于 YAML front matter，有兴趣可以了解
在这里插入图片描述

配置config.js

在 config.js 里加入下面的代码

module.exports = {
  title: 'Aliex', //这里可以换成你的username
  description: '闻道有先后，术业有专攻' //文字描述
}

在这里插入图片描述
可以看到，主页的标题和描述，以及左上角的名字都改变了

至此，基本的主页配置已经完成

你可以删除或修改 README.md 文件的内容，来改变要展示的页面内容

为什么会展示 README.md 里的内容呢？

答：在启动后，服务会默认找到根目录 ./README.md作为默认主页，即这里演示的http://localhost:8081/