搭建自己的博客-拾壹博客

写在前面

唠叨两句

作为一个技术开发人员,没有一个自己的博客,人生注定缺少点什么东西,是不是?最近研究了一些博客搭建,本文是使用开源项目”拾壹博客“进行搭建。

推荐等级

所需技术难度:4星
后续自定义程度:5星
美观度:4星
使用技术:VUE+JAVA
优点:丰富的后台管理功能以及独立的文档管理
缺点:需要一定的技术功底

所需工具

内容备注
数据库存储数据使用,本文用的是MySQL,如果用其他数据库,需要修改代码进行适配
一台能部署的服务器,有外网ip那种本文使用的是Centos7,最低1核2G即可,碰到各大服务器商打折的时候,不到一百就能买一年
Redis缓存使用

本文使用内容

内容备注
MySQL阿里云RDS服务
Centos7阿里云云服务
Oss文件存储七牛(也可以用阿里云OSS)
Redis做缓存使用
Nginx部署前端用的

开始搭建

gitee地址:https://gitee.com/quequnlong/shiyi-blog
官方演示地址:https://www.shiyit.com/

前端: vue + vuex + vue-router + axios + vuetify + element + echarts
后端: SpringBoot + nginx + docker + sa-token + Swagger2 + MyBatisPlus + Mysql + Redis + elasticsearch
其他: 接入QQ、微博、码云第三方登录,接入七牛云对象存储

安装包准备

(如不想那么麻烦,可以直接联系我,我给你准备启动运行的包,然后直接进行配置)

通过码云,使用git下载源码(我这里使用的idea)

image-20240303000247841

下载完之后,就对前后端进行编译。

(1)后端编译需要已经搭建JAVA环境(JDK8即可),并下载好maven的使用包,并配置好对应的环境。使用maven命令,对blog文件夹进行编译:

mvn -DskipTests=true clean package

image-20240303100514312

(2)前端编译需要已经搭建Node环境,使用node命令,编译blog-web和blog-admin,分别进入到blog-web和blog-admin文件,执行如下命令:

# 先安装对应的组件
npm install
# 对服务进行编译
npm run build

image-20240303102510210

参数配置

后端

进入到shiyi-blog/blog/common/src/main/resources的文件夹,编辑application.yml,需要修改的内容如下,此处只留下必改内容,其余内容暂时省略(此处在打出jar包之后,再修改也可以)

server:
  # (可选)端口号
  port: 8800
  servlet:
    # (可选)应用的访问路径
    context-path: /shiyi
spring:
  ......
  datasource:
    # (必改)数据库地址
    url: jdbc:mysql://数据库地址:3306/myblog?characterEncoding=UTF-8&useUnicode=true&useSSL=false&serverTimezone=Asia/Shanghai&tinyInt1isBit=false&allowPublicKeyRetrieval=true
    driver-class-name: com.mysql.cj.jdbc.Driver
    # (必改)数据库账号
    username: 账号
    # (必改)数据库密码
    password: 密码
    ......
  redis:
    # (必改)缓存地址
    host: 缓存地址
    port: 6379
    timeout: 3000
    # (必改)缓存密码
    password: 缓存密码
		......

前端

进入到blog-web文件夹,需要编辑.env.development及.env.production文件,具体编辑如下

# 环境名称,不需要修改
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://127.0.0.1:8800/shiyi'

# 图片地址
VUE_APP_IMG_API = 'https://七牛的地址/'

VUE_APP_ADMIN_API = 'http://127.0.0.1/admin'

VUE_APP_WEBSOCKET_API =  "ws://127.0.0.1:8801/websocket"

VUE_APP_URL = 'http://127.0.0.1/'

另外,因为源码在我们手里,页面内容就可以自己编辑了。比如改一下页面的字体,内容啥的,删一删里面的模块。比如博客首页中,我就把轮播图右侧的广告栏,改成了我的另一个博客的推荐位置。

展示

Blog客户端

博客首页

image-20240320145250414

文章详情

image-20240320145459995

后台管理系统

首页

image-20240320133104002

