实战:一款唯美的个人主页-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

相关文章

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.

MySQL 多列 IN 查询之语法、性能与实战技巧(最新整理)

《MySQL多列IN查询之语法、性能与实战技巧(最新整理)》本文详解MySQL多列IN查询,对比传统OR写法,强调其简洁高效,适合批量匹配复合键,通过联合索引、分批次优化提升性能,兼容多种数据库... 目录一、基础语法:多列 IN 的两种写法1. 直接值列表2. 子查询二、对比传统 OR 的写法三、性能分析

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

从原理到实战深入理解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. 完整代码实