从01开始 从01开始
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)

peterjxl

人生如逆旅,我亦是行人
首页
  • 计算机科学导论
  • 数字电路
  • 计算机组成原理

    • 计算机组成原理-北大网课
  • 操作系统
  • Linux
  • Docker
  • 计算机网络
  • 计算机常识
  • Git
  • JavaSE
  • Java高级
  • JavaEE

    • Ant
    • Maven
    • Log4j
    • Junit
    • JDBC
    • XML-JSON
  • JavaWeb

    • 服务器软件
    • Servlet
  • Spring
  • 主流框架

    • Redis
    • Mybatis
    • Lucene
    • Elasticsearch
    • RabbitMQ
    • MyCat
    • Lombok
  • SpringMVC
  • SpringBoot
  • 学习网课的心得
  • 输入法
  • 节假日TodoList
  • 其他
  • 关于本站
  • 网站日记
  • 友人帐
  • 如何搭建一个博客
GitHub (opens new window)
  • 从零开始搭建博客系列
  • 什么是博客
  • HelloVuePress
    • VuePress是什么
    • 官方文档
    • 版本
    • 环境准备
    • 第一个博客
    • Git初始化
    • 获取源码
  • VuePress日常使用
  • 主题
  • 插件
  • 更多配置
  • 部署
  • 域名、HTTPS和备案
  • 图床
  • 搜索功能
  • 评论区
  • CDN
  • 数据统计
  • SEO
  • 友情链接
  • 网站安全
  • 搭建博客
  • 搭建博客
2023-02-22
目录

HelloVuePress

# 02.Hello VuePress

从本文开始,动手搭建自己的博客!希望读者能跟着一起来,这样才能真正掌握。

# VuePress是什么

VuePress是由Vue作者带领团队开发的,非常火,使用的人很多;Vue框架官网 (opens new window)也是用了VuePress搭建的。

即使是在移动端,阅读体验也很好。

根据 VuePress官网 (opens new window)的描述,VuePress是 Vue 驱动的静态网站生成器。简单来说,就是将Markdown文件自动转换HTML,简洁容易使用,性能高,我们只需专注于Markdown内容。

‍

# 官方文档

一般来说,学习什么技术,或者使用什么工具,官网文档是最好的……

但对于我来说,官网的文档相当于一个手册,大而全;而我需要的是一个教程,逐步逐步完善功能,而不是一上来就列出所有的功能,令人眼花缭乱。为此,我自己整理了不少关于VuePress的笔记,看了不少关于VuePress入门的博客,才略有所得。

‍

# 版本

本文使用的是VuePress1.x,虽然VuePress2.x (也称为VuePress@next)已经出来一段时间了(2021年左右),但是VuePress1.x的生态很完善,不少主题和插件都仅兼容1.x,所以本文也是使用1.x。

就好比Java中,Java8是用的最广泛的,生态也非常完善,最新版的Java较少人使用。

‍

读者如果想使用最新版本的VuePress,也可参考官方的文档,在官网右上角可以选择。博主也简单看了下v2.x的文档,在使用方面基本上和v1.x差不多,想要迁移也是很方便的。

​

‍

除此之外还有vitepress (opens new window),基于vite建立的,也是因为生态不完善,所以这里不过多介绍。

‍

‍

# 环境准备

我们首先在本地搭建博客,为此我们需要:

  1. 一台电脑
  2. VuePress1.x需要Node版本 ≥ 8.6,建议用最新版的Node。
  3. Chrome或FireFox浏览器(尽量不要用IE浏览器)

‍

# 第一个博客

我们来写第一个博客吧!首先,创建一个文件夹,例如vuepress-learn(父目录最好不要带中文和空格),也可以在cmd里使用如下命令

# Windows下
md vuepress-learn 
cd vuepress-learn

# Linux和mac下
mkdir vuepress-learn && cd vuepress-learn
1
2
3
4
5
6

‍

使用自己喜欢的包管理器初始化:

npm init -y
或
yarn init
1
2
3

‍

‍

安装VuePress依赖

npm install -D vuepress
1

‍

开始写第一篇博客

  1. 我们在当前目录下创建一个docs目录(以后博客都放这个文件夹里),
  2. 进入到该文件夹,创建一个README.md​文档,里面写上内容“Hello VuePress”。
  3. 如果是在Linux或Mac下,也可以使用如下命令一步到位:
mkdir docs && echo '# Hello VuePress' > docs/README.md
1

‍

‍

修改package.json文件,添加一些启动命令

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
1
2
3
4
5
6

其中,docd:dev命令相当于在本地运行本博客;而docs:build相当于编译打包本博客,用于部署到服务器上。

‍

当前文件夹目录结果如下(忽略node_modules文件夹)

vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json
1
2
3
4
5

‍

启动博客:在项目根目录运行如下命令:

npm run docs:dev
1

‍

运行后,正常情况下就能编译成功,并且在最后会有提示:

success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )
1

‍

我们打开本地的 http://localhost:8080,可以看到如下内容:

​​​​

‍

至此,我们的第一篇博客就完成了!

‍

# Git初始化

为了后续教程需要,我们将本项目用Git管理

git init
1

‍

添加 .gitignore文件,忽略node_modules文件夹:

node_modules
1

‍

‍

# 获取源码

为了写本系列的博客,博主特地新建了一个项目用于演示,相关代码已放到Gitee (opens new window)和GitHub (opens new window)上。

并且,不同功能创建了不同分支,想要获取本篇文章演示的源码只需切换分支即可!

例如,你想运行本篇文章所创建的博客,可以这样做:

  1. 打开命令行
  2. 拉取代码:git clone git@gitee.com:peterjxl/vuepress-learn.git (也可拉取GitHub的)
  3. 跳转目录:cd vuepress-learn
  4. 切换分支:git switch -c VuePressDemo1HelloWorld origin/VuePressDemo1HelloWorld
  5. 安装依赖:npm i
  6. 运行博客:npm run docs:dev

‍

‍

‍

‍

在GitHub上编辑此页 (opens new window)
上次更新: 2023/3/1 16:23:58
什么是博客
VuePress日常使用

← 什么是博客 VuePress日常使用→

Theme by Vdoing | Copyright © 2022-2023 粤ICP备2022067627号-1 粤公网安备 44011302003646号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式