当前位置: 首页 > news >正文

分享一下,如何搭建个人网站的步骤

        在这段充满探索与创造的奇妙旅途中,我就像一位耐心的建筑师,在数字世界的荒原上精心雕琢,两周的时光缓缓流淌。每天,我与代码共舞,手执HTML、CSS与JavaScript这三大构建魔杖,一砖一瓦地筑起了梦想中的网络城堡。从零到一,我的网站如幼苗破土,渐渐枝繁叶茂,每一行代码都是浇灌其成长的甘露。终于,一个满载心血与创意的小世界在网络上悄然绽放,静待着访客的探索与赞美。✨🌐

     我近期花了近两周的时间,搭建了一个网站。以java+vue3为例,以下是主要内容:

  1. 域名申请+云服务器+ICP备案

域名、服务器和备案,这三个你可以选择如阿里云、腾讯云、华为云其中一家,根据你的兴趣爱好来选择。我就是选择国内比较知名的阿里云(重要的是服务好,只要你不懂的,你提一下工单,很快就能得到解决,very good!)

首先是要申请域名,然后再申请一台云主机,接着开始ICP备案。然后在域名管理列表那点击“解析”,把域名指向这台主机IP。

这里要注意的是,如果没有进行ICP备案,网站是无法访问的。这个过程大概一到两周左右的时间。

这里注意下,为了安全,还要申请下SSL证书,阿里云有提供个人免费测试的证书。不过有限期比较短。你跟着步骤操作就行,证书下来后,记得要选择nginx下载证书。

另外一个要注意的点是,要在主机管理内,安全组,开放443和80端口,要不然后面做好的网站无法访问哦。

我这边做的一个是分享平台,后端是java,前端是vue3.如果自己不会开发,也是可以购买一套程序的。以java+vue3为例,前后端分离。

2、程序代码准备

2.1 后端 Java采用的是springboot+mybaitplus。

部署还得安装一堆环境很麻烦,现在都是用docker,可移植性好。我这边后端用到的中间件都是直接使用镜像拉取的。如mysql、fastdfs、redis。比如有人在阿里云社区分享的镜像。如果有其他镜像,都可以在这上面进行搜索,并拉取安装。很方便的,如下图

我这边java程序也是用docker进行部署的。记得docker部署时,端口映射要保持一致,这样好管理,也不会忘记的。

如我这边启动docker时的例子:docker run -d -p8081:8081 --name score score:010202

由于会经常操作docker,我这边列一些常用的操作命令。

进入docker里面,docker exec -it 24b2fa6d27bc bash  (24b2fa6d27bc 是容器id)

重启docker restart xxx

查看容器,docker ps

经常发布太多版本,要勤快点,删除镜像,释放空间docker rmi 24b2fa6d27bc

2.2 前端采用的是vue3

    程序开发完成后,接下来要打包前端,在打包之前,要记得,有时候发布后,会访问空白页面,那原因可能是路径不正确。

module.exports = defineConfig({
  productionSourceMap: false,//隐藏源代码
  assetsDir: 'static',
  outputDir: 'dist/'+process.env.VUE_APP_FILE,  //这个是打包后的生成目录
  transpileDependencies: true,
  publicPath: process.env.VUE_APP_PUBLIC_PATH, //打包后,生成的js按相对路径来访问
})

env是环境参数配置,我这边是通过不同的env环境,配置开发环境,测试环境和生产环境。

publicPath这个参数很重要,要在生产环境中配置https://xxx.com/。前端比较简单,这里不详述。

3、nginx配置

关于前端部署后,你要准备一下nginx,安装nginx后,你可以编写一下server配置

这一段是http的80端口强制跳转到https的443端口。

server{
    listen 80;
    server_name xxx.com;
    return 301 https://$host$request_uri;
}

以下这个是443端口访问的前端路径,root就是前端html存放的地址。为了安全,前端访问后端,采用代理的方式,一能解决跨域的问题,二能解决安全的问题。

