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

news/2024/9/25 7:29:12/

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


http://www.ppmy.cn/news/1470336.html

相关文章

docker重要操作与直连方法

文章目录 前言一、nvidia-docker安装方法1、nvidia-docker安装2、重启动ssh 二、构建镜像1、构建镜像docker拉取构建本地镜像加载构建 2、容器转镜像3、镜像打包4、删除镜像 三、构建容器1、容器构建2、启动镜像3、删除容器 四、docker直连(ssh -p)1、docker更改密码2、物理机操…

MFC基础学习应用

MFC基础学习应用 1.基于对话框的使用 左上角为菜单键(其下的关于MFC主要功能由IDD_ABOUTBOX决定) 附图 右下角为按钮(基本功能由IDD_DIALOG决定,添加按钮使用由左上角的工具箱完成) 附图 2.自行添加功能与按钮//功能代码 void CMFCApplication4Dlg:…

简易开发一个app

即时设计网站 即时设计 - 可实时协作的专业 UI 设计工具 需要先设计好UI界面 上传到codefun 首次需要安装 自动生成代码 打开hb软件 新建项目 打开创建的项目 删除代码 复制代码过去 下载图片 将图片放到文件夹里 改为这种格式 index.vue 如果不需要uni-app导航栏可以修改 …

一种改进最大相关峭度解卷积的滚动轴承故障诊断方法(MATLAB)

近年来,最大相关峭度解卷积受到了研究人员越来越多的关注,陆续有多篇研究论文将该方法应用于滚动轴轴承故障诊断。MCKD是由McDonald提出的一种解卷积方法,其算法中设计了一个新的目标函数——相关峭度,并以此为优化目标设计一系列…

python爬虫之aiohttp多任务异步爬虫

python爬虫之aiohttp多任务异步爬虫 爬取的flash服务如下: from flask import Flask import timeapp Flask(__name__)app.route(/bobo) def index_bobo():time.sleep(2)return Hello boboapp.route(/jay) def index_jay():time.sleep(2)return Hello jayapp.rout…

人工智能大模型之开源大语言模型汇总(国内外开源项目模型汇总)

开源大语言模型完整列表 Large Language Model (LLM) 即大规模语言模型,是一种基于深度学习的自然语言处理模型,它能够学习到自然语言的语法和语义,从而可以生成人类可读的文本。 所谓"语言模型",就是只用来处理语言文…

笔记本系统盘移植与windowsLinux双系统安装

目录 一、 前言二、 Windows系统移植二、 安装Linux三、 Windows分区配置 一、 前言 笔记本内存不够了,之前给笔记本添加了一个机械硬盘,也几乎爆满了,于是购置了1T的固态硬盘,打算用这个固态硬盘安装双系统,剩余空间…

深入了解python生成器(generator)

生成器 生成器是 Python 中一种特殊类型的迭代器。生成器允许你定义一个函数来动态产生值,而不是一次性生成所有值并将它们存储在内存中。生成器使用 yield 关键字来逐个返回值。每次调用生成器函数时,函数会在 yield 语句暂停,并记住当前的…