vuepress使用简介及个人博客搭建

news2024/11/24 13:25:52

目录

  • 一、介绍
  • 二、环境准备
  • 三、安装运行vuepress
  • 四、目录结构
  • 五、配置文件
  • 六、导航栏配置
  • 七、导航栏logo
  • 八、浏览器图标
  • 九、侧边栏配置
  • 十、添加 Git 仓库和编辑链接
  • 十一、部署到GitHub
  • 十二、搭建成功

一、介绍

VuePress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器，基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具，在简单配置好功能后，需要做的事情就剩下写好一个个 Markdown 文档，并且可以将其发布到github。

VuePress ,一个全新的基于 vue 实现的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。

VuePress 由两部分组成：一个以 Vue 驱动的主题系统简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

vuepress官网：https://vuepress.vuejs.org/zh/
在这里插入图片描述
我的博客：小宇博客
在这里插入图片描述

二、环境准备

1、安装NodeJs： NodeJs 安装教程

2、安装Git ：Git基础使用教程

3、注册GitHub账号：GitHub官网

三、安装运行vuepress

npm install -g vuepress # # 安装

接下来，创建一个新的 VuePress 项目：

# 创建一个目录
mkdir vuepress-starter
# 进入目录
cd vuepress-starter

初始化项目：生成一个package.json文件

npm init -y

在这里插入图片描述
安装本地依赖

npm install -D vuepress

修改package.json 中添加一些 scripts

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

在这里插入图片描述
在本地启动服务器 VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

npm run docs:dev

四、目录结构

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



docs/.vuepress: 用于存放全局的配置、组件、静态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。
docs/.vuepress/theme: 用于存放本地主题。
docs/.vuepress/styles: 用于存放样式相关的文件。
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。
docs/.vuepress/public: 静态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也可以是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端应用的增强。

五、配置文件

在项目根目录下创建一个 .vuepress 文件夹，并在其中创建一个 config.js 文件，这是 VuePress 的配置文件
在这里插入图片描述
编辑 .vuepress/config.js 文件，添加基本配置

module.exports={
    title: "小宇博客",     // 网站的标题
    description: "我的个人博客",    // 网站的描述
    
}

在docs目录下创建README.md 首页的配置

---
home: true
heroImage: /assets/img/logo.png
heroText: Hero 标题
tagline: Hero 副标题
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 简洁至上
 details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: Vue驱动
 details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 高性能
 details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---

六、导航栏配置

导航栏的配置在 docs/.vuepress/cpnfig.js 中配置

themeConfig: {

		nav: [
            { text: '首页', link: '/' },

            {
              text: '技术笔记',
              items: [
                { text: '前端', items:[
                  { text: 'HTML & CSS', link: '/guide/前端学习笔记/' },
                  { text: 'JavaScript', link: '/guide/japanese/' },
                  { text: 'Vue', link: '/guide/japanese/' },
                ]},

                { text: '后端', items:[
                  { text: '前端学习笔记', link: '/guide/前端学习笔记/' },
                  { text: 'Java学习笔记', link: '/guide/japanese/' }
                ]},
               
              ]
          },

            {
                text: '常见问题',
                items: [
                  { text: 'Chinese', link: '/language/chinese/' },
                  { text: 'Japanese', link: '/language/japanese/' }
                ]
            },
            {
                text: '面试常问',
                items: [
                  { text: 'Chinese', link: '/language/chinese/' },
                  { text: 'Japanese', link: '/language/japanese/' }
                ]
            },
            {
                text: '开源项目',
                items: [
                  { text: 'Chinese', link: '/language/chinese/' }
                  // { text: 'Japanese', link: '/language/japanese/' }
                ]
            },
            { text: '关于我', link: '/about/about.md' }

          ],
     }

在这里插入图片描述

七、导航栏logo

编辑 .vuepress/config.js 创建/public/assets/img/
在这里插入图片描述

module.exports = {
  themeConfig: {
    logo: '/assets/img/comet.png',
  }
}

在这里插入图片描述

八、浏览器图标

编辑 .vuepress/config.js

module.exports={
    head: [
      ['link', { rel: 'icon', href: '/assets/img/favicon.ico' }]
      ],
    }

九、侧边栏配置

我把侧边栏的内容放在了guide下了
在这里插入图片描述
导航栏的配置在 docs/.vuepress/cpnfig.js 中配置

   themeConfig: {

                
            sidebar: [
                       
                {
                  title: 'HTML基础学习',   // 必要的
                  // path: '/前端学习笔记/',      // 可选的, 标题的跳转链接，应为绝对路径且必须存在
                  collapsable: true, // 可选的, 默认值是 true,
                  sidebarDepth: 1,    // 可选的, 默认值是 1
                  children: [
                    {
                        title: 'HTML基础学习',
                        path: '/guide/前端学习笔记/01html基础.md'
                    },
                    {
                      title: 'bas',
                      path: '/guide/前端学习笔记/00html基础.md'
                    },
                    
                  ]
                },
                {
                  title: 'Group 2',
                  children: [
                    {
                        title: 'java',
                        path: '/java/01java.md'
                    }
                   ],
                //   initialOpenGroupIndex: -1 // 可选的, 默认值是 0
                }
              ]





      }

