实战:一款唯美的个人主页-home2.0-2024.6.4(测试成功)

2024-06-05 06:28

本文主要是介绍实战:一款唯美的个人主页-home2.0-2024.6.4(测试成功),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

image-20240604060532928

目录

文章目录

    • 目录
    • 实验软件
    • 前提条件
    • 效果
    • 说明
    • 1、背景
    • 2、配置
      • 1、克隆代码库
      • 2、配置并构建镜像
      • 3、部署测试
        • 方案1:从docker容器拷贝生成的静态文件放到网站/目录
        • 方案2:启动容器,nginx里配置反向代理(推荐)
      • 4、访问
    • 3、总结
    • 引用
    • 关于我
    • 最后
    • 最后

实验软件

image-20240604211719232

链接:https://pan.baidu.com/s/1zN-TL1U3wqL_bOjzWhHPig?pwd=whnu
提取码:whnu
2024.6.4-推荐一款唯美的个人主页-home2.0

前提条件

  • 具备docker环境环境
  • 拥有一台云服务器;
  • 具有自己的域名;(可选)

如何搭建docker和docker-compose,见如下链接:

《实战:centos在线安装docker-2022.8.4(成功测试)》 https://onedayxyy.cn/docusaurus/docs/centos-docker-online-install/

效果

🍀 个人主页:

https://onedayxyy.cn

image-20240604060532928

🍀 知识库:

https://onedayxyy.cn/docusaurus/

image-20240602215648594

🍀 博客:

http://47.100.215.163:8090/

image-20240602215637124

image-20240602215720712

说明

我附件里放的是自己已经构建好的docker镜像,你直接起容器的话,那么个人主页就只是我的主页哦。

docker run -p 12445:12445 -d --name=diy-index-home --restart=always onlyonexl/home2.0:v3.0

如果你要配置为自己的网站信息,请按如下步骤配置为自己的网站信息。

image-20240604201226003

1、背景

本实战的目的是部署一个属于自己的个人主页,将个人主页、博客、知识库等可以分离,体验很nice。

2、配置

1、克隆代码库

来到我的gitee仓库,拉取代码:

git clone https://gitee.com/onlyonexl/home2.0.git

image-20240604201226003

2、配置并构建镜像

代码库拉取后,配置自己网站相关信息,然后利用Dockerfile构建镜像。

(1)配置自己网站相关信息

配置网站链接:

src/assets/siteLinks.json 中可以自定义网站链接(以指向自己的网站):

{"icon": "Blog","name": "博客","link": "https://blog.imsyy.top/"
},

其中 icon 网站链接的图标可以在 src/components/Links/index.vue 中添加:

// 可前往 https://www.xicons.org 自行挑选并在此处引入
// 此处引入的是 fa 类型
import {Link,Blog,CompactDisc,Cloud,Compass,Book,Fire,LaptopCode,
} from "@vicons/fa";...// 网站链接图标
const siteIcon = {Blog,Cloud,CompactDisc,Compass,Book,Fire,LaptopCode,
};

配置社交链接:

src/assets/socialLinks.json 中可以自定义社交链接。

image-20240602230457823

(2)利用Dockerfile构建镜像

cd home2.0/
docker build -t home2.0:v3.0 .

image-20240604213317690

构建成功后,可以看到如下镜像:

image-20240604213404678

3、部署测试

以上自己的个人主页服务源码部署已经完成了。

注意:这里有2种方法来部署个人主页服务。

个人更推荐docker方式。

方案1:从docker容器拷贝生成的静态文件放到网站/目录

来到自己云服务器:

[root@docusaurus-wiki ~]#mkdir -p  diy-index
[root@docusaurus-wiki ~]#docker cp -a  diy-index-home:/app/dist diy-index/
[root@docusaurus-wiki ~]#ls diy-index/dist/
assets  images      index.html.gz         registerSW.js  sw.js.gz             workbox-faaa562d.js.gz
font    index.html  manifest.webmanifest  sw.js.bak      workbox-faaa562d.js[root@docusaurus-wiki ~]#docker stop diy-index-home
diy-index-home

