Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >GitLab Pages/Vuepress生成项目文档和博客

GitLab Pages/Vuepress生成项目文档和博客

作者头像
神葳
发布于 2021-01-22 08:04:46
发布于 2021-01-22 08:04:46
2.4K00
代码可运行
举报
文章被收录于专栏:神葳总局神葳总局
运行总次数:0
代码可运行

最近在给公司架构一个新的项目,要求同时写出一个完整的文档,由于正好在浏览vue的GitHub浏览相关项目时,看到了 Vuepress,所以尝试了一把,所以把开发中的积累写下来。

# GitLab Pages 原理

首先了解一下GitLab Pages运行的原理。与GitHub不同的是,GitLab需要上传一个 .gitlab-ci.yml 的文件,同时生成的项目文件必须要到 /public 目录中,见详情

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
## .gitlab-ci.yml

image: node:9.11.1

pages:
 cache:
   paths:
   - node_modules/

 script:
 - npm install
 - npm run docs:build
 artifacts:
   paths:
   - public
 only:
 - master

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

复制

# Vuepress

你可以将vuepress安装到全局,也可以将其安装到项目中,我建议选择第二种,后面介绍一下原因

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 创建并进入工程

mkdir project-name
cd project-name

1 2 3 4

复制

创建package.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "devDependencies": {
    "vuepress": "^0.14.2"
  }
}

1 2 3 4 5 6 7 8 9

复制

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 安装依赖
yarn install # 或 npm install

# 创建并进入docs目录
mkdir docs
cd docs

# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 启动项目
yarn docs:dev # 或 npm run docs:dev

# 编译项目至 '/project-name/public' 中
yarn docs:dev # 或 npm run docs:dev

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

复制

# 遇到的坑

其实到这里只是简单的启动了一个vuepress项目,但是你还应该花点时间去仔细阅读一下官网的主题配置,去配置你自己的各种导航,并注意下的页面的设置(主要是主页)。

  • valine 的引用必须放到mounted中,否则无法编译,报错,window is undefined

# 修改主题

另外vuepress适合撸项目文档,至于你要用它来写博客,它并没有分类、标签这样的配置,需要你去修改主题,有两种方式:

  1. 将主题文件放到 project-name/docs/.vuepress/theme 中,然后创建一个 Layout.vue 文件:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.
└─ .vuepress
   └─ theme
      └─ Layout.vue

1 2 3 4

复制

这儿和开发一个正常的 Vue 应用程序是一样的。完全取决于你如何组织你的主题。

  1. 从依赖中引用主题,要使用 npm 依赖项的主题,请在 .vuepress/config.js 中提供一个 theme 选项:
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  theme: 'reco'
}

1 2 3

复制

郑重推荐 vuepress-theme-reco ,查看 展示 既没有脱离默认主题的简洁,又增加了分类、分页、标签等功能。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
# 安装
yarn add vuepress-theme-reco # npm install vuepress-theme-reco

1 2

复制

# 持续更新中。。。

