网站建设分几类,亚马逊网站首页,哈尔滨vi设计公司,计算机基础网站建设和网络安全前言
最近开始准备秋招#xff0c;打算做一个个人主页#xff0c;以便在秋招市场上更有竞争力。
目前#xff0c;现有的一些搭建主页的博文教程存在以下一些问题#xff1a;
使用Github Page进行部署#xff0c;这在国内访问容易受阻使用宝塔面板等框架#xff0c;功能…前言
最近开始准备秋招打算做一个个人主页以便在秋招市场上更有竞争力。
目前现有的一些搭建主页的博文教程存在以下一些问题
使用Github Page进行部署这在国内访问容易受阻使用宝塔面板等框架功能较繁杂自定义化程度低使用Hexo等博客框架进行搭建主题大多花里胡哨不够清晰美观仅介绍如何进行操作未说明这么做的原因导致知其然而不知其所以然
针对以上问题本文重新梳理用一周时间完成从主页编写到建站上线的流程希望能对有同样需求的人有所参考。
1.选择主页模板
之前看论文时发现不少学术圈人士用了jonbarron开源的这个主页模板看上去非常简洁清晰并且同时适配网页端和移动端。
访问地址https://jonbarron.info/ Github地址https://github.com/jonbarron/website
该模板时用前端三要素写的只需要简单得修改html文件就可以完成自己的个人主页。
由于原模板里面包含了很多动图及视频效果我只需展现图片因此对该模板进行了进一步的精简有需要的也可以查看我修改的版本 Github地址https://github.com/zstar1003/zstar
2.选择服务器
因为该主页需要在国内访问因此最佳方式是直接在云服务器上进行部署。
我使用阿里云服务器阿里云的优点是服务器最近做活动比较便宜(不是做广告)提供免费的ssl证书和DCDN服务(个人轻量使用可白嫖)。一言蔽之便是性价比高。
不过阿里云很多功能模块比较错综复杂文档有时候并不清晰。找一个小功能点往往需要找半天为此我在后面的步骤中会尽可能地挂一些链接以便查找。
我购买的是阿里云的ECS轻量实例99元可以用一年对学生来说比较划算。 购买界面https://www.aliyun.com/daily-act/ecs/99program
系统环境选择Ubuntu 20.04 64位。
等待系统安装完成之后这里需要配置一下安全组规则。
此步非常重要安全组相当于外部的防火墙之前部署时忘记开相关端口导致部署失败一致在内部排查问题浪费不少时间。
这里比较核心的就开放三个端口
22端口用于ssh远程连接控制80端口用于http访问443端口用于https访问 3.Nginx部署
主流的服务器有Nginx和Apache这两个我都试了一下发现Apache有1代和2代两者之间的配置文件不能通用查询相关资料时容易造成不便此外Nginx对于静态内容的处理比Apache更为高效。因此选在Nginx作为服务器。
在服务器上安装Nginx
sudo apt update
sudo apt install nginx3.1 文件上传
Nginx的默认网站根目录为/var/www/html/因此先将本地编辑好的主页模板上传到服务器该路径下。 上传完之后给文件设置权限
在Nginx中默认用户(访问者)用户名为www-data所属用户组也为www-data这里将该文件夹及子文件夹的所有权赋予用户www-data。
sudo chown -R www-data:www-data /var/www/html将该目录的权限设置为775
sudo chmod -R 755 /var/www/html这里775的具体含义是
所有者7rwx
读r可以查看文件内容或列出目录内容。写w可以修改文件或在目录中创建/删除文件。执行x可以执行文件或进入目录。
所属组5r-x
读r可以查看文件内容或列出目录内容。执行x可以执行文件或进入目录。
其他用户5r-x
读r可以查看文件内容或列出目录内容。执行x可以执行文件或进入目录。
更多去数字及权限含义入下表所示
数字权限含义7rwx读r、写w、执行x6rw-读r、写w5r-x读r、执行x4r–读r3-wx写w、执行x2-w-写w1–x执行x0—无权限
起初看到这么设置的时候我产生了一个疑问既然用户www-data所属的是www-data组为什么只给用户写的权限不给整个用户组写的权限。
查询资料这样做的目的是满足最小权限原则即只让访问者可以读写执行以便在浏览器中进行交互而对于其它用户(即便在同一个用户组)也不给写的权限防止其它进程修改网站文件。
3.2 修改配置
Nginx使用server 块来配置虚拟主机通常可以为每个网站创建一个独立的配置文件。 比如在/etc/nginx/sites-available/目录下创建一个新的配置文件。
考虑到我只有一个网站因此我直接修改的nginx的配置文件配置文件默认路径为/etc/nginx/nginx.conf。
在http项里添加server这里的公网ip替换成自己服务器的公网ip在服务器控制台中查看。
http {server {listen 80;server_name 公网ip;root /var/www/html;index index.html;location / {try_files $uri $uri/ 404;}}
}3.3 部署访问
1.配置完成后启动nginx
sudo systemctl start nginx可进一步设置开机自启动(可选)
sudo systemctl enable nginx2.检查一下配置文件是否有格式问题
nginx -t输出以下内容表示配置文件没问题
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful3.查看nginx是否处于正常运行状态
sudo systemctl status nginx输出active (running)表示正常运行。
4.启动防火墙
sudo ufw enable5.设置防火墙开放80端口
sudo ufw allow 80/tcp6.查看防火墙状态
sudo ufw status配置完成之后浏览器访问http://公网ip即可看到网站界面。
4.域名解析
直接给用户公网ip的访问不太友好也不好记因此需要购买域名解析到ip。
我是直接在阿里云注册的域名。 阿里云的域名注册地址https://wanwang.aliyun.com/domain
不同尾缀的域名价格有所差异我选择了一个.website结尾的域名一年价格10块钱。这里注册时不建议使用中文后缀的域名后面在配置SSL的时候会遇到不适配的问题。
购买好域名后在域名控制台中进行域名解析这里添加了两条A记录A记录是将该域名解析到自己的公网ip。
一条记录是即直接访问域名 另一条记录是www即访问www.域名 之后重新修改nginx配置文件/etc/nginx/nginx.conf将公网ip替换成自己的域名。
http {server {listen 80;server_name 自己域名;root /var/www/html;index index.html;location / {try_files $uri $uri/ 404;}}
}配置完成后重启nginx
sudo systemctl restart nginx等几分钟就可以通过域名访问到部署的网站。
再过几分钟就会发现网站被ban因为地域规则域名必须要备案之后才能上线。
阿里云的ICP备案地址https://beian.aliyun.com/
三年前我曾经用过ICP备案当时备案流程还比较复杂阿里云平台审核需要进行视频通话要人工检验身份证信息。
现在已经比较便利了身份信息都直接自动校验阿里云的初审只是有个人工电话打电话来确认下就行了。
下图是我的备案流程图从7号开始提交13号最终通过用了差不多一周时间。 建站很快审核很慢。
备案通过之后域名就可以正常访问了。不过需要按照要求在网页底部放置ICP备案号在我精简的模板中已有该备案号添加。
5.SSL配置
5.1 Https原理
如果仅通过http访问浏览器会有连接不安全的提示。
不安全的原因是HTTP是明文传输的这意味着数据在传输过程中是未加密的容易被第三方窃听或篡改。
因此HTTPS(HTTP Secure)应运而生。HTTPS在HTTP的基础上增加了 SSL/TLS 加密层以保证数据安全具体通信流程如下
客户端发起请求 客户端如浏览器向服务器发起 HTTPS请求。客户端支持的 SSL/TLS 版本和加密套件Cipher Suites会发送给服务器。服务器响应 服务器选择一个双方都支持的 SSL/TLS 版本和加密套件。服务器将自己的数字证书发送给客户端。证书中包含服务器的公钥和证书颁发机构CA的签名。客户端验证证书 客户端验证服务器的数字证书检查证书是否由受信任的 CA 签发检查证书是否在有效期内检查证书中的域名是否与访问的域名匹配。 如果验证通过客户端生成一个预主密钥Pre-Master Secret并使用服务器的公钥加密后发送给服务器。密钥交换 服务器使用自己的私钥解密预主密钥。 客户端和服务器使用预主密钥生成主密钥Master Secret然后进一步生成会话密钥Session Keys用于加密通信内容。加密通信 客户端和服务器使用会话密钥对通信内容进行加密和解密。
以上是GPT生成的解答内容看起来有点绕。梳理一下就是客户端和服务器想用一种相同的加密方法加密通信内容问题的核心便在于服务器该如何自证身份。
而证书(CA)就是第三方机构签发的服务器身份证服务器在首次通信时直接将身份证信息连同公钥寄过来这个证书需要通过私钥进行生成私钥仅存在于服务器中因此中间人无法通过伪造证书来进行篡改攻击。 客户端在验明正身后用寄过来的公钥加密信息(约定后面用什么加密方式通信)这个信息只有服务器通过私钥才能进行解密。 如此就保证了数据的双向传输安全。
SSL(Secure Sockets Layer)目前已被TLS(Transport Layer Security)替代目前大部分的浏览器都使用TLS1.2和TLS1.3两个版本。
访问网站时可以在开发者界面中的安全栏看到具体的TLS版本。 证书正常买的价格有点偏贵不过阿里云给每个用户20个免费额度每张证书有效期为3个月。 申领地址https://yundun.console.aliyun.com/ 申请完成之后需要等待机构签发签发很快差不多半小时就下来了。
下面就需要将证书部署到服务器上证书控制台里面有部署菜单但一直没找到我的服务器资源。翻阅半天文档才发现阿里云的一键部署对ECS对系统有严格限制。这一点竟然在控制界面中无提示差评)。 5.2 手动部署证书
下面手动进行证书部署。
首先在下载界面将证书下载下来下载Nginx形式。 下载完之后会得到两个文件.key是私钥.pem是公钥。
将私钥上传到服务器/etc/ssl/private/这个路径。 将公钥上传到服务器/etc/ssl/certs/这个路径。
重新修改nginx配置文件/etc/nginx/nginx.conf我的完整配置文件内容如下
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;events {worker_connections 768;# multi_accept on;
}http {### Basic Settings##sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;# server_tokens off;include /etc/nginx/mime.types;default_type application/octet-stream;### SSL Settings##ssl_protocols TLSv1.2 TLSv1.3;ssl_prefer_server_ciphers on;### Logging Settings##access_log /var/log/nginx/access.log;error_log /var/log/nginx/error.log;### Gzip Settings##gzip on;### Virtual Host Configs##include /etc/nginx/conf.d/*.conf;include /etc/nginx/sites-enabled/*;server {listen 80;server_name zstar.website www.zstar.website;return 301 https://$host$request_uri;}server {listen 443 ssl;server_name zstar.website www.zstar.website;ssl_certificate /etc/ssl/certs/zstar.website.pem;ssl_certificate_key /etc/ssl/private/zstar.website.key;ssl_session_cache shared:SSL:1m;ssl_session_timeout 5m;ssl_ciphers HIGH:!aNULL:!MD5;ssl_prefer_server_ciphers on;root /var/www/html; index index.html index.htm;location / { try_files $uri $uri/ /index.html;}}
}这里我对80端口的http请求加了一个重定向使其访问http时会自动向https的443端口发送请求。
配置完成后重启nginx
sudo systemctl restart nginx同时设置防火墙开放443端口
sudo ufw allow 443/tcp之后就可以通过https域名的方式正常访问网站。
6.DCDN加速
由于我的网站中有一些比较大的图片并且服务器带宽很小访问时会有点加载缓慢。用户端表现是文字先加载出来图片等两三秒才出现用户体验不佳。
因此想通过CDNContent Delivery Network将静态内容如图片、CSS、JS 文件缓存到全球各地的边缘节点使用户可以从离自己最近的节点获取内容从而加速访问速度。
DCDNDynamic Content Delivery Network是CDN的扩展可加速动态内容如 API 请求、数据库查询、个性化内容的分发。 正好阿里云的有一年50GB的免费通用流量包因此来白嫖一下。 DCDN地址https://dcdn.console.aliyun.com/
DCDN的操作很简单添加需要加速的域名设置源站为公网ip的443端口几分钟后它会生成一个CNAME记录该记录相当于是一个新的加速访问地址。 之后需要在域名解析中删除前面添加的两条A记录否则会造成冲突的问题。 添加新的CNAME记录记录值为新的DCDN提供的数值。 最后在DCDN里面再配置一下HTTPS证书直接上传公钥的内容即可。 配置完成后需要过十几分钟控制台的CNAME状态才会更新。 在控制台中也可以通过nslookup -typeCNAME 访问域名的方式来查看域名是否正确解析到了加速地址中。 配置完之后访问很流畅基本秒加载完美解决问题。
总结
流程顺利的话搭建主页实际半天就可以完成。7天时间6天卡在了审核上半天卡在了问题排查和文档查看上。阿里云的文档确实有点错综复杂找起来并不轻松。此次实践特别是配置SSL和DCDN之后对相关的原理会更加深刻实践出真知。
