使用vuepress-reco主题创建博客
文章目录
- 使用vuepress-reco主题创建博客
- 1. 创建博客工程
- 2. 工程结构
- 3. 部署到gitee
- 3.1 新建仓库
- 3.2 修改配置文件
- 3.3 推送到gitee
- 3.4 部署
使用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 # 此处通过方向键选择您首页风格,这里我们选择blogdoc
接下来进入您的工程目录,启动您的项目吧
# 进入项目目录
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文件夹,刚刚我们执行打包命令生成的。
使用vuepress-reco主题创建博客相关推荐
- 主题狗themes.dog-精选上百种优秀开源网站主题、博客主题、商城模板
说明 主题狗themes.dog 精选上百种优秀开源网站主题.博客主题.商城模板. 类型包含 hexo .jekyll .hugo .next .vuepress .gatsby .wordpress ...
- 如何启动 WordPress 博客 – 简易指南 – 创建博客(2021)
您想以正确的方式创建 WordPress 博客吗?我们知道,特别是当您不是技术极客时,创建博客可能是一个复杂的想法.在帮助许多用户创建博客后,我们决定创建最全面的指南,介绍如何在没有任何技术知识的情况 ...
- Hexo+GithubPage搭建Fan主题的博客(2)本地初始化Hexo博客项目
更多信息请关注 个人网站 本地初始化Hexo博客 (1)打开cmd窗口,执行如下命令安装hexo npm install -g hexo-cli 如: D:\src>npm install -g ...
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
- 基于Hexo的matery主题搭建博客并深度优化
本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...
- blogger_如何使用Google Blogger创建博客
blogger If you want to write blog posts, you need a blog to hold those posts. Google's Blogger is a ...
- 一步步在GitHub上创建博客主页-最新版
github page github-page是一个免费的静态网站托管平台,由github提供,它具有以下特点: 免空间费,免流量费 具有项目主页和个人主页两种选择 支持页面生成,可以使用jekyll ...
- 【CSDN如何创建博客专栏?】
[CSDN如何创建博客专栏?] 步骤一:进入博客专栏 步骤二:进入我的专栏 步骤三:创建专栏 步骤四:提交资料 步骤五:创建完成,等待官方通知
- 学生网页设计与制作成品 HTML5+CSS大作业——黑色主题个人博客(5页) 网页设计期末作业个人主页
HTML5+CSS大作业--黑色主题个人博客(5页) 网页设计期末作业个人主页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. ...
最新文章
- EXSI中Linux安装tools
- sdut2772 KMP的简单应用
- UML图系列——用例图
- VTK:绘图之ChartMatrix
- java动态代理--代理接口无实现类
- C语言程序设计(基础)最后一次作业-- 总结报告
- 进程调试--进程启动VS自动附加
- b超可以看出什么_B超什么时候可以看到孕囊?
- Android开发笔记(一百三十八)文本输入布局TextInputLayout
- 华东师范大学计算机模拟试题,华东师范大学网院《计算机入门》模拟试题(卷)(ABCD卷合,含详细答案解析).doc...
- JSP九大内置对象详解
- 音频3A测试 AGC自动增益测试
- SQL-实现excel向下填充的功能
- 简单介绍——【汇总统计数据】工具(ArcMap)
- cobar是什么? 能做什么?
- 武器装备测试系统ETest
- win10去除广告弹窗的有效方法
- java杂谈(瞎吉尔找的练习)
- 论文阅读笔记----《From Easy to Hard: Two-stage Selector and Readerfor Multi-hop Question Answering》
- 人在旅途——》张家界之旅:20180419