VuePress搭建博客部署Gitee Pages

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

使用技术

VuePress + vuepress-theme-reco

VuePress简介

VuePress文档地址

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

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

  1. mkdir vuepress-starter && cd vuepress-starter

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

  1. yarn init # npm init

3.将 VuePress 安装为本地依赖

  1. yarn add -D vuepress # npm install -D vuepress

官方不推荐全局安装 VuePress

4.创建你的第一篇文档

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

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

  1. { 
  2.   "scripts": { 
  3.     "docs:dev": "vuepress dev docs",
  4.     "docs:build": "vuepress build docs"
  5.   }
  6. }

6.在本地启动服务器

  1. yarn docs:dev # npm run docs:dev

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

二、目录结构
  1. .
  2. ├── docs
  3. │   ├── .vuepress (可选的)
  4. │   │   ├── components (可选的)
  5. │   │   ├── theme (可选的)
  6. │   │   │   └── Layout.vue
  7. │   │   ├── public (可选的)
  8. │   │   ├── styles (可选的)
  9. │   │   │   ├── index.styl
  10. │   │   │   └── palette.styl
  11. │   │   ├── templates (可选的, 谨慎配置)
  12. │   │   │   ├── dev.html
  13. │   │   │   └── ssr.html
  14. │   │   ├── config.js (可选的)
  15. │   │   └── enhanceApp.js (可选的)
  16. │   │ 
  17. │   ├── README.md
  18. │   ├── guide
  19. │   │   └── README.md
  20. │   └── config.md
  21. │ 
  22. └── package.json

vuepress-theme-reco简介

vuepress-theme-reco文档地址

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

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

1.安装

  1. npm install vuepress-theme-reco --save-dev
  3. # or
  5. yarn add vuepress-theme-reco

2.引用

  1. // .vuepress/config.js
  3. module.exports = { 
  4.   theme: 'reco'
  5. }
二、写文章时添加分类、标签、日期、作者
  1. ---
  2. title: 此处是标题 # 文章标题
  3. date: 2021-03-10 10:00:00 # 时间
  4. sidebar: 'auto' # 侧边栏
  5. categories: # 分类
  6.  - java
  7. tags: # 标签
  8.  - vue
  9. author: 默存 # 作者
  10. ---

部署Gitee&GitHub

一、部署

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

1.创建仓库（typ1805）

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

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

二、浏览访问

https://typ1805.gitee.io

三、更新问题

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

发表评论

表情：
评论列表 （有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读