在这里插入图片描述
禁止侧边栏

---
lang: zh-CN
title: 页面的标题
date: 2077-10-01
description: 页面的描述，可省略
sidebar: false         #  sidebar: false   禁用侧边栏 auto 开启
---

在这里插入图片描述

十、添加 Git 仓库和编辑链接

git配置在 docs/.vuepress/cpnfig.js 中配置

 themeConfig: {
  // 你的 Git 项目地址，添加后会在导航栏的最后追加
 	repo: '地址',
 }

十一、部署到GitHub

项目/docs/.vuepress/config.js base必须配置正确
在这里插入图片描述
在vuepress项目的根目录下添加deploy.sh文件，该文件是用于执行发布的脚本文件。

#!/usr/bin/env sh

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

# 生成静态文件
npm run docs:build

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

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master


# 这里是填写你的github仓库地址，把git@github.com:xxx/xxx.git替换成你的仓库地址
git push -f git@github.com:fanchens/vuepress.git master:gh-pages

cd -

在这里插入图片描述
部署教程1

在项目根目录下打开终端(git bash、cmd等都可以)，执行sh deploy.sh命令

sh deploy.sh

部署教程2

npm run docs:build

dist是反编译后的文件 把这个文件的内容放到git就可以了

在这里插入图片描述

十二、搭建成功

演示
我的博客：小宇博客

在这里插入图片描述


在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1898456.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

10.09面试题目记录

10.09面试题目记录