server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  gpt114.com;
    location / {
       root         /home/html/;
       index        index.html index.htm;
    }
    location  /api/ {
        proxy_pass http://xxx.com:8081/api/;  //8081是后端的端口。
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

    ssl_certificate  /home/gptfile/xxx.com.pem;
   ssl_certificate_key /home/gptfile/xxx.com.key;

#以上这两行,是存放证书的位置

}

配置完毕后,可以运行nginx -t来检查配置是否正确,如果返回successful.说明ok了,你直接进入sbin中的nginx进行启动就可以。

这样你就可以通过https://xxx.com来访问网站了。

相关文章:

分享一下,如何搭建个人网站的步骤

在这段充满探索与创造的奇妙旅途中,我就像一位耐心的建筑师,在数字世界的荒原上精心雕琢,两周的时光缓缓流淌。每天,我与代码共舞,手执HTML、CSS与JavaScript这三大构建魔杖,一砖一瓦地筑起了梦想中的网络城…...

(7)摄像机和云台

文章目录 前言 1 云台 2 带有MAVLink接口的摄像机 3 相机控制和地理标签 4 视频质量差的常见修复方法 5 详细主题 前言 Copter、Plane 和 Rover 最多支持 3 轴云台,包括自动瞄准感兴趣区域(ROI)的相机和自动触发相机快门等先进功能。按…...

MicroBlaze IP核中的外设接口和缓冲器接口介绍

MicroBlaze IP核是Xilinx公司提供的一个嵌入式软核处理器,广泛应用于FPGA设计中。在MicroBlaze IP核中,外设接口和缓冲器接口是处理器与外部设备和内存交互的关键部分。 1 外设接口 MicroBlaze处理器中的AXI4 内存映射外设接口AXI4是一种在Xilinx FPGA设…...

Java数据结构与算法(完全背包)

前言: 完全背包问题是背包问题的一个变种,与0/1背包问题不同,在完全背包问题中,每种物品可以被选取多次。问题描述如下: 给定 n 件物品,每件物品有一个重量 wi和一个价值 vi,以及一个背包,它能…...

git merge(3个模式) 与 git rebase 图文详解区别

目录 1 git merge1.1 模式一:fast-forward(–ff)1.2 模式二:non-Fast-forward(–no-ff)1.3 模式三:fast-forward only(–ff-only) 2 git rebase3 区别 1 git merge git merge有好几种不同的模式 默认情况下你直接使用 git merge 命令&#x…...

Eclipse 工作空间:深入解析与高效使用

Eclipse 工作空间:深入解析与高效使用 Eclipse 是一款广受欢迎的集成开发环境(IDE),它为各种编程语言提供了强大的开发工具。在 Eclipse 中,工作空间(Workspace)是一个核心概念,它代表了一个项目的集合,这些项目共享相同的配置和设置。本文将深入探讨 Eclipse 工作空…...

Aspose将doc,ppt转成pdf

1.需要引入的jar包 链接: https://pan.baidu.com/s/1t3wqq7KrHi50K9KX3-Eb9A?pwdu4se 提取码: u4se <dependency><groupId>com.aspose</groupId><artifactId>aspose-words-jdk16</artifactId><version>15.8.0</version><scop…...

Flutter第十四弹 抽屉菜单效果

目标&#xff1a; 1.怎么构建抽屉菜单效果&#xff1f; 2.抽屉菜单怎么定制&#xff1f; 一、抽屉菜单 侧滑抽屉菜单效果 1.1 抽屉菜单入口 Flutter 的脚手架Scaffold&#xff0c;默认提供了抽屉菜单效果入口。 主页面采用一个简单的页面&#xff0c;侧滑菜单首先使用一个I…...

Docker Nginx

Docker官网 https://www.docker.com/https://www.docker.com/ 删除原先安装的Docker sudo yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ …...

OpenVINO™ 2024.2 发布--推出LLM专属API !服务持续增强,提升AI生成新境界

点击蓝字 关注我们,让开发变得更有趣 作者 | 武卓 博士 排版 | 李擎 Hello&#xff0c; OpenVINO™ 2024.2 对我们来说&#xff0c;这是非常忙碌的几周&#xff0c;因为我们正在努力根据您的反馈改进我们的产品特性&#xff0c;并扩展生态系统以涵盖其它场景和用例。 让我们看看…...

