提示

Vuepress是Vue作者尤雨溪开发的文档工具，本文采用Vuepress的reco主题进行相关配置说明

1.什么是vuepress 与 vuepress-theme-reco？

VuePress 网站实际上是由 Vue, Vue Router 和 webpack 驱动的静态网站生成器，基于Markdown语法生成网页。简单的说，能够帮助啥也不懂的小白快速搭建一个可用的且免费的博客，就凭这一点还要啥自行车!!!当然，与市面上常用的GItBook、Hexo、docsify相比都要建单得多（bushi，没用过其他的，据其他博主所说其他会多花点时间）。

vuepress-theme-reco，望文生义，即一款 vuepress 主题容器，集成多种主题底层功能，快速生成主题风格，快速预览可打开 午后南杂 (opens new window)来查看效果

2.前提准备

• node.js + npm

  版本要求在>= 8，nodejs安装后自带npm，但可能不是最新版本，需自行更新

  node.js下载地址：https://nodejs.org/zh-cn/ 配置环境变量

• 本地安装git

• Gitee仓库或Github仓库，配置SSH公钥

3.vuepress-theme-reco安装（只需两步）

安装主题

#创建目录
mkdir my-Blog
#切换到目录
cd my-Blog
#官方推荐 引入vuepress-theme-reco主题,本人实验后续会比较麻烦
npm install vuepress-theme-reco --save-dev

#建议直接全局安装
npm install -g vuepress-theme-reco

初始化项目

#上一步按照官方推荐安装可能找不到 theme-cli 指令
theme-cli init blogs #blogs 可替换成自己需要的项目名称

上述命令执行后，在命令行窗口会进行一系列的信息配置

? What's the title of your project?  #键入您的项目标题

? What's the description of your project? #键入您的项目描述

? What's the author's name? #键入作者姓名

