基于 Vuepress 搭建个人博客，文章详细，助你快速上手

置顶 so_#

已于 2023-09-08 20:38:44 修改

阅读量2.6k

点赞数 3

分类专栏：搭建博客文章标签： vue Vuepress vue.js

于 2020-11-21 00:43:10 首次发布

Jine

本文链接：https://blog.csdn.net/weixin_42760849/article/details/109882444

版权

搭建博客专栏收录该内容

2 篇文章 1 订阅

订阅专栏

搭建博客

几年前使用过 WordPress + 阿里云服务器 搭建了博客，

抹坑后,也顺便使用了阿里云的一些服务。

但当时没有记录笔记的习惯，过了好久很多操作也遗忘了。

加上服务器过期了好多数据也没有备份，那就重新搭一个快速上手的博客，

想着怎么也应该尝试一些新的方法，刚好也了解到了尤大神的 Vuepress。因为也更好的支持 Vue

此文章内容将会抽时间持续更新ing，请尝试不同时间段来参考。

准备工作

1、准备服务器环境，或者最后部署到GitHub或码云托管

因本人常用阿里云服务器操作，有以下简述步骤：

1.1、阿里云官网购买服务器，顺便再阿里云上买个域名

1.2、域名实名认证 + 服务器绑定域名 + 备案网站（这些操作需要审核时间，可以先跳过这步）

1.3、在自己的服务器选择 Linux centos版本系统（初始化）

1.4、需要node环境

1.4.1：可以在创建服务器实例时初始化之前候选择上（但提供的版本太低，最后也可以先升级下，升级node操作自行百度）

1.4.2：也可以在创建服务器实例时候不安装node环境（若选择这步骤可以进行如下操作）

（1）打开node中文官网（http://nodejs.cn/download/）
（2）右键复制 Linux二进制（x64）链接。.tar.xz格式的
（3）打开自己的服务器，使用命令： ‘weget xxxxx（网址链接）’
（4）在该目录下解压，有两层压缩，下面解压命令：

xz -d node-v8.11.3-linux-x64.tar.xz

tar -xvf node-v8.11.3-linux-x64.tar

（5）配置环境变量（nano 是一个命令行编辑器，你也可以使用vim、vi等命令）
sudo vim /etc/profile

复制下面两行到刚打开的profile文件最底部(注意node的安装地址 /root/node-v14.15.0-linux-x64/ 换成自己的)：

#node 8.11.3
export NODE_HOME=/root/node-v14.15.0-linux-x64
export PATH=$PATH:$NODE_HOME/bin

保存后退出，再执行下面命令将环境变量生效：
source /etc/profile

(6)、将目录软链接到全局环境下（命令后面的/usr/local/bin/node是固定的）

ln -s /root/node-v14.15.0-linux-x64/bin/node /usr/local/bin/node

ln -s /root/node-v14.15.0-linux-x64/bin/npm /usr/local/bin/npm

(7)、这样安装好了以后使用npm安装的包(比如：ionic serve)，使用包的命令时可能会提示找不到命令，没关系，在用户目录下终端执行下面命令(固定写法)：

echo -e "export PATH=$(npm prefix -g)/bin:$PATH" >> ~/.bashrc && source ~/.bashrc

(8)、这样我们在所有用户下，都可以使用npm，也可以使用npm安装的包的命令。大功告成，成功的将nodejs安装并配置到全局环境下。

2、安装宝塔

2.0、为什么要安装宝塔？

宝塔只是个辅助工具，日后运维操作可以很方便，对于不懂Linux指令的道友还是很友好的帮助。这里只是对新手的建议，对于老手可以自己进行部署

2.1 、宝塔官网（https://www.bt.cn/download/linux.html）

若是阿里云服务器，建议先参考文章配置好开放的端口号：https://www.bt.cn/bbs/thread-2897-1-1.html

2.2、在服务器中安装宝塔

Centos版本输入以下命令：

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安装过程遇见 y 或 n 选项，直接选y

2.3、安装成功后，你的服务器上会出现外网地址和用户名+密码，打开这个地址，然后输入用户和密码

3、安装 yarn

3.1、为什么要安装yarn，而不使用npm呢？

yarn和npm都是包管理工具，但是yarn是崭新的，经过重新设计的npm客户端，于2016年10月发布，相比于npm，yarn在运行速度上有显著的提升，安装时间变少，功能上也有很多改进。

