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

写在前面

唠叨两句

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

推荐等级

所需技术难度: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: 8800servlet:# (可选)应用的访问路径context-path: /shiyi
spring:......datasource:# (必改)数据库地址url: jdbc:mysql://数据库地址:3306/myblog?characterEncoding=UTF-8&useUnicode=true&useSSL=false&serverTimezone=Asia/Shanghai&tinyInt1isBit=false&allowPublicKeyRetrieval=truedriver-class-name: com.mysql.cj.jdbc.Driver# (必改)数据库账号username: 账号# (必改)数据库密码password: 密码......redis:# (必改)缓存地址host: 缓存地址port: 6379timeout: 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.mzph.cn/news/763795.shtml

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

相关文章

全栈的自我修养 ———— uniapp中加密方法

直接按部就班一步一步来 一、首先创建一个js文件填入AES二、创建加密解密方法三、测试 一、首先创建一个js文件填入AES 直接复制以下内容 /* CryptoJS v3.1.2 code.google.com/p/crypto-js (c) 2009-2013 by Jeff Mott. All rights reserved. code.google.com/p/crypto-js/wi…

Matlab快捷键与函数

注释:注释对于代码的重要性我们就不做过多的解释了。不做注释的代码不是好代码。选中要注释的语句,按快捷键CtrlR,或者在命令行窗口上面的注释地方可以进行注释。当然也可以直接在语句前面“%”就可以(注意:一定要用英文符号&…

移动硬盘故障解析:解决无法访问且位置不可用问题

在我们日常的工作和生活中,移动硬盘已成为存储和传输数据的重要工具。然而,有时我们会遇到移动硬盘无法访问且位置不可用的情况,这无疑给数据的存储和访问带来了极大的困扰。本文将深入探讨这一问题,分析其原因,并给出…

如何做时间管理?

前言 本篇是最近学习工作提效系列课程的第一篇,如何做时间管理?关于时间管理的内容老生常谈了,我自己之前也分享过针对时间管理的一些思考,比如 近期对「时间管理」的一些思考, 还有高效能人士的七个习惯的分享【读书…

计算地球圆盘负荷产生的位移

1.研究背景 计算受表面载荷影响的弹性体变形问题有着悠久的历史,涉及到许多著名的数学家和物理学家(Boussinesq 1885;Lamb 1901;Love 1911,1929;Shida 1912;Terazawa 1916;Munk &…

Springboot笔记-02

1.使用Spring Initializer快速创建Spring Boot项目 IDE都支持使用Spring的项目创建向导快速创建一个Spring Boot项目; 选择我们需要的模块; 向导会联网创建Spring Boot项目; 默认生成的Spring Boot项目; 主程序已经生成好了&#…

Linux:http协议初步认识

文章目录 OSI七层模型http协议域名路径信息请求和响应 编写一个httpserver OSI七层模型 在结束了前面对于序列化反序列化等内容的学习后,重新回到对于OSI模型的部分 如上所示的是对于OSI接口的示意图,在这当中可以看到会话层的概念,会话层的…

QPainter绘图和QChart图表和QCustomplot绘曲线图

一,QPainter绘图 Qt里的所有绘图,比如一个按钮和一个Label的显示,都有绘图系统来执行。绘图系统基于 QPainter、QPaintDevice和QPainEngine类。QPainter是可以直接用来操作绘图的类,而 QPaintDevice和QPainEngine都比QPainter更底…

FinalShell下载安装 + FinallShell远程连接Linux 教程

图形化,命令行 : windows下的图形化和命令行 : Linux下的图形化和命令行 : 在Linux下,普遍使用命令行操作 ; FinalShell 下载安装: 下载安装地址 : 这里给出windows的下载地址 : install 双击打开就好 : 然后点击下一步 : 选择下载地址&…

vue学习日记14:工程化开发脚手架Vue CLI

一、概念 二、安装 1.全局安装&查看版本 注意启动cmd输入命令 要以管理员运行哦 安装了一次就行以后不用再创建了 yarn global addvue/cli vue --version 显示了版本号即可 2.创建项目架子 创建项目的路径在哪 项目就在哪 项目名字不能用中文 vue create project-n…

搜索测试题题解(3月19号总结)

目录 1.Dungeon Master 2.Oil Deposits 3.Find a way 1.Dungeon Master Sample InputcopyOutputcopy 3 4 5 S.... .###. .##.. ###.###### ##### ##.## ##...##### ##### #.### ####E1 3 3 S## #E# ###0 0 0Escaped in 11 minute(s). Trapped! 这道题与普通的bfs模板题就是…

线性顺序表算法库

list.cpp 具体函数实现 #include <stdio.h> #include "list.h" #include <malloc.h>/************************************************** ①函数名: CreateList 功 能: 用数组构建顺序表 参 数: ①SqList *&L:传入的线性表 ②ElemType a[]:使用…

Iterator对象功能学习

package config;import java.util.Iterator; import java.util.Properties; import java.util.Set;/*** 这个类演示了如何使用Properties类来存储和访问键值对。* Properties类继承自Hashtable&#xff0c;因此它可以用来存储键值对数据&#xff0c;且支持同步。*/ public clas…