【Mybatis-Plus】根据自定义注解实现自动加解密

背景 我们把数据存到数据库的时候&#xff0c;有些敏感字段是需要加密的&#xff0c;从数据库查出来再进行解密。如果存在多张表或者多个地方需要对部分字段进行加解密操作&#xff0c;每个地方都手写一次加解密的动作&#xff0c;显然不是最好的选择。如果我们使用的是Mybati…...

Window上ubuntu子系统编译Android

Window上ubuntu子系统编译Android 1、编译环境2、WSL2编译报错2.1 You are building on a machine with 11.6GB of RAM2.2 Case-insensitive filesystems not supported3. android模拟器调试 1、编译环境 AOSP : Android源码下载安装java&#xff1a;sudo apt-get install ope…...

【Java学习笔记】异常处理

生活中我们在使用一些产品的时候&#xff0c;经常会碰到一些异常情况。例如&#xff0c;使用ATM机取钱的时&#xff0c;机器会突然出现故障导致无法完成正常的取钱业务&#xff0c;甚至吞卡&#xff1b;在乘坐地铁时&#xff0c;地铁出现异常无法按时启动和运行&#xff1b;使用…...

Ubuntu20.04环境下Baxter机器人开发环境搭建

Ubuntu20.04环境下Baxter机器人开发环境搭建 ubuntu20.04安装 略 安装ROS 略 Baxter机器人依赖安装 主目录创建工作空间&#xff0c;按以下步骤执行 mkdir -p ~/baxter_ws/src source /opt/ros/noetic/setup.bash cd ~/baxter_ws catkin_make catkin_make install s…...

nccl 03 记 回顾:从下载,编译到调试 nccl-test

1&#xff0c; 下载与编译 1.1 源码下载 $ git clone https://github.com/NVIDIA/nccl.git 1.2 编译 1.2.1 一般编译&#xff1a; $ make -j src.build 1.2.2 特定架构gpu 编译 $ make -j src.build NVCC_GENCODE"-gencodearchcompute_80,codesm_80" A10…...

关于车规级功率器件热可靠性测试的分享

随着中国电动汽车市场的稳步快速发展和各大车企布局新能源的扩散&#xff0c;推动了车规级功率器件的快速增长。新能源汽车行业和消费电子都会用到半导体芯片&#xff0c;但车规级芯片对外部环境要求很高&#xff0c;涉及到的一致性和可靠性均要大于工业级产品要求&#xff0c;…...

内核学习——1、list_head

双向循环链表&#xff1a;list_head 头节点head是不使用的&#xff1a; struct list_head { struct list_head *next, *prev; }; 结构体中没有数据域&#xff0c;所以一般把list_head嵌入到其他结构中使用 struct file_node { char c; struct list_head node; }; 此时&#xff…...

JavaEE初阶--网络基本概念

目录 一、引言 二、网络基本概念 2.1 局域网LAN 2.2 广域网WAN 三、网络通信的基础 3.1 IP地址 3.2 端口号 3.3 协议 3.4 五元组 3.5 协议分层 3.6 OSI七层模型 3.7 TCP/IP五层模型 四、总结 一、引言 本篇博客将进入网络编程以及网络原理的学习&#xff0c;但网…...

gitlab-cicd-k8s

k8s已经准备好 kubectl get node 创建cicdYaml文件 kubectl create namespace gitlab-cicd --dry-runclient --outputyaml >> gitlab-cicd.yaml kubectl apply -f gitlab-cicd.yaml 服务器和仓库在一起可用专有地址 使用 GitLab Runner 可以自动执行 GitLab CI/CD 管道…...

盘点下常见 HDFS JournalNode 异常的问题原因和修复方法

盘点下常见 HDFS JournalNode 异常的问题原因和修复方法 最近在多个客户现场以及公司内部环境&#xff0c;都遇到了因为 JournalNode 异常导致 HDFS 服务不可用的问题&#xff0c;在此总结下相关知识。 1 HDFS HA 高可用和 JournalNode 概述 HDFS namenode 有 SPOF 单点故障…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...