gitee怎么仓库间传文件_VuePress +Gitee 快速搭建个人博客

一、快速搭建博客1.怎么才能实现快速搭建博客的呢？其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客；然后你可通过搜索引擎搜索官方文档，动动手指就可以本地运行起来。但是运行起来的只是个 demo ,你的要求肯定不仅限于此。2.怎样搭建一个功能强大的博客呢？继续使用搜索引擎搜索博客主题，然后嵌入自己的内容。一款优秀的博客框架，当然有很多开发者的支持。那么肯定很多的主题（Theme），拿来直接

weixin_39889792

67人浏览 · 2020-10-28 14:14:56

weixin_39889792 · 2020-10-28 14:14:56 发布

一、快速搭建博客

1.怎么才能实现快速搭建博客的呢？

其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客；然后你可通过搜索引擎搜索官方文档，动动手指就可以本地运行起来。但是运行起来的只是个 demo ,你的要求肯定不仅限于此。

2.怎样搭建一个功能强大的博客呢？

继续使用搜索引擎搜索博客主题，然后嵌入自己的内容。一款优秀的博客框架，当然有很多开发者的支持。那么肯定很多的主题（Theme），拿来直接用就好了。

3.博客已搭建起来了，怎么进行个性化改造了？

现在就可以回到本源了，需要什么功能，再去官方文档查阅。然后通过官网的说明再加上自己的一些理解，再在网络中看看他人是如何使用，然后进行个性改造。

二、VuePress 简介

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

三、实战

3.1.博客快速搭建

3.1.1.本地博客搭建命令

a.npm 博客搭建

#插件安装
theme-cli init wangzg-blog

b.yarn 博客搭建

=https://registry.npm.taobao.org

项目运行效果：

3.1.2.代码推送到码云（Gitee）

a.Gitee创建项目

找到wangzg-blogdocs.vuepressconfig.js 添加一行代码

'/vuepress-demo/',

b.推送的代码到Gitee

#克隆空项目到本地
cp wangzg-blog

c.设置Gitee Pages

进入 Gitee 的 vuepress-demo 仓库，选择"服务"-->"Gitee Pages"

不需要填写任何内容，点击"启动"就行。

最终在线访问：https://huaairen.gitee.io/vuepress-demo/

3.2.官方文档教程

VuePress 的官方教程其实特别详细，喜欢从 0 搭建博客的小伙伴可以选择官网教程。

cd myblog
npm init -y 
npm install -D vuepress

最终项目的目录结构如下图：

.
├── docs
│   ├── .vuepress (可选的)
│   │   ├── components (可选的)
│   │   ├── theme (可选的)
│   │   │   └── Layout.vue
│   │   ├── public (可选的)
│   │   ├── styles (可选的)
│   │   │   ├── index.styl
│   │   │   └── palette.styl
│   │   ├── templates (可选的, 谨慎配置)
│   │   │   ├── dev.html
│   │   │   └── ssr.html
│   │   ├── config.js (可选的)
│   │   └── enhanceApp.js (可选的)
│   │ 
│   ├── README.md
│   ├── guide
│   │   └── README.md
│   └── config.md
│ 
└── package.json

更多详细内容可参考官方文档。https://vuepress.vuejs.org/zh/guide/getting-started.html