艾融软件 - 线上面试题 排序算法的时间复杂度 O(n^2&#xff09;&#xff1a;冒泡&#xff0c;选择&#xff0c;插入 O(logn&#xff09;&#xff1a;折半插入排序 O(nlogn)&#xff1a;希尔&#xff0c;归并&#xff0c;快速&#xff0c;堆 O(nk)&#xff1a;桶&#xff0c;…
阅读更多...
12款超良心好用APP推荐，每一款都值得下载！

12款超良心好用APP推荐，每一款都值得下载！

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频https://aitools.jurilu.com/分享是奉献的果实&#xff0c;分享是快乐的前提。每天给小伙伴们分享自己认可的软件&#xff0c;也是莫大的幸福&#xff0c;今天获得12款好用的软…
阅读更多...
【qt】如何获取本机的IP地址?

【qt】如何获取本机的IP地址?

需要用到这个类QHostInfo和pro里面添加network模块 用这个类的静态函数forName()来获取该主机名的信息 返回的就是这个类 这个QHostInfo类就包括主机的IP地址信息 用静态函数addresses()来获取 返回的是一个QHostAddress的容器 QList<QHostAddress>addrList hostIn…
阅读更多...
基于React和TypeScript的开源白板项目（Github项目分享）

基于React和TypeScript的开源白板项目（Github项目分享）

在学习前端开发的过程中&#xff0c;有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch&#xff0c;这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应…
阅读更多...
知识图谱和 LLM：多跳问答

知识图谱和 LLM：多跳问答

检索增强生成&#xff08;RAG&#xff09;应用程序通过将外部来源的数据集成到 LLM 中&#xff0c;擅长回答简单的问题。但他们很难回答涉及将相关信息之间的点连接起来的多部分问题。这是因为 RAG 应用程序需要一个数据库&#xff0c;该数据库旨在存储数据&#xff0c;以便轻松…
阅读更多...
html+js+css在线倒计时

html+js+css在线倒计时

代码在图片后面 点赞加关注 谢谢大佬照顾&#x1f61c; 图例 时间到前 时间到后 源代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width,…
阅读更多...
Docker：三、安装nginx与tomcat

Docker：三、安装nginx与tomcat

&#x1f341;安装常见服务 &#x1f332;安装nginx &#x1f9ca;1、搜索镜像 Ⅰ.hub docker上查询&#xff1a;https://hub.docker.com/_/nginx Ⅱ. 命令查询&#xff1a;docker search nginx &#x1f9ca;2、下载镜像 命令&#xff1a;docker pull nginx &#x1f9c…
阅读更多...
google 邮件信息收集

google 邮件信息收集

主要介绍通过google和fofax对目标进行邮件信息收集 chrome插件 email-whatsapp-extractor link-klipper-extract-all bulk-url-opener-extension email-whatsapp-extractor 使用正则表达式&#xff0c;获取访问页面内所有的email邮箱和whatsapp号码&#xff0c;以表格的形式导…
阅读更多...
vulnhub--IMF

vulnhub--IMF

环境 攻击机&#xff1a;192.168.96.4 靶机&#xff1a;ip未知 主机探测 确定靶机ip为32的主机 端口扫描 访问80端口 外围打点 在contact.php页面源码中找到了flag1 之后没啥突破 但查看网络后发现contact.php页面请求的三个js文件的文件名很有特点&#xff0c;猜测是base64编码…
阅读更多...
奥比中光astra_pro相机使用记录

奥比中光astra_pro相机使用记录

一、信息获取 1、官网 用于了解产品信息 http://www.orbbec.com.cn/sys/37.html 2、开发者社区 咨询问题下载开发部https://developer.orbbec.com.cn/ 二 、windowvs19 1、相机型号 orbbec_astro_pro 根据对应的型号找到需要的包工具 踩坑1&#xff0c;因为这个相机型号…
阅读更多...
C++ UTF-8编解码

C++ UTF-8编解码

icu 编解码数据&#xff1a; extern const UConverterSharedData _MBCSData, _Latin1Data, _UTF8Data, _UTF16BEData, _UTF16LEData, _UTF32BEData, _UTF32LEData, _ISO2022Data, _LMBCSData1,_LMBCSData2, _LMBCSData3, _LMBCSData4, _LMBCSData5, _LMBCSDat…
阅读更多...
数字信号处理及MATLAB仿真（2）——离散系统

数字信号处理及MATLAB仿真（2）——离散系统

上回书说到如何来编写一些简单的离散时间序列&#xff0c;今天咱们就来谈谈一些关于常系数差分方程的操作吧。 说到这里咱们对于常系数差分方程可能最关心的就是怎么去求解了。 其中最关键的部分就是filter函数&#xff0c;可以用来计算系统在输入信号为x的输出信号y。大家学过…
阅读更多...
Hilbert编码 思路和scala 代码

Hilbert编码 思路和scala 代码

需求&#xff1a; 使用Hilbert 曲线对遥感影像瓦片数据进行编码&#xff0c;获取某个区域的编码值即可 Hilbert 曲线编码方式 思路 大致可以对四个方向的数据进行归类 左下左上右上右下 这个也对应着编码的顺序 思考在不同Hilbert深度&#xff08;阶&#xff09;情况下的…
阅读更多...
【重磅】万能模型-直接能换迪丽热巴的模型

【重磅】万能模型-直接能换迪丽热巴的模型

万能模型&#xff0c;顾名思义&#xff0c;不用重新训练src&#xff0c;直接可以用的模型&#xff0c;适应大部分原视频脸 模型用法和正常模型一样&#xff0c;但可以跳过训练阶段&#xff01;直接到合成阶段使用该模型 本模型没有做Xseg&#xff0c;对遮挡过多的画面不会自动适…
阅读更多...
掌握 Postman 脚本：入门指南

掌握 Postman 脚本：入门指南

在探索 API 测试自动化环墁下&#xff0c;Postman 脚本显现其强大功能和灵活性&#xff0c;它不仅仅是 API 测试的工具&#xff0c;更是一个综合性的自动化平台。 Postman 脚本简介 Postman 允许用户在 API 请求生命周期中运行 JavaScript 脚本&#xff0c;这些脚本分为以下三…
阅读更多...
FineBI在线学习资源-数据处理

FineBI在线学习资源-数据处理

FineBI在线学习资源汇总&#xff1a; 学习资源 视频课程 帮助文档 问答 数据处理学习文档&#xff1a; 相关资料&#xff1a; 故事背景概述-https://help.fanruan.com/finebi6.0/doc-view-1789.html 基础表处理-https://help.fanruan.com/finebi6.0/doc-view-1791.html …
阅读更多...
联合概率密度函数

联合概率密度函数

目录 1. 什么是概率密度由联合概率密度求概率参考链接 1. 什么是概率密度 概率密度到底在表达什么&#xff1f; 外卖在20-40分钟内送达的概率 随机变量落在[20,40]之间的概率。下图中&#xff0c;对总面积做规范化处理&#xff0c;令总面积1&#xff0c; f ( x ) f(x) f(x)则成…
阅读更多...
使用中国大陆镜像源安装最新版的 docker Deamon

使用中国大陆镜像源安装最新版的 docker Deamon

在一个智算项目交付过程中&#xff0c;出现了新建集群中的全部 docker server V19 进程消失、仅剩 docker server 的 unix-socket 存活的现象。 为了验证是否是BD产品研发提供的产品deploy语句缺陷&#xff0c;需要在本地环境上部署一个简单的 docker Deamon 环境。尴尬的是&a…
阅读更多...
SD16S1Y 符合GB2312标准16X16点阵汉字库芯片IC

SD16S1Y 符合GB2312标准16X16点阵汉字库芯片IC

一般概述 SD16S1Y是一款内含16x16点阵的汉字库芯片&#xff0c;支持GB2312国标简体汉字(含有国家信标委 合法授权)、ASCII字符。排列格式为竖置横排。用户通过字符内码&#xff0c;利用本手册提供的方法计算出 该字符点阵在芯片中的地址&#xff0c;可从该地址连续读出字…
阅读更多...
【JavaWeb程序设计】JSP编程

【JavaWeb程序设计】JSP编程

目录 一、编写JSP页面&#xff0c;在界面上显示1-9&#xff0c;9个链接&#xff0c;单击每个链接&#xff0c;能够在另一个页面打印该数字的平方。 1. 运行截图 2. 第一个jsp页面&#xff08;index.jsp&#xff09; 3. 第二个jsp页面&#xff08;square.jsp&#xff09; 二…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023