配置nginx:

#vim /etc/nginx/nginc.conf

image-20240604220207883

重启nginx:

nginx -s reload

测试:(完美)

image-20240604220305833

方案2:启动容器,nginx里配置反向代理(推荐)

(1)利用docker启动容器

docker run -p 12445:12445 -d --name=diy-index-home --restart=always onlyonexl/home2.0:v3.0

(2)配置自己Nginx

配置nginx的反向代理,让用户通过访问你的域名即可访问到我们刚搭建的个人主页:

#vim /etc/nginx/nginc.conf# diy-indexlocation /  {proxy_pass http://47.100.215.163:12445;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}#重新加载nginx
nginx -s reload        

image-20240604213658452

测试:(完美)

image-20240604220348625

4、访问

访问自己域名,即可体验效果:

https://onedayxyy.cn

image-20240604060532928

3、总结

以上就是关于如何部署自己的个人主页,更详细的知识请见如下链接:

《推荐一款唯美的个人主页-home2.0》 https://onedayxyy.cn/docusaurus/docs/diy-index-home

image-20240604212736611

引用

https://github.com/imsyy/home home项目原作者仓库

image-20240602175013161

关于我

我的博客主旨:

  • 排版美观,语言精炼;
  • 文档即手册,步骤明细,拒绝埋坑,提供源码;
  • 本人实战文档都是亲测成功的,各位小伙伴在实际操作过程中如有什么疑问,可随时联系本人帮您解决问题,让我们一起进步!

🍀 微信二维码

x2675263825 (舍得), qq:2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 个人主页:

https://onedayxyy.cn

image-20240604060532928

🍀 知识库:

https://onedayxyy.cn/docusaurus/

image-20240602215648594

🍀 博客:

http://47.100.215.163:8090/

image-20240602215637124

image-20240602215720712

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

554?spm=1010.2135.3001.5421](https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421)

[外链图片转存中…(img-Z7U3BaxN-1717511552608)]

🍀 知乎

https://www.zhihu.com/people/foryouone

[外链图片转存中…(img-PhOaXSHg-1717511552608)]

最后

好了,关于本次就到这里了,感谢大家阅读,最后祝大家生活快乐,每天都过的有意义哦,我们下期见!

这篇关于实战:一款唯美的个人主页-home2.0-2024.6.4(测试成功)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1032311

相关文章

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

MySQL中的索引结构和分类实战案例详解

《MySQL中的索引结构和分类实战案例详解》本文详解MySQL索引结构与分类,涵盖B树、B+树、哈希及全文索引,分析其原理与优劣势,并结合实战案例探讨创建、管理及优化技巧,助力提升查询性能,感兴趣的朋... 目录一、索引概述1.1 索引的定义与作用1.2 索引的基本原理二、索引结构详解2.1 B树索引2.2

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么?能干嘛?核心作用:二、索引的 4 种主要类型(附通俗例子)1. BTree 索引(

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

使用Python进行GRPC和Dubbo协议的高级测试

《使用Python进行GRPC和Dubbo协议的高级测试》GRPC(GoogleRemoteProcedureCall)是一种高性能、开源的远程过程调用(RPC)框架,Dubbo是一种高性能的分布式服... 目录01 GRPC测试安装gRPC编写.proto文件实现服务02 Dubbo测试1. 安装Dubb

Redis 配置文件使用建议redis.conf 从入门到实战

《Redis配置文件使用建议redis.conf从入门到实战》Redis配置方式包括配置文件、命令行参数、运行时CONFIG命令,支持动态修改参数及持久化,常用项涉及端口、绑定、内存策略等,版本8... 目录一、Redis.conf 是什么?二、命令行方式传参(适用于测试)三、运行时动态修改配置(不重启服务