vitepress+gitee pages搭建自己的博客网站

news2024/11/24 1:10:57

概述

“不写博客的GISer不是一个好程序员”。所以,好多程序员会保留着写博客的习惯,一方面记录自己的学习成果或者解决某个问题的方法,一方面能够帮助到他人,再一方面也能够督促自己多学点东西……这是一个一举N得的事情。上为其一。其二,微信公众号的slogon是”再小的个体,也有自己的品牌”。在这个全民”自媒体”时代,我们也能够通过博客建立自己的品牌,提升自己在圈内的影响力。因此,打造自己博客是一件很有必要的事情。

目前有很多的博客网站,比如CSDN,博客园,简书等,但为什么还要搭建自己的博客网站呢?一方面,通过自己搭建博客网站是一个学习的过程,另一方面,将自己的博客进行统一管理,也可作为自己的一个作品,增加你的影响力或者求职时的通过率。

上面说了很多关于写博客和搭建自己博客的原因,那究竟如何搭建呢?本文就带你通过vitepressgitee pages搭建一个属于自己的博客网站。

操作

1、搭建vitepress工程

1. 先在gitee上创建一个工程

image.png

2. 创建完成后公开仓库

gitee先在改了规则,新创建工程的时候只能创建为私有化仓库,创建完之后再通过管理修改仓库基本信息将仓库公开后才能使用gitee pages。不过gitee pages是需要上传个人信息认证的,认证过之后就不需要再认证了。

image.png

1.PNG

3. 现在代码,初始化工程,添加依赖

# 下载代码
git clone https://gitee.com/lzugis15/lzugis-blogs.git
# 进入目录
cd lzugis-blogs
# 初始化工程
npm init -y
# 添加依赖
npm i vitepress sass -D

4. 添加运行脚本

修改package.json并添加运行脚本

{
  "name": "lzugis-blogs",
  "version": "1.0.0",
  "description": "gn",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vitepress": "^1.0.0-alpha.32"
  },
  "devDependencies": {
    "sass": "^1.57.0"
  },
  "scripts": {
    "dev": "vitepress dev docs",
    "build": "vitepress build docs",
    "serve": "vitepress serve docs"
  },
  "directories": {
    "doc": "docs"
  }
}

5. 创建docs/index.md文件

在工程目录下创建docs目录,并添加index.md文件。此时已完成vitepress工程的初始化。

2. 创建博客

1. 编写博客首页

博客首页为docs/index.md,修改其文件内容为:

---
layout: home
hero:
  name: 跟牛老师
  text: 一起学WebGIS
  tagline: WebGIS开发从入门到进阶,这里都有
  image:
    src: image.png
    alt: image
  actions:
    - theme: brand
      text: 进入学习
      link: /blogs/
features:
- icon: 基础
  title: WebGIS基础
  details: GIS基础、WEB基础、相关操作以及WebGIS框架...

- icon: 实战
  title: WebGIS项目实战
  details: 台风路径展示完整案例,需求分析、编码实现...

- icon: 进阶
  title: 掌握更多的WebGIS技能
  details: WebGIS原理、SDK开发、geotools、postgis...
---

2. 添加博客内容

docs目录下创建blogs目录,并添加如下文件
image.png

3. 添加配置文件

docs目录下创建.vitepress目录下创建config.js文件
image.png
文件内容如下:

module.exports = {
    title: '跟牛老师一起学WebGIS',
    description: 'WebGIS开发从入门到进阶,这里都有',
    lang: 'zh-CN',
    // github pages 配置
    base: '/lzugis-blogs/',
    head: [
        // 添加图标
        ['link', { rel: 'icon', href: '/logo.png' }]
    ],
    themeConfig: {
        // 网站 logo
        logo: '/logo.png',
        // 网站标题
        siteTitle: '跟牛老师一起学WebGIS',
        // 启动页面丝滑滚动
        smoothScroll: true,
        // 社交账户链接
        socialLinks: [
            {
                icon: {
                    svg: '<svg t="1671270414569" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2135" width="64" height="64"><path d="M512 0c282.784 0 512 229.216 512 512s-229.216 512-512 512S0 794.784 0 512 229.216 0 512 0z m189.952 752l11.2-108.224c-31.904 9.536-100.928 16.128-147.712 16.128-134.464 0-205.728-47.296-195.328-146.304 11.584-110.688 113.152-145.696 232.64-145.696 54.784 0 122.432 8.8 151.296 18.336L768 272.704C724.544 262.24 678.272 256 599.584 256c-203.2 0-388.704 94.88-406.4 263.488C178.336 660.96 303.584 768 535.616 768c80.672 0 138.464-6.432 166.336-16z" fill="#CE000D" p-id="2136"></path></svg>'
                },
                link: 'https://blog.csdn.net/GISShiXiSheng'
            }
        ],
        // 导航栏配置
        nav: [
            {
                text: '我的博客',
                link: '/blogs/'
            },
            {
                text: '友情链接',
                items: [
                    { text: 'CSDN', link: 'https://blog.csdn.net/GISShiXiSheng' }
                ]
            }
        ],

        // 左侧边栏配置
        sidebar: {
            '/blogs/': [
                {
                    text: '博客目录',
                    collapsible: true,
                    items: [
                        {text: '概述', link: '/blogs/'},
                        {text: 'WebGIS基础', link: '/blogs/basic'},
                        {text: '项目实战', link: '/blogs/project'},
                        {text: '高级进阶', link: '/blogs/more'},
                    ]
                }
            ],
        },

        // 右侧边栏标题
        outline: 'deep',
        outlineTitle: '章节导航',

        // 上下篇文本提示文字
        docFooter: {
            prev: '←上一篇',
            next: '下一篇→'
        },

        // 上次更新时间提示文字
        lastUpdatedText: '上次更新时间',

        // 编辑链接
        // editLink: {
        //     text: '我的博客',
        //     pattern: 'https://www.csdn.net/'
        // },

        // 页面底部
        footer: {
            message: '',
            copyright: 'Copyright © 2022 LZUGIS'
        }
    }
}