? What style do you want your home page to be?(Select afternoon-grocery, if you 
want to download reco_luan's '午后南杂') (Use arrow keys)
❯ blog   # 此处通过方向键选择您首页风格，这里我们选择blog
  doc 
  afternoon-grocery

接下来进入您的工程目录，启动您的项目吧

# 接入项目目录
cd blogs  #my-blog替换为之前您填入的项目名称

# 安装npm
npm install

# 运行测试环境
npm run dev

#n 打包部署
npm run build

访问命令行输出的ip地址，一般为http://localhost:8080，即可访问博客！

4.博客样式结构自定义

tips: 可随时使用 npm run dev 编译查看结果

首先让我们来了解下工程结构：

├─ node_modules #存放着项目所需的依赖，我们不需要关心
├─ docs  #该目录下存放您编写的文档
│  └─ theme-reco
│     ├─ api.md
│     ├─ plugin.md
│     ├─ theme.md
│     └─ README.md
├─ blogs #该目录下存放您编写的博客文章
│     ├─ category1
│     │  ├─ 2018
│     │  │  └─ 121501.md
│     │  └─ 2019
│     │     └─ 092101.md
│     ├─ category2
│     │  ├─ 2016
│     │  │  └─ 121501.md
│     │  └─ 2017
│     │     └─ 092101.md
│     └─ other
│        └─ guide.md
├─ .vuepress # 该目录下存放项目配置文件与静态资源
│   ├─ config.js #该文件用于配置项目
│   └─ public # 该目录下存放网页中所需的静态资源
│     ├─ hero.png # 首页大图
│     ├─ logo.png # 站点logo
│     ├─ favicon.ico #站点图标
│     └─ avatar.png #头像
├─ package.json #依赖管理文件
└─ README.md #这里存放着博客首页的内容

启动页及其他配置项修改:

// .vuepress/config.js
module.exports = {
  "title": "blog", //主题名
  "description": "blog", //描述
  "dest": "public",  //工程编译后目录
//页面右上角链接及图标，均可自定义
  "head": [
    [
      "link", 
      {
        "rel": "icon",
        "href": "/favicon.ico"
      }
    ],
    [
      "meta",
      {
        "name": "viewport",
        "content": "width=device-width,initial-scale=1,user-scalable=no"
      }
    ]
  ],
  "theme": "reco",
  "themeConfig": {
    "nav": [
      {
        "text": "Home",
        "link": "/",
        "icon": "reco-home"
      },
      {
        "text": "TimeLine",
        "link": "/timeline/",
        "icon": "reco-date"
      },
      {
        "text": "Docs",
        "icon": "reco-message",
        "items": [
          {
            "text": "vuepress-reco",
            "link": "/docs/theme-reco/"
          }
        ]
      },
      {
        "text": "Contact",
        "icon": "reco-message",
        "items": [
          {
            "text": "GitHub",
            "link": "https://github.com/recoluan",
            "icon": "reco-github"
          }
        ]
      }
    ],
    "sidebar": {
      "/docs/theme-reco/": [
        "",
        "theme",
        "plugin",
        "api"
      ]
    },
    "type": "blog",
    "blogConfig": {
      "category": {
        "location": 2,
        "text": "Category"
      },
      "tag": {
        "location": 3,
        "text": "Tag"
      }
    },
   // 友情链接部分
    "friendLink": [
      {
        "title": "午后南杂",
        "desc": "Enjoy when you can, and endure when you must.",
        "email": "1156743527@qq.com",
        "link": "https://www.recoluan.com"
      },
      {
        "title": "vuepress-theme-reco",
        "desc": "A simple and beautiful vuepress Blog & Doc theme.",
        "avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
        "link": "https://vuepress-theme-reco.recoluan.com"
      }
    ],
    "logo": "/logo.png", //左上角logo
    "search": true, //是否开启搜索插件，默认开启
    "searchMaxSuggestions": 10, //最多的建议搜索条目
    "lastUpdated": "Last Updated",
    "author": "test", //昵称
    "authorAvatar": "/avatar.png", //头像
    //底部信息
    "record": "xxxx",
    "startYear": "2017"
  },
  "markdown": {
    "lineNumbers": true
  }
}

首页配置:

//根目录下README.md
---
home: true  #指定该文件为您的首页，改为false则不作为首页
heroText: vuepress-theme-reco  #首页居中显示的文本
tagline: A simple and beautiful vuepress blog theme. # 首页显示的标语
# heroImage: /hero.png  #首页显示的主图，默认被注释，取消注释可显示图片
# heroImageStyle: {  # 首页主图的样式控制，默认被注释
#   maxWidth: '600px',
#   width: '100%',
#   display: block,
#   margin: '9rem auto 2rem',
#   background: '#fff',
#   borderRadius: '1rem',
# }
bgImageStyle: { #背景图片样式
  height: '450px'
}

# 以下内容基本上不生效，可以不用关心
isShowTitleInHome: false 
actionText: Guide
actionLink: /views/other/guide
features:
- title: Yesterday
  details: 开发一款看着开心、写着顺手的 vuepress 博客主题
- title: Today
  details: 希望帮助更多的人花更多的时间在内容创作上，而不是博客搭建上
- title: Tomorrow
  details: 希望更多的爱好者能够参与进来，帮助这个主题更好的成长
---

5.如何编写自己的博客

这一步属实有点坑，前边都很简单，略微有点前端基础就可快速搭建，但是官方说的有点含蓄，翻了其他博主的博客才发现，也可移步 官方文档

其实很简单，参考示例文件即可

#保持如下文件头即可
---
title: first page in category1 #博客名称 
date: 2018-12-15 #博客编写日期
sidebar: true  #是否开启侧边栏
tags: 
 - tag1 #博客标签，如有多个，可换行
 - tag2
categories:
 -  category1 #博客分类
---
#这里是正文，随意编写
first page in category1

6. 部署到GitHub或gitee

可在本地主题安装目录对博客编写记录进行git管理，记得 .gitignore 文件忽略编译后目录

#.gitignore 内填写之前设定的编译目录与 node_modules
/build/
/node_modules/

编写部署脚本 deploy.sh 自动构建并推送到github

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd public

#强制拷贝编译后的静态文件至发布仓库目录
cp -rf public/ ../github/vuepress-blog

# 如果是发布到自定义域名
# echo 'www.yourwebsite.com' > CNAME

cd ../github/vuepress-blog
git add -A
git commit -m 'deploy'

# 部署到github页面
git push -f git@github.com:songiro/vuepress-blog.git gh-pages

# 如果发布到 https://USERNAME.github.io/<REPO>  REPO=github上的项目
# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pages

cd -

my-Blog 根目录下添加 deploy 指令

  "scripts": {
    "deploy": "bash deploy.sh",
    "dev": "vuepress dev . --open --host \"localhost\"",
    "build": "vuepress build ."
  },

my-Blog 目录（即根目录）下执行

git init 
git add -A
git commit -m "xxxx" #提交备注变更信息
git pull origin develop --rebase
git push -u origin xxx #提交到指定分支

首先创建GitHub仓库或Gitee仓库，这里因为Gitee仓库需要认证，懒得弄，仅以GitHub为准,Gitee类似，可作参考

创建远程仓库后，克隆到本地某一路径下

git clone xxx  xxx/github/vuepress-blog

根目录下运行

git run deploy

TODO

• 待参考
  1. Vuepress使用指南(reco) - 知乎 (zhihu.com)
  2. 使用vuepress搭建一个博客，并解决过程中遇到的几个问题。_吕招焕的博客-CSDN博客
  3. Vuepress-theme-reco + Gitee 博客搭建 - 掘金 (juejin.cn)
  4. Gitee+VuePress搭建个人博客 - 腾讯云开发者社区-腾讯云 (tencent.com)
  5. VuePress+Gitee|搭建静态博客 - 简书 (jianshu.com)
  6. VuePress +Gitee 快速搭建个人博客 - 腾讯云开发者社区-腾讯云 (tencent.com)
• 私有云主机部署
  1. 使用vuepress搭建博客并发布到云服务器 - 知乎 (zhihu.com)
• 评论、导航树插件
  1. VuePress 博客搭建系列 33 篇正式完结！ - 知乎 (zhihu.com)
  2. [VuePress搭建博客并发布到GitHub Pages | Heart Thief (theheartthief.github.io)](https://theheartthief.github.io/articles/VuePress搭建博客并发布到GitHub Pages.html#配置网站)
• 修改自定义主题
• git常用操作
• linux常用命令大全

1.git配置多ssh-key

https://zhuanlan.zhihu.com/p/154604608

https://cloud.tencent.com/developer/article/1372129

2.vuepress博客从安装到入土

• https://blog.csdn.net/weixin_52834435/article/details/125136972
• https://blog.csdn.net/qq_34252283/article/details/105921837
• https://blog.csdn.net/weixin_52834435/article/details/125136972
• https://www.cnblogs.com/LHLVS/p/11376732.html
• vuepress-theme-reco+Github Actions构建静态博客，部署到第三方服务器 - 知乎 (zhihu.com)
• Vuepress-theme-reco + Gitee 博客搭建 - 掘金 (juejin.cn)
• 手把手教你用 VuePress + GitHub Pages 搭建个人博客 - 掘金 (juejin.cn)
• VuePress 从零搭建到部署 - 掘金 (juejin.cn)

参考下就行

• 部署 VuePress 到 GitHub Pages (超详细) - 简书 (jianshu.com)
• 部署 VuePress 到 GitHub Pages (超详细) - 掘金 (juejin.cn)
• Vuepress-theme-reco + Gitee 博客搭建 - 掘金 (juejin.cn)
• vuepress-theme-reco博客项目部署github_源哥哥呐的博客-CSDN博客

主题优化与自定义

• vuepress reco主题优化与修改_会飞的小弋的博客-CSDN博客_vuepress-theme-reco
• (Ő∀Ő3)ノ哇喔！欢迎！vuepress-theme-reco主题魔改 | 小弋の生活馆 (gitee.io)

1. npm常用命令
   • npm install 命令的介绍_zh阿飞的博客-CSDN博客_npm stall

参考：

1. 搭建个人博客，最想推荐的 10 大框架，强烈建议收藏 - 掘金 (juejin.cn)
2. Hexo-零基础搭建个人博客(详解)_〆清峰ㄟ的博客-CSDN博客_hexo