使用vuepress-reco主题创建博客

使用vuepress-reco主题创建博客

1. 创建博客工程

# 全局安装脚手架工具
npm install @vuepress-reco/theme-cli -g
 
# 创建项目
theme-cli init my-blog  #my-blog可替换成自己需要的项目名称

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

? 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 

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

# 进入项目目录
cd my-blog  #my-blog替换为之前您填入的项目名称
 
# 安装npm
npm install
 
# 运行测试环境
npm run dev

访问命令行输出的ip地址，一般为http://localhost:8080(若端口被占用则依次递增，以终端输出为准)，即可访问您的博客了！

2. 工程结构

├─ 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 #这里存放着博客首页的内容

3. 部署到gitee

3.1 新建仓库

这里按照情况新建仓库。

3.2 修改配置文件

在 docs/.vuepress/config.js 中设置正确的 base.

如果你打算发布到 https://<USERNAME>.github.io/，则可以省略这一步，因为 base 默认即是 "/"。

如果你打算发布到 https://<USERNAME>.github.io/<REPO>/（也就是说你的仓库在 https://github.com/<USERNAME>/<REPO>），则将 base 设置为 "/<REPO>/"。

3.3 推送到gitee

进入blog目录，打开打开gitbash命令行工具，打包博客，执行命令：

npm run build

命令执行后，会在public目录生成静态文件。

使用git命令，把整个工程推送到gitee。

3.4 部署

打开gitee page配置页面，配置部署分支和部署目录。

• 部署分支，不用改，默认master。
• 部署目录，选择public文件夹，刚刚我们执行打包命令生成的。