4. 添加vue组件

docs目录下创建components目录,vue组件可放在此目录。
image.png

5. 添加静态资源

docs目录下创建public目录,所有的静态资源都放在该目录下面。此时一个比较完整的vitepress博客工程搭建完成,完整的目录文件结构如下图:
image.png
文章对应的工程可从https://gitee.com/lzugis15/lzugis-blogs获取。运行后效果图如下:

首页

博客
在这里插入图片描述

3. gitee pages发布

1. 打包工程

运行命令npm run build打包,打包后的文件位于docs/.vitepress/dist。上传代码和打包资源到gitee`。

2. 发布博客

点击”服务->Gitee Pages”
2.PNG
选择要发布的分支,并输入部署目录docs/.vitepress/dist,点击”启动”按钮开启。
3.PNG
更新完成后可以看到访问地址,点击网站地址访问,大功告成。
image.png

本文的示例访问地址:https://lzugis15.gitee.io/lzugis-blogs

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

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

相关文章

【C语言进阶】怎么可能不会?十分钟带你玩转枚举与联合

目录 &#x1f34a;前言&#x1f34a;&#xff1a; &#x1f95d;一、枚举&#x1f95d;&#xff1a; 1.枚举类型的定义&#xff1a; 2.枚举类型的优点&#xff1a; 3.枚举类型的使用&#xff1a; &#x1f353;二、联合&#xff08;共用体&#xff09;&#x1f353;&#x…

【实验报告NO.000002】MIT 6.858 Computer System Security - Lab 3

0x03.Lab 3: Symbolic execution 本 lab 将教大家使用 符号执行 &#xff08;symbolic execution&#xff09; 这一强大的技术来寻找软件中的漏洞&#xff0c;在 lab 的最后我们将建立一个可以在 zoobar web 应用中寻找触发多种漏洞的符号执行系统&#xff08;准确的说是一个混…

基于主从博弈的电热综合能源系统动态定价与能量管理附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …

你真的了解缓存吗?(2)

在上一篇文章你真的了解缓存吗?(1)中&#xff0c;我介绍了引入缓存的利与弊&#xff0c;以及在选择一款缓存中间件时应该注意什么。在这一篇文章中&#xff0c;我们继续介绍在不同的业务场景下&#xff0c;如何进行缓存的选择&#xff0c;具体来说就是缓存的分类&#xff0c;和…

嵌入式分享合集123

一、简易大功率变压器电路图 本文介绍的电子变压器克服了传统硅钢片变压器体积、重量大、效率低、价格高的缺点&#xff0c;电路成熟&#xff0c;性能稳定。 本电子变压器工作原理与开关电源相似&#xff0c;电路原理图见图1&#xff0c;由VD1-VD4将市电整流为直流&#xff0c…

书店管理系统(基于MySQL存储)

&#x1f388; 作者&#xff1a;Linux猿 &#x1f388; 简介&#xff1a;CSDN博客专家&#x1f3c6;&#xff0c;华为云享专家&#x1f3c6;&#xff0c;Linux、C/C、云计算、物联网、面试、刷题、算法尽管咨询我&#xff0c;关注我&#xff0c;有问题私聊&#xff01; &…

对标测评YD云电脑和天翼云电脑公众版

最近听说YD也推出了自研云电脑产品&#xff0c;抱着吃瓜心态网上充值体验了一把YD云电脑&#xff0c;正好我手上有天翼云电脑&#xff0c;凑一对测试看看两家央企在云计算领域的技术实力究竟如何。 测试环境搭建在我的个人pc上&#xff0c;分别下载YD云和天翼云电脑最新Windows…

[思维模式-3]:《如何系统思考》-3- 认识篇 - 什么是系统?系统的特征?

目录 第1章 什么是系统 1.1 万事万物都是一个有机的系统 1.2 系统的科学定义 1.3 系统的构成 1.4 系统的分类 第2章 动态复杂系统的八大特征 2.1 目的性 2.8 边界 2.3 结构影响行为 2.4 总体大于部分之和 2.5 因果互动 2.6 反馈 2.7 动态稳定性&#xff08;动态自…

SAP ABAP 小工具 获取两个日期时间秒数和输出时间转换文本

SAP ABAP 小工具 获取两个日期时间秒数和输出时间转换文本 引言&#xff1a; 小工具 获取两个日期时间秒数和输出时间转换文本&#xff0c;用于加强用户交互直观性。 关键字&#xff1a;SAP ABAP 日期时间间隔 秒数 转换时间文本 文章目录SAP ABAP 小工具 获取两个日期时间秒…

[附源码]Python计算机毕业设计Django吾悦商城管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

计算机毕业设计springboot+vue基本微信小程序的小区防疫监管系统

项目介绍 编写工具用idea 、Maven包,后端数据库是mysql,Java语言,springboot框架。其间,在健康打卡位置和物资选购要调用接口才可实现其功能。 1、研究对象&#xff1a;小区居民普通用户和小区管理员 管理员权限&#xff1a;管理员是整个系统的操作者,系统的各个模块都能进行信…

python中pandas进行数据分析与可视化(3)

1.创建数据源 在前几篇博客中&#xff0c;都是手动创建少量数据充当数据源&#xff0c;这次通过随机生成&#xff0c;让数据量多一些 # 导入所有需要的库 import pandas as pd import numpy.random as np import openpyxl import xlrd import matplotlib.pyplot as plt#创建一…

Python基础 - 本地模块的绝对导入/引用

目录 1. 项目入口文件 2. 绝对导入 Python本地模块的引入是比较简单的&#xff0c;包括绝对引用和相对引用(相对引用的博客参考下一篇Python基础 - 本地模块的相对导入/引用)&#xff0c;个人比较推荐使用绝对引用&#xff0c;会避免掉很多错误&#xff0c;本篇文章主要介绍绝…

【Javassist】快速入门系列01 使用Javassist实现Hello World

系列文章目录 01 使用Javassist实现Hello World 文章目录系列文章目录前言引入Javassist jar包使用Javassist实现Hello World总结说明前言 本篇文章为Javassist入门系列文章&#xff0c;适合了解Java基础语法的人零基础学会使用Javassist实现一个Hello World程序。 引入Javas…

国企招聘: 中国雄安集团2023校园招聘,面向全国,不限户籍

中国雄安集团有限公司2023年校园招聘公告 中国雄安集团有限公司&#xff08;以下简称“中国雄安集团”&#xff09;成立于2017年7月18日&#xff0c;是雄安新区开发建设的主要载体和运作平台。结合雄安新区建设需要&#xff0c;中国雄安集团布局金融与投资、城市发展与城市资源…

高低电平报警器-(模电、数电电子课程设计,毕业设计)Multisim仿真图

目录1 背景与意义1.1 研究背景1.2 研究内容1.3 技术指标2 电路设计2.1 各单元电路设计2.1.1 步进电源电路设计2.1.2 比较电路设计2.1.3 报警电路设计2.2 总体电路设计3 Multisim电路仿真与调试3.1仿真过程3.1.1 步进电源仿真调试3.1.2 总体电路仿真与调试3.2仿真结果分析4 总结…

Java项目:SSM婚纱影楼摄影商城项目网站

作者主页&#xff1a;源码空间站2022 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目分为前后台&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录…

R语言学习笔记——高级篇:第十四章-主成分分析和因子分析

R语言 R语言学习笔记——高级篇&#xff1a;第十四章-主成分分析和因子分析 文章目录R语言前言一、R中的主成分和因子分析二、主成分分析2.1、判断主成分的个数2.2、提取主成分2.3、主成分旋转2.4、获取主成分得分三、探索性因子分析3.1、判断需提取的公共因子数3.2、提取公共…

uboot启动流程

目录 1. 从汇编到C语言 1. 从汇编到C语言 uboot整个程序的入口是 ./arch/arm/lib/vectors.S 的 start 其中&#xff0c;reset 来自于 ./arch/arm/cpu/armv7/start.S&#xff0c; ./arch/arm/cpu/armv7/start.S 程序的执行路径为 reset --> save_boot_params_ret --> cp…

【C语言数据结构(基础版)】第四站:栈和队列

目录 一.栈的表示和实现 1.栈的概念及结构 2.栈的实现 二、栈的实现 1.栈的声明和定义 2.栈的初始化 3.栈的销毁 4.入栈 5.出栈 6.返回栈顶元素 7.返回栈的元素个数 8.栈是否为空 9.测试 三、栈的完整代码 四、队列的表示和实现 1.队列的概念和结构 2.队列的实现…