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

        在这段充满探索与创造的奇妙旅途中,我就像一位耐心的建筑师,在数字世界的荒原上精心雕琢,两周的时光缓缓流淌。每天,我与代码共舞,手执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来访问网站了。

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

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

相关文章

Rcmp: Reconstructing RDMA-Based Memory Disaggregation via CXL——论文阅读

TACO 2024 Paper CXL论文阅读笔记整理 背景 RDMA:RDMA是一系列协议,允许一台机器通过网络直接访问远程机器中的数据。RDMA协议通常固定在RDMA NIC(RNIC)上,具有高带宽(>10 GB/s)和微秒级延…

星戈瑞FITC-Cytochrome C:荧光标记细胞色素C的研究与应用

细胞色素C(Cytochrome C)是一种位于线粒体内膜上的蛋白质。为了深入地研究细胞色素C在细胞生物学和病理学中的功能,科学家们常常采用荧光标记技术对其进行追踪和观察。其中,异硫氰酸荧光素(FITC)作为一种常…

《Deep learning practice》learning notes

学习笔记: 【公开课】旷视x北大《深度学习实践》(28课时全) R Talk | 旷视科技目标检测概述:Beyond RetinaNet and Mask R-CNN 文章目录 Lecture 1: Introduction to Computer Vision and Deep Learning(孙剑&#x…

生信网络学院|06月21日《SolidWorks Costing助力制造企业建立成本核算体系》

课程主题:SolidWorks Costing助力制造企业建立成本核算体系 课程时间:2024年06月21日 14:00-14:30 主讲人:张丹清 生信科技 售前顾问 Costing成本分析简介钣金件成本分析加工件成本分析装配体成本分析总结&答疑 安装腾讯会议客户端或…

期货以旁观者心态关注市场,会更加理性

1.期货交易具备较高灵活度,相比于股票,期货盈利速度明显提升。针对普通投资者,适量参与中线投机更为合适。 2.选择期货品种需兼顾市场属性稳定与计划特点较弱两方面,以及波动剧烈、投机特征显著的品种。 3.若市场环境不利且缺乏机…

2024.1版 IDEA share project on github 报错

2024.1版 IDEA share project on github 报错 报错信息报错原因解决办法 报错信息 Cannot load information for github.com/Worldfickler:Request response: Access tothis site has been restricted. lf you believe this is an error, please contacthttps://support.githu…

利用Python爬取天气数据并实现数据可视化,一个完整的Python项目案例讲解

要使用Python爬取天气数据并进行制图分析分几个步骤进行: 选择数据源:首先,你需要找到一个提供天气数据的API或网站。一些常见的选择包括:OpenWeatherMap、Weatherbit、Weather Underground等。 安装必要的库:你需要安…

idea右侧找不到Maven,在View-> Tool Windows下也找不到

正常情况Idea右侧没有Maven,只需去View -> Tool Windows 目录中找到Maven并点击Maven,Idea右侧就会出现 问题: idea右侧找不到Maven,在View -> Tool Windows 目录中也找不到Maven,下图 全局搜索ctrl N&#xff…

Spring中网络请求客户端WebClient的使用详解

Spring中网络请求客户端WebClient的使用详解_java_脚本之家 Spring5的WebClient使用详解-腾讯云开发者社区-腾讯云 在 Spring 5 之前,如果我们想要调用其他系统提供的 HTTP 服务,通常可以使用 Spring 提供的 RestTemplate 来访问,不过由于 …

RPA案例学习

京东采集数据 一、搜索商品 流程块 相对应源代码 二、抓取数据 流程块 相对应源代码

pycharm中import moveit_commander报错

在pythcharm中导入moveit_commander,会报一些找不到.so文件的error,比如:librosconsole.so libeigenpy.so ImportError: libmoveit_py_bindings_tools.so.1.1.14: cannot open shared objec 等等的报错 在 /etc/ld.so.conf.d 中 这两个文…

经典病毒上线流量分析-Lokibot

一、概述 Lokibot于2015年面世,持续活跃至今,是一种高度危险且隐匿的恶意软件,旨在窃取受害主机的敏感信息,包括存储的密码、浏览器登录凭据以及加密货币钱包等,并将这些信息上送到远程C2服务器上。本文将重点针对Lok…

RadioML 2016.10a 调制方式识别

RadioML 2016.10a 调制方式识别 MLP、CNN、ResNet X [] lbl [] for mod in mods:for snr in snrs:X.append(Xd[(mod,snr)])for i in range(Xd[(mod,snr)].shape[0]):lbl.append((mod,snr)) X np.vstack(X) file.close()上述论文的分类任务是识别和区分不同类型的无线电调制…

收藏这几个电子书搜索引擎网站,找书不再难!

书籍是我们快速学习获取知识的重要途径,其中,通过电子书学习是一种低成本的学习方式。然而,面对海量的电子书资源,如何快速找到自己想要的书籍呢?下面小编就来为大家介绍几个强大的电子书搜索引擎网站,帮助…

数字时代的创新:二人共益订单模式解析

一、引言 随着数字技术的飞速发展,商业模式也日新月异。其中,“二人共益订单模式”凭借其独特的互助与共赢理念,迅速在市场中获得关注。该模式不仅为用户提供了优质服务和独享优惠,更通过用户间的互助和订单共享,实现…

AbMole带你探索颅内压力与肌肉生长的联系:一项突破性研究

在生物医学领域,颅内压力(ICP)的调控机制一直是研究的热点。最近,一项发表在《PLOS ONE》上的研究为我们揭示了颅内压力与后颅窝肌肉生长之间的潜在联系,为我们理解某些慢性头痛的成因提供了新的视角。 颅内压力的异常…

期望25K,我的React知识体系

面经哥只做互联网社招面试经历分享,关注我,每日推送精选面经,面试前,先找面经哥 我最终还是上岸了,花了3天总结了近万字的react知识体系思维导图,分享出来希望能帮助有缘人吧,以下只是部分截图&…

goldfish loss:减少训练数据泄漏,提高大语言模型输出的多样性

LLMs(大型语言模型)能够记忆并重复它们的训练数据,这可能会带来隐私和版权风险。为了减轻记忆现象,论文作者引入了一种名为"goldfish loss"的微妙修改,在训练过程中,随机抽样的一部分标记被排除在…

美国ARC与延锋安全合作,推动汽车安全气囊技术新突破

在汽车安全领域,安全气囊作为关键被动安全配置,对于保障乘客生命安全至关重要。随着汽车工业的快速发展和科技创新的持续推进,安全气囊技术的升级与革新显得尤为重要。2022年10月25日,美国ARC公司与延锋安全携手合作,共…

4大利好因素释放顺风车市场潜力,嘀嗒出行即将登陆港交所

经历了十多年发展,共享出行行业即将迎来第一个上市公司——专注顺风车和智慧出租车的嘀嗒出行。 近日,嘀嗒出行通过了港交所聆讯,根据招股书,嘀嗒出行2023年顺风车搭乘次数和交易额分别为约1.3亿次和86亿元,同比分别增…