作者个人博客:午后南杂

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-7-21 2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHub Pages中
VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。VuePress 诞生的初衷是为了支持 Vue.js 及其子项目的文档需求,但是现在它已经在帮助大量用户构建他们的文档、博客和其他静态网站。官网:
星哥玩云
2025/06/29
710
使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHub Pages中
VuePress搭建博客
VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。
默存
2022/06/24
5200
VuePress搭建博客
VuePress +Gitee 快速搭建个人博客
其实很简单就是拿来主义。首先你要知道有哪些工具可以搭建博客;然后你可通过搜索引擎搜索官方文档,动动手指就可以本地运行起来。但是运行起来的只是个 demo ,你的要求肯定不仅限于此。
不安分的猿人
2020/03/02
2.2K0
VuePress-theme-hope2 搭建个人网站,保姆级教程,包含自动部署、评论、搜索等功能
VuePress 是一个以 Markdown 为中心的静态网站生成器。好处是可以使用 Markdown 来书写内容文档或者博客。
萌萌哒草头将军
2025/02/19
2960
VuePress-theme-hope2 搭建个人网站,保姆级教程,包含自动部署、评论、搜索等功能
基于VuePress和github用搭建无服务器的博客、文档系统
最近想做一个项目介绍自己的一些项目和日常的文档,让文档有个属于自己的家,https://{你的域名} 使用gitbook之后,又看到了vuepress,感觉还是挺好用的。
星哥玩云
2022/05/27
4810
基于VuePress和github用搭建无服务器的博客、文档系统
使用VuePress 搭建个人博客
VuePress 是一个静态网站生成器,包含由Vue驱动的主题系统和插件API,同时还包含一个为书写技术文档而优化的默认主题。此篇文章只介绍如何使用VuePress 搭建个人博客的部分。
goodspeed
2020/12/22
1.1K0
使用Vuepress和Nginx搭建个人博客
每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。
ranky
2022/01/24
1.3K0
基于VuePress和github用搭建无服务器的博客、文档系统
最近想做一个项目介绍自己的一些项目和日常的文档,让文档有个属于自己的家,https://g.xgss.net 使用gitbook之后,又看到了vuepress,感觉还是挺好用的。
星哥玩云
2022/08/19
4930
基于VuePress和github用搭建无服务器的博客、文档系统
在GitLab pages上快速搭建Jekyll博客
前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages也不错,百度也会正常抓取,于是动手倒腾,将github pages快速迁移Jekyll博客到gitlab pages,中途遇到了不少坑,管他呢,一把刷。
Enjoy233
2020/09/07
1.4K0
在GitLab pages上快速搭建Jekyll博客
Gitee+VuePress搭建个人博客
首先说一下环境要求,既然是Gitee部署的话,Gitee的账号我们得有哈,Node环境咱也得有哈,最好是能有yarn的。这里就不过多的介绍Node和安装啦,比较简单。Git的基本操作咱也得会哈。
麋鹿大哥
2020/08/19
1.1K0
基于VuePress快速搭建一套项目知识管理工具
GitHub地址:https://github.com/chenshuaikang/ShareDoc
迟恩
2020/12/29
2.4K0
gitlab-CI 持续集成以及runner的配置简版
在我们完成项目开发后,提交到git,当监听提交后,自动进行编译,并进行项目的部署,是不是一想就很爽,所以下面引入我们的主角 —— gitlab-CI,中文文档 。
神葳
2021/01/22
2.3K0
gitlab-CI 持续集成以及runner的配置简版
团队技术文档构建利器vuepress上手实践
最近在尝试一些项目技术文档搭建的工具,看到网上很多人推荐 gitbook,使用后总体感觉良好。无意中发现一款 Vue 驱动的静态站点生成工具 vuepress,看到官网和demo后立即被它的简约灵活所吸引。一个 vuepress 网站是一个由 Vue、Vue Router 和 Webpack 驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。
CS逍遥剑仙
2019/10/12
2.6K0
vuePress
VuePress 由两部分组成:第一部分是一个极简静态网站生成器(opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
leader755
2022/03/09
6160
vuePress
【GitLab CI/CD】:Cache vs artifacts
回顾一下:【GitLab CI/CD】:一些有用的基础知识,在默认Git strategy(fetch)下,每个 Job 执行之前,都会进行 git clean 操作,也就是说 job 执行过程中产生的中间结果,都会被清理,多数情况是没问题的。但总有一些例外情况,我们需要之前 job 执行过程中产生的中间结果,最具代表性的两类:
WEBJ2EE
2021/01/04
2.8K0
【GitLab CI/CD】:Cache vs artifacts
第一个博客搭建之Vuepress
感谢 vuepress-theme-reco主题与一篇博客使用文章使用 vuepress 构建个人博客
愧怍
2022/12/27
8860
第一个博客搭建之Vuepress
Markdown 拓展-使用 vue.press 生成网站
VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。
acc8226
2022/05/17
1.6K0
借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站
因为自己平时经常写博客,也有博客网站,所以 Leader 叫我做一个 CMS 的帮助中心的技术选型,CMS 的帮助中心的功能:是通过文章来教用户如何使用我们的项目。
夜尽天明
2019/12/19
2.1K0
借助 VuePress 和 GitBook ,10 分钟即可免费部署你的静态博客网站
VuePress
第一个坑:我的项目就是依赖webpack 3.6.0同时也是用npm安装依赖,然后继续使用npm安装vuepress,然后执行npx vuepress dev docs的时候报错了,上网查了好久也没有解决问题,最后使用yarn安装vuepress成功了。
庞小明
2019/05/25
1.3K0
使用mkdocs及docs-material自动编译生成静态页面并自动提交GitLab Pages
MkDocs 是一个快速、简单、快捷可用的静态网站生成工具,文档使用 Markdown 书写,并仅需一个 YAML 配置文件。静态页面生成工具有 Docsify, VurPress, GitBook, hexo, Hugo 等等。本人使用过 Hexo和 Docsify,直到我发现了 MkDocs 以及它的绝配主题 mkdocs-material ,Mkdocs 的目录下仅需一个配置文件,然后就是完全的 MakeDown 文件即可,没有其他多余的配置,深得我心。今天就来讲讲如何为它配置一下 GitLabPipline 实现自动生成并提交到 GitLabPages。
宋天伦
2020/07/16
2.6K0
相关推荐
使用VuePress2.X构建个人知识博客,并且用个人域名部署到GitHub Pages中
更多 >
交个朋友
加入HAI高性能应用服务器交流群
探索HAI应用新境界 共享实践心得
加入腾讯云技术交流站
洞悉AI新动向 Get大咖技术交流群
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验