yarn虽然和nom一样是本地缓存，但是yarn无需互联网链接就能安装本地缓存的依赖项，提供了离线模式，而这个是npm实现不了的。

yarn解决了由于语义版本控制而导致的npm的不确定性问题，通过安装时创建的默认文件，确保使用的库的版本相同。

yarn增加了一些能让开发人员并行化处理所有必需的操作，且通过添加了一些改进，使得运行速度有了显著的提升，整个安装时间也变得更少。

npm的输出信息比较冗长，相比之下，yarn简洁很多。默认情况下，直观且直接地打印出必要的信息。

yarn的语义相对于npm更加清晰，主要是因为yarn改变了一些npm的命令名称，看上去就更清晰了。

上面简介了yarn作用和与npm的对比，但是这里强制采用yarn工具

以下是Vuepress官网给的建议：

如果你的现有项目依赖了 webpack 3.x，我们推荐使用 Yarn 而不是 npm 来安装 VuePress。因为在这种情形下，npm 会生成错误的依赖树。

3.2、安装yarn

这里使用了npm进行安装（也可以采用yum，wget等）

在安装之前，先设置下npm的国内淘宝镜像吧~

npm config set registry https://registry.npm.taobao.org

设置好，那么开始安装，如下：

npm i yarn -g

安装完成后，可以查看下版本，检验是否安装成功

yarn -v

设置yarn国内镜像

yarn config set registry https://registry.npm.taobao.org/

Vuepress 简单使用

以下内容来有一部分自官网文档，我的这些内容是助你快速上手，而不是去copy官网文档

一些官方给的知识点和配置介绍咱先不看，先搭建好，看效果，有别的需求之后再去改动

当然你可以继续参考我的文章，也可直接查看官网的文档

Vuepress官网（https://www.vuepress.cn/）

初始化

1.0、先在本地主机上初始化（最后在部署到服务器上），创建vuepress目录，并进入

mkdir vuepress

cd vuepress

1.1、使用yarn工具，初始化

yarn init -y

1.2、将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

1.3、创建你的第一篇文档

mkdir docs && echo '# Hello VuePress' > docs/README.md

1.4、在 package.json 中添加一些 scripts

此处我们把 docs 目录作为 targetDir 下面所有的“文件的相对路径”都是相对于 docs 目录的。

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

默认页面路由地址如下：

文件的相对路径	页面路由地址
`/README.md`	`/`
`/guide/README.md`	`/guide/`
`/config.md`	`/config.html`

1.5、在本地启动服务器

yarn docs:dev 

# npm run docs:dev

1.6、访问内网（http://localhost:8080）

若出现如下图，便是基本的搭建成功

在这里插入图片描述

目录结构

VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：

.
├── docs
│   ├── .vuepress (可选的)   '用于存放全局的配置、组件、静态资源等。'
│   │   ├── components (可选的)  '该目录中的 Vue 组件将会被自动注册为全局组件'
│   │   ├── theme (可选的)  '用于存放本地主题'
│   │   │   └── Layout.vue
│   │   ├── public (可选的)  '静态资源目录'
│   │   ├── styles (可选的)  '用于存放样式相关的文件'
│   │   │   ├── index.styl  '将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级'
│   │   │   └── palette.styl  '用于重写默认颜色常量，或者设置新的 stylus 颜色常量'
│   │   ├── templates (可选的, 谨慎配置)  '存储 HTML 模板文件。'
│   │   │   ├── dev.html  '用于开发环境的 HTML 模板文件'
│   │   │   └── ssr.html  '构建时基于 Vue SSR 的 HTML 模板文件。'
│   │   ├── config.js (可选的)  '配置文件的入口文件，也可以是 YML 或 toml。'
│   │   └── enhanceApp.js (可选的)  '客户端应用的增强'
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

官网也给了以下提示：

当你想要去自定义 templates/ssr.html 或 templates/dev.html 时，最好基于默认的模板文件 (opens new window)来修改，否则可能会导致构建出错

基本配置

首先在你的文档目录下（也就是docs目录）创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ public
│     └─ config.js
└─ package.json

README.md文件中添加的内容如下：

