VuePress搭建博客部署Gitee Pages

妖狐艹你老母 2022-11-06 14:53 427阅读 0赞

### 使用技术 ###

VuePress + vuepress-theme-reco

### VuePress简介 ###

[VuePress文档地址][VuePress]

*  简洁至上：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
 *  Vue 驱动：享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
 *  高性能：VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。

##### 一、上手搭建 #####

1.创建并进入一个新目录

mkdir vuepress-starter && cd vuepress-starter

2.使用你喜欢的包管理器进行初始化

yarn init # npm init

3.将 VuePress 安装为本地依赖

yarn add -D vuepress # npm install -D vuepress

> 官方不推荐全局安装 VuePress

4.创建你的第一篇文档

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

5.在 package.json 中添加一些 scripts

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

6.在本地启动服务器

yarn docs:dev # npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

##### 二、目录结构 #####

.
    ├── 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

### vuepress-theme-reco简介 ###

[vuepress-theme-reco文档地址][vuepress-theme-reco]

> 此主题几乎继承 VuePress 默认主题的一切功能。

*  过去：开发一款看着开心、写着顺手的 vuepress 博客主题。
 *  当下：帮助更多的朋友节省时间去用心书写内容，而不是仅仅配置一个博客去孤芳自赏。
 *  未来：吸引更多的朋友参与到开发中来，继续强大功能。

##### 一、安装和引用 #####

1.安装

npm install vuepress-theme-reco --save-dev
    
    # or
    
    yarn add vuepress-theme-reco

2.引用

// .vuepress/config.js
    
    module.exports = { 
      theme: 'reco'
    }

##### 二、写文章时添加分类、标签、日期、作者 #####

---
    title: 此处是标题 # 文章标题
    date: 2021-03-10 10:00:00 # 时间
    sidebar: 'auto' # 侧边栏
    categories: # 分类
     - java
    tags: # 标签
     - vue
    author: 默存 # 作者
    ---

### 部署Gitee&GitHub ###

##### 一、部署 #####

> 这里使用Gitee作为列子，毕竟国内的速度快。。。

1.创建仓库（typ1805）

> 使用 typ1805.gitee.io 访问首页，不带二级目录的 pages，需要建立一个与自己个性地址同名的仓库。

2.提交代码至创建的仓库（typ1805  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center]  
3.部署Gitee Pages![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center 1]

##### 二、浏览访问 #####

[ https://typ1805.gitee.io][https_typ1805.gitee.io]

##### 三、更新问题 #####

Gitee Pages 个人版不支持提交自动更新，需要手动更新

[VuePress]: https://vuepress.vuejs.org/zh/guide/getting-started.html
[vuepress-theme-reco]: https://vuepress-theme-reco.recoluan.com/views/1.x
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/e442a00939f74b9d8889572a4cf77136.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3R5cDE4MDU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221023/a51934c57d5c41a794c08aed0d8a4247.png
[https_typ1805.gitee.io]: https://typ1805.gitee.io