如何开发网页版简历并部署到自己的服务器上？

傷城~ 2023-02-13 14:39 162阅读 0赞

## 点击这里看效果：[http://106.12.86.145:1997/Scy/][http_106.12.86.145_1997_Scy] ##

### 为什么要做一个属于自己的网页版简历呢？ ###

> 我个人认为可以提升自己的技术，在找工作的时候有可能成为加分项（大部分公司是不看这个的）

### 开发之前自己的整体架构： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70][]

当然每个子主题里还有很多细小的部分，这里我就省略了 ，开发的时候会碰到再具体化。

整体框架搭建出来以后我就开始开发了，接下来就到了技术选用。像这种偏于演示的界面展示就不建议用react等框架了，一般做程序、系统什么的再用框架，我感觉像这种的界面用jq最方便了，布局就用bs，另外我要说的是jq有很多插件。

### 用到的技术： ###

> 主要是jQuery和Bootstrap，交互上是用了jq的一个插件isotope，个人认为它是瀑布流布局的极致

里边的具体内容还有信息什么的都按照自己的简历还有实际情况填进去的 ，不到一个月就完成了，基本上的时间都是在周末的时候做的，如果只做它的话我认为3天就足够了。

网站开发完成之后，总该不能拿图片或者视频给别人看吧，所以我买了一个服务器，用来部署这个网站。

### 服务器推荐 ###

好像每个云都有一个学生特惠服务器，虽然内存很小，cpu1核、内存1G/2G、带宽1M、系统盘40G，大概是这个样子，但是足够我们放一些网页了，甚至小的项目也可以，当然公司开发的项目是不可能用这种服务器的，都是用一些中量级企业版，大公司用的更好了，我当时买的百度云，一年好像是100左右，这种学生特惠服务器每个账号只能买一次，所以建议大家利用好这个机会。

### 接下来就是本文的高光时刻了！！！ ###

网站开发完了，服务器也买好了，那如何把自己的网站部署到服务器上呢？

服务器可以选择centos系统或者windows系统，windows系统会给你一个启动程序，进去之后就相当于进入了另一个“电脑”的界面；而centos系统就相当于在学校学的linux系统一样，一切操作都用linux命令。

我是通过nginx进行部署的，nginx是什么呢？它是一个高性能的[HTTP][]和[反向代理][Link 1]web服务器，同时也提供了IMAP/POP3/SMTP[服务][Link 2]。

在centos系统中，nginx的配置

### 安装nginx： ###

linux版本：CentOS7 64位

【yum 安装最新版nginx：[https://www.cnblogs.com/xxoome/p/7256214.html][https_www.cnblogs.com_xxoome_p_7256214.html]】

在安装nginx前首先要确认系统中安装了**gcc、pcre-devel、zlib-devel、openssl-devel**。

Linux下检查是否安装过某软件包：[http://www.cnblogs.com/xxoome/p/5866553.html][http_www.cnblogs.com_xxoome_p_5866553.html]

安装命令：

>     yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

nginx下载地址：[https://nginx.org/download/][https_nginx.org_download]

下载“nginx-1.9.9.tar.gz”，移动到/usr/local/下。

>     ## 解压
>     tar -zxvf nginx-1.9.9.tar.gz
>     
>     ##进入nginx目录
>     cd nginx-1.9.9
> 
>     ## 配置
>     ./configure --prefix=/usr/local/nginx
>     
>     # make
>     make
>     make install

OK，现在可以执行make 了。

![format_png][]

执行make、make install命令

测试是否安装成功

>     # cd到刚才配置的安装目录/usr/loca/nginx/
>     ./sbin/nginx -t

启动nginx

>     cd /usr/local/nginx/sbin
>     ./nginx //启动nginx

在浏览器中输入服务器的ip地址，如：192.168.1.12

很不幸，打不开链接。下面进行原因排查：

![format_png 1][]

![format_png 2][]

说明服务器的80端口是打不开的。

因为我使用的linux系统版本是CentOS7，所以可以在服务器中执行如下命令来验证》》

>     firewall-cmd --query-port=80/tcp

![format_png 3][]

显然80端口没有开启。

下面我们开启80端口：

>     firewall-cmd --add-port=80/tcp --permanent
>     #重启防火墙
>     systemctl restart firewalld

--permanent   \#永久生效，没有此参数重启后失效

![format_png 4][]

刷新浏览器

![format_png 5][]

### 5.4配置nginx ###

修改配置文件

> 切换目录：\[root@localhost nginx-1.9.9\]\# cd /usr/local/nginx/conf
> 
> 修改文件：\[root@localhost conf\]\# vi nginx.conf

主要是修改server配置节的内容，listen为nginx的端口号，默认为80，可按需修改。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1a29uZ2ppbmcx_size_16_color_FFFFFF_t_70][]

ESC键，退出编辑模式，按冒号键“:”进入命令模式，输入“wq”然后回车，保存并退出；

> 切换到sbin目录：\[root@localhost conf\]\# cd /usr/local/nginx/sbin
> 
> 启动Nginx: \[root@localhost sbin\]\# ./nginx

具体的配置在location那里，把自己的网站路径写在index后即可。

### 上传网站： ###

可以用一些软件，比如FTP，xShell等，当然在centos也可以用git下载项目，这样每次更新的时候直接在里面pull代码即可（我就是用的这个方法）

### 总结: ###

大体上就是这样，希望可以帮助到需要帮助的人，如果有什么问题可以评论或者私信我咨询。

[http_106.12.86.145_1997_Scy]: http://106.12.86.145:1997/Scy/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200529161714956.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nlc3RpZA==,size_16,color_FFFFFF,t_70
[HTTP]: https://baike.baidu.com/item/HTTP
[Link 1]: https://baike.baidu.com/item/%E5%8F%8D%E5%90%91%E4%BB%A3%E7%90%86/7793488
[Link 2]: https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1/100571
[https_www.cnblogs.com_xxoome_p_7256214.html]: https://www.cnblogs.com/xxoome/p/7256214.html
[http_www.cnblogs.com_xxoome_p_5866553.html]: http://www.cnblogs.com/xxoome/p/5866553.html
[https_nginx.org_download]: https://nginx.org/download/
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMDQwNDUxMDItMTE5MTA5NTcxMS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMTM4NDA0MzAtMzE5NzcyMjAyLnBuZw?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMTM3NDY1MjMtMTA5OTg4MjU3MC5wbmc?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMTQwMzkzMjAtNjc4Mzc3NDUyLnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMTQyMDI4MDUtNjY1NjY3MDEwLnBuZw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTY0MTc1LzIwMTYwOS85NjQxNzUtMjAxNjA5MTIyMTQzMzA2NDgtMTY1MzEwNzU2OC5wbmc?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1a29uZ2ppbmcx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2018110715172524.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1a29uZ2ppbmcx,size_16,color_FFFFFF,t_70