---
home: true 
heroImage: https://jine.oss-cn-beijing.aliyuncs.com/image/weimei.jpg
actionText: ↓
actionLink: /zh/guide/
heroText: Write the Code,Change the World~
tagline: 喜欢篮球,脾气贼棒√ 
features:
- title: 赞赏  
- details: 点点手指哟~
footer: MIT Licensed | Copyright © 2020-present Evan You
---

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量

VuePress 提供了对 YAML front matter (opens new window)开箱即用的支持，这些数据可以在当前 markdown 的正文，或者是任意的自定义或主题组件中使用。

注意：copy时候，不要把 — 给丢掉，这就类似于写法格式，可不能丢掉

一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：

你可以先把我大概配置页面基本的内容copy，先把页面跑起来

module.exports = {
    title: 'Jine',  //标题
    keywords: '前端开发',
    description: '前端开发 Jine 的个人博客',
    repo: 'https://github.com/',  //仓库地址
    base: '/docs/',  // 配合部署项目
    head: [
        ['link', { rel: 'png', href: '/img/熊猫.png' }]
    ],
    lastUpdated: 'Last Updated',
    themeConfig: {  //主题配置
        // 博客配置
        blogConfig: {
            category: {
                location: 2,     // 在导航栏菜单中所占的位置，默认2
                text: 'Category' // 默认文案 “分类”
            },
            tag: {
                location: 3,     // 在导航栏菜单中所占的位置，默认3
                text: 'Tag'      // 默认文案 “标签”
            }
        },
        logo: '/img/博客专家.png',
        nav: [  //导航栏
            { text: '首页', link: '/' },
            { text: '码趣', link: '/code/' },
            { text: '赞赏', link: '/money/' },
            { text: 'About me', link: '/me/' },
            { text: 'CSDN', link: 'https://blog.csdn.net/weixin_42760849' }
        ],
        sidebar: 'auto',
        displayAllHeaders: true, // 默认值：false
    }
}

/*
以下例举俩个参数的描述如下：

title
类型: string
默认值: undefined
网站的标题，它将会被用作所有页面标题的前缀，同时，默认主题下，它将显示在导航栏（navbar）上。

#description
类型: string
默认值: undefined
网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中。

注意：我的图片路径是在本地的doc/.vuepress/public/img
你在引入图片直接 /img/xxxx.png ，因为它会默认把public目录当做图片资源的根路径
*/

上述的配置好后，运行起 dev server

如下图：

在这里插入图片描述

更多配置和参数描述参见官网的 => 配置来查看所有可配置的选项。

主题配置

在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、侧边栏（sidebar）和首页（homepage）等，详情请参见默认主题。

如果你想开发一个自定义主题，可以参考自定义主题。

主题配置我日后的文章单独去更新

我先建议想要快速搭建个好看的博客，可以先用别人写好的博客主题

vuepress-theme-reco

以下内容参考这个博客主题去搭建，我想说的是先做到用会别人的，再去设计自己的主题让别人用

vuepress-theme-reco 主题使用

最近事情比较多，大概先说下我文章的出发点：

首先你先需要去大概把这个主题的官方文档大概瞟一眼，或者继续参考我的文章。先说明，我的文章不是把官网的文档copy下来或者是说讲一下知识点，这样反而没什么意义。我文章的内容应该是让你快速实现效果，少走许多坑和弯路。

为了使你更加有信心继续跟上我的文章步骤走，我推荐你先看下，下面这几位博主博客的效果（我也是参考这样的样式来改的，后面文章内容会教你加一些自己的Vue组件，和怎么去改原主题的源码）

参考博客地址：

https://reinness.com/
https://www.zealsay.com/

so_#

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
基于 Vuepress 搭建个人博客，文章详细，助你快速上手

搭建博客几年前在小白阶段使用过 WordPress + 阿里云服务器搭建了自己的博客，也走了很多坑，从零摸坑最后也弄好了，也顺便使用了阿里云的一些服务，但当时没有记录笔记的习惯，过了好久很多操作也遗忘了。加上服务器过期了好多数据也没有备份，那就重新搭一个快速上手的博客，想着怎么也应该尝试一些新的方法，刚好也了解到了尤大神的 Vuepress。因为也更好的支持 Vue此文章内容将会抽时间持续更新ing，请尝试不同时间段来参考。准备工作1、准备服务器环境，或者最后部署到GitHub或码
复制链接

扫一扫

专栏目录