文章管理

image-20240320133204039

当然,后台管理还有很多优秀的功能,功能丰富,供我们自行使用

--------END--------

天行健,君子以自强不息;地势坤,君子以厚德载物

欢迎关注

blog:http://myblog.doubletree.fun
公众号:Doubletree的杂七杂八
csdn:https://blog.csdn.net/qq_27808011

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GPU云服务器与自建GPU服务器的对比

GPU云服务器是一种基于GPU的计算服务,广泛应用于深度学习、图形图像处理和科学计算等领域。其快速、稳定、灵活的特点使其备受青睐。与标准的CVM云服务器一样,GPU云服务器提供方便快捷的管理方式,通过其强大的计算性能,能够快速处…

直播行业网络安全建设

一、引言 直播行业近年来蓬勃发展,吸引了大量用户和资本的关注。然而,随着行业的壮大,网络安全问题也日益凸显。构建一个安全、稳定的直播行业网络对于保障用户权益、维护行业秩序具有重要意义。本文将详细探讨直播行业安全网络的构建与保障…

zookeeper分布式锁原理剖析

在ZooKeeper的CLI中,create命令用于在指定路径上创建一个新的节点。以下是create命令的参数解释: -s:顺序节点标志。如果指定了该选项,则创建的节点将是顺序节点。顺序节点的名称将以“path”后跟一个连字符和递增的数字序列结尾…

基于python+vue食品安全信息管理系统flask-django-nodejs-php

食品安全信息管理系统设计的目的是为用户提供食品信息、科普专栏、食品检测、检测结果、交流论坛等方面的平台。 与PC端应用程序相比,食品安全信息管理系统的设计主要面向于用户,旨在为管理员和用户提供一个食品安全信息管理系统。用户可以通过APP及时查…

在面对一个大型的代码,需要分文件编写的时候,应该怎么办呢;以及在编写出一个功能时,有人想要买这个功能,怎么在不给出源代码的情况下让买家可以使用这个代码功能呢?

我们一点点来,首先,假设我们要写一个加法功能的实现, 这里是在单个文件里调用函数,实现一个加法的功能, 下面我们把自定义函数放在下面,上面对自定义函数进行一个声明, 下面我们把代码放到多个…

httprunner4详解

httpruuner官方文档:https://httprunner.com/docs/introduction/overview/ 案例1:使用电商开源项目演示: 项目地址:https://github.com/macrozheng/mall 案例2:使用erp2项目演示: 开源项目:http://erp2.hzb-it.com/ 1.Httprunner环境搭建 HttpRunner v4.0 同时采用…

大数据--hdfs--java编程

环境: virtualbox ubantu1604 Linux idea社区版2023 jdk1.8 hadoop相关依赖 使用java操作 1. 判断/user/stu/input/test.txt文件是否存在,存在则读出文件内容,打印在控制台上。反之,输出“文件不存在”。 package abc;impo…

【JS进阶】第二天

JavaScript 进阶 - 第2天 了解面向对象编程的基础概念及构造函数的作用,体会 JavaScript 一切皆对象的语言特征,掌握常见的对象属性和方法的使用。 了解面向对象编程中的一般概念能够基于构造函数创建对象理解 JavaScript 中一切皆对象的语言特征理解引用…

字节跳动面试被拷打:高效处理大量数据的JavaScript技巧

一、文章内容 时间分片宏任务微任务前置内容实现时间分片 二、时间切片 什么是时间切片?通过字面意思我们不难理解时间切片就是将时间分成多个片段进行一一渲染数据,时间切片是个抽象的问题,我们可能会想到JavaScript中window自带的setTimeout的延迟函数或者是 w…

(附源码)基于Spring Boot和Vue的前后端分离考研资料分享平台的设计与实现

前言 💗博主介绍:✌专注于Java、小程序技术领域和毕业项目实战✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 2024年Java精品实战案例《100套》 🍅文末获取源码联系🍅 &#x1f31…

操作符详解(C语言)—第三期

