前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于VuePress和github用搭建无服务器的博客、文档系统

基于VuePress和github用搭建无服务器的博客、文档系统

原创
作者头像
星哥玩云
发布2022-05-27 17:02:17
3580
发布2022-05-27 17:02:17
举报
文章被收录于专栏:开源部署开源部署

基于VuePress和github用搭建无服务器的博客、文档系统

最近想做一个项目介绍自己的一些项目和日常的文档,让文档有个属于自己的家,https://{你的域名} 使用gitbook之后,又看到了vuepress,感觉还是挺好用的。

既可以当做博客系统、文档系统,项目介绍的系统,还有丰富的插件使用。

要用到的域名: http://{github pages的域名} (github pages)的域名。

什么是VuePress

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

简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown 文档,并且可以将其发布到github pages中

vuepress官网:https://vuepress.vuejs.org/zh/

一、安装nodejs和yarn

笔者是windows11系统,打开官网:http://nodejs.cn/download/ 我这里下载的是 node-v16.14.0-x64.msi,跟安装普通的软件一样。

安装之后。

代码语言:txt
复制
Administrator@star-win11 MINGW64 /e/360data/重要数据/桌面
$ node -v
v16.14.0
安装yarn
$ npm i yarn -g

二、新建github仓库

进入github创建仓库,你也可以fork我的仓库。

image-20220514141458810
image-20220514141458810

三、克隆项目

地址改成自己的

代码语言:txt
复制
# git clone git@github.com:funet8/{github pages的域名}.git
或者
# git clone https://github.com/funet8/{github pages的域名}.git
# 进入项目
cd {github pages的域名}

# yarn init # npm init

# yarn add -D vuepress # npm install -D vuepress
弹出如下信息:
yarn add v1.22.17
info No lockfile found.
[1/4] Resolving packages...
warning @vuepress/theme-blog > @vuepress/plugin-pwa > workbox-build > @hapi/joi@15.1.1: Switch to 'npm install joi'
...
└─ zepto@1.2.0
Done in 113.09s.

四、在本地启动服务器

代码语言:txt
复制
# yarn docs:dev # npm run docs:dev
当出现以下可以在浏览器中访问本机IP+端口访问
> VuePress dev server listening at http://localhost:8099/

五、浏览器访问

访问: http://localhost:8080/

根据IP(替换本机IP):http://192.168.1.XXX:8080/

image-20220514153324030
image-20220514153324030

关于图片

VuePress 遵循 “约定优于配置” 的原则,按照官网设置目录结构

在md中加入静态图片的问题,在md文件中可以使用下面的方式应用静态图片,下面imgs文件夹在public文件件下 目录如下

代码语言:txt
复制
文件地址: docs/.vuepress/public/images/logo.png

md文档中:
![image](/images/logo.png)

六、项目上线到github pages

参考文章: https://{你的域名}/doc/gitbook/Github-Page-my-domain.html

在项目中新建文件 CNAME

代码语言:txt
复制
echo '{github pages的域名}'> CNAME

github中,setting--->pages

image-20220514161351877
image-20220514161351877

域名解析

{github pages的域名}域名CNAME解析到 funet8.github.io

image-20220514161550026
image-20220514161550026

访问: http://{github pages的域名}

关于自动打包更新

打包脚本,每次项目文档更新之后运行脚本即可

代码语言:txt
复制
cat deploy.sh
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

#提交到github参考
git init
git add -A
git commit -m 'deploy'

git push -f git@github.com:funet8/{github pages的域名}.git master


# 生成静态文件
yarn docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

git init
git remote add origin git@github.com:funet8/{github pages的域名}.git
git add .
git commit -m "脚本自动提交"
git branch -M master
git push --force --quiet "git@github.com:funet8/{github pages的域名}.git" master:gh-pages
cd -

关于主题和插件

修改配置文件:

代码语言:txt
复制
 docs\.vuepress\config.js
 添加主题:
 theme: 'vuepress-theme-note',

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基于VuePress和github用搭建无服务器的博客、文档系统
  • 什么是VuePress
    • 一、安装nodejs和yarn
      • 二、新建github仓库
        • 三、克隆项目
          • 四、在本地启动服务器
            • 五、浏览器访问
              • 关于图片
            • 六、项目上线到github pages
              • 域名解析
          • 关于自动打包更新
          • 关于主题和插件
          相关产品与服务
          云服务器
          云服务器(Cloud Virtual Machine,CVM)提供安全可靠的弹性计算服务。 您可以实时扩展或缩减计算资源,适应变化的业务需求,并只需按实际使用的资源计费。使用 CVM 可以极大降低您的软硬件采购成本,简化 IT 运维工作。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档