代码随想录算法训练营第十七天|110、平衡二叉树

110. 平衡二叉树 已解答 简单 相关标签 相关企业 给定一个二叉树&#xff0c;判断它是否是 平衡二叉树 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,3,3,null,null,4,4] 输出&am…

计算机二级Python基础操作题

题目来源&#xff1a;计算机二级Python半个月抱佛脚大法&#xff08;内呈上真题版&#xff09; - 知乎 第4&#xff0c;5&#xff0c;6&#xff0c;7&#xff0c;9&#xff0c;10&#xff0c;11套 1. 基础题1 sinput() print("{:\"^30x}".format(eval(s))) b …

安科瑞ADL逆流检测多功能电表

ADL400 导轨式多功能电能表&#xff0c;是主要针对电力系统&#xff0c;工矿企业&#xff0c;公用设施的电能统计、管理需求而设计的一款智能仪表&#xff0c;产品具有精度高、体积小、安装方便等优点。集成常见电力参数测量及电能计量及考核管理&#xff0c;提供上48月的各类电…

2024年企业上云补贴,免费领取腾讯云优惠代金券

腾讯云代金券领取渠道有哪些&#xff1f;腾讯云官网可以领取、官方媒体账号可以领取代金券、完成任务可以领取代金券&#xff0c;大家也可以在腾讯云百科蹲守代金券&#xff0c;因为腾讯云代金券领取渠道比较分散&#xff0c;腾讯云百科txybk.com专注汇总优惠代金券领取页面&am…

springboot实现文件上传

SpringBoot默认静态资源访问方式 首先想到的就是可以通过SpringBoot通常访问静态资源的方式&#xff0c;当访问&#xff1a;项目根路径 / 静态文件名时&#xff0c;SpringBoot会依次去类路径下的四个静态资源目录下查找&#xff08;默认配置&#xff09;。 在资源文件resour…

3·15日,上海飞北京,东航全球首架C919亲测初体验

引言&#xff1a;“望闻问切”亲测 感受C919机型的航班 【阿明观察 &#xff5c; 科技热点关注】 赶巧了&#xff01;2024年3月15日消费者权益日这天&#xff0c;上海飞北京&#xff0c;我选择了采用C919的东方航空公司航班。 真赶巧了&#xff01;上了飞机后我才知道&…

Spring Boot项目中使用MyBatis连接达梦数据库6

在开发中&#xff0c;使用Spring Boot框架结合MyBatis来操作数据库是一种常见的做法。本篇博客将介绍如何在Spring Boot项目中配置MyBatis来连接达梦数据库6&#xff0c;并提供一个简单的示例供参考。(达梦六不仅分表还分模式.) 我拿SYSTEM表的LPS模式下面Student表做案例。 1.…