逻辑操作符 逻辑操作符有哪些&#xff1a; && 逻辑与 || 逻辑或区分逻辑与和按位与 区分逻辑或和按位或 1&2----->0 1&&2---->1 1|2----->3 1||2---->1逻辑与和或的特点&#xff1a; 360笔试题 #include <stdio.h&…

乐企数字化电子发票(基础版)开票能力测试报告

能力简介&#xff1a;纳税人销售货物或提供服务时&#xff0c;可以通过本能力开具数电票。 纳税人可将本能力中的各类规则和接口嵌入本单位信息化系统中&#xff08;如&#xff1a;销售、 收款、结算等&#xff09;&#xff0c;实现数电票开具流程和商业行为的融合&#xff0c;…

20240317-2-推荐算法FTRL

FTRL FTRL(Follow the Regularized Leader) 由Google的H. Berendan McMahan 等人于2010年提出【4】,FTRL是一种在线最优化求解算法,结合L1-FOBOS和L1-RDA算法,用于解决在线学习中,权重参数不能产生较好的稀疏性的问题。 由于在线学习涉及内容较多&#xff0c;本文从提升模型稀疏…

吴恩达深度学习笔记:浅层神经网络(Shallow neural networks)3.1-3.5

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第三周&#xff1a;浅层神经网络(Shallow neural networks)3.1 神经网络概述&#xff08;Neural Network Overview&#xff09; 第一门课&#xff1a;神经网络和深度学习 (Neural Networks an…

【数据结构与算法】算法复杂度

一、什么是复杂度&#xff1f; 程序执行时需要的计算量和内存空间&#xff0c;其中计算量是指时间复杂度&#xff0c;计算量大则需要时间久&#xff1b;内存空间是指空间复杂度和代码是否简洁无关&#xff0c;而是指计算机的cpu和内存计算复杂程度。 复杂度是数量级&#xff0…

Day43:WEB攻防-PHP应用SQL注入符号拼接请求方法HTTP头JSON编码类

目录 PHP-MYSQL-数据请求类型 PHP-MYSQL-数据请求方法 PHP-MYSQL-数据请求格式 知识点&#xff1a; 1、PHP-MYSQL-SQL注入-数据请求类型 2、PHP-MYSQL-SQL注入-数据请求方法 3、PHP-MYSQL-SQL注入-数据请求格式 PHP-MYSQL-数据请求类型 SQL语句由于在黑盒中是无法预知写法的…

Java代码基础算法练习-求给定范围内所有数之和-2024.03.22

任务描述&#xff1a; 输入两个整数n和 m(0<n<m<20)&#xff0c;求此范围内所有数据之和。(包括n和m) 任务要求&#xff1a; 代码示例&#xff1a; package march0317_0331;import java.util.Scanner;/*** 计算两个整数之间&#xff08;包括这两个整数&#xff09;所…

设计数据库之内部模式:SQL基本操作

Chapter4&#xff1a;设计数据库之内部模式&#xff1a;SQL基本操作 笔记来源&#xff1a; 1.《漫画数据库》—科学出版社 2.SQL | DDL, DQL, DML, DCL and TCL Commands 设计数据库的步骤&#xff1a; 概念模式 概念模式(conceptual schema)是指将现实世界模型化的阶段进而&…

Harbor高可用(nginx和keepalived)

Harbor高可用&#xff08;nginx和keepalived&#xff09; 文章目录 Harbor高可用&#xff08;nginx和keepalived&#xff09;1.Harbor高可用集群部署架构1.1 主机初始化1.1.1 设置网卡名和ip地址1.1.2 设置主机名1.1.3 配置镜像源1.1.4 关闭防火墙1.1.5 禁用SELinux1.1.6 设置时…

postman下载汉化以及使用

【2023全网最牛教程】10分钟快速上手Postman&#xff08;建议收藏&#xff09;_macbook postman打开慢-CSDN博客 Postman 汉化教程&#xff08;小白&#xff09;配置的具体操作_postman怎么设置中文-CSDN博客 上面是两篇参考的博客 postman是一款支持http协议的接口调试与测试…
最新文章