资讯专栏INFORMATION COLUMN

拿Nginx 部署你的静态网页

hikui / 2797人阅读

摘要:关联本地文件夹和远程仓库,注意地址是你的地址哦上面的后面三点就是,添加到码云仓库,相信大家都知道。这里不能克隆到的,需要把服务器本机的公钥添加到码云上面。

emmmm,作为一个前端开发时刻想着,怎么把自己写的东西,丢到自己的服务器上面,然后展示给别人看。下面我就简单直白的写下,如何用 Nginx 部署你的静态网站。

事前准备

云服务器,(我的是阿里云)

码云或者 gihub (用来存放你的代码)

事前配置

既然你有了云服务器(我就当是你ubuntu 系统哦),然后并且通过了备案,还有一个自己域名。那么很好,该有的东西你已经是有了,下面就一起体验配置的乐趣吧。

第一步:mac 电脑直接通过下面的命令行连接到你的服务器。连接时候会叫你输入密码,输入就是咯

ssh root@127.22.20.121 //你的服务器公有 ip

连接成之后会有下面的一个界面,

这就可以成功的登录到你的服务器啦!

第二步:服务器上安装 git和 Nginx

安装 git很简单,在命令行模式下输入sudo apt-get install git命令进行安装。安装完毕之后输入git --version就可以看到 git 的版本了;

安装Nginx 我们可以很容易地安装Nginxsudo apt-get install nginx,Ubuntu 14.04默认情况下,Nginx安装完成后会自动启动。你可以访问默认的Nginx登陆页面,来确认软件通过访问你的服务器域名或浏览器公共IP正在正常运行。比如说你直接在浏览器输入127.22.20.121,就会看到以下哪个画面。

正式部署

刀已经磨好了,下面我们就霍霍向猪羊啦,首先本地建一个文件夹static-web-server然后在这个文件夹下面建立一个 index.html,这个 html我们随便写点什么的东西就好了。毕竟重心在部署。

下面是index.html代码




    
    
    nginx 静态网站部署 
    


    

nginx静态网站部署实例
naice blog

本地也东西也弄好,下面到来到码云上面建立一个新的仓库,我的就叫static-web,然后把本地static-web-server的文件夹关联到我们码云static-web的仓库,并且提交到仓库上面,下面几条命令就可以了。

tips:提交代码需要你的本地公钥复制到码云的仓库的设置上面哦,大家这个部分自行百度解决嘛。

git remote add origin git@git.oschina.net:naihe138/static-web.git(关联本地文件夹和远程仓库,注意地址是你的地址哦)

git add .

git commit -m "first"

git push -u origin master

上面的后面三点就是,添加到码云仓库,相信大家都知道。
这会本地和仓库都已经准备好了。下面来到服务器设置,连接到你的服务器

首先通过命令行新建一个 www文件夹

sudo mkdir /www

然后进入 www文件夹

cd /www

然后再新建一个文件夹叫static-web,并且进入这个文件夹里面

sudo mkdir static-web
cd static-web

路径是

pwd
/www/static-web

然后在static-web文件夹里面,下载我们刚才上传到码云的代码。

git clone git@git.oschina.net:naihe138/static-web.git

tips: 这里不能克隆到的,需要把服务器本机的公钥添加到码云上面。这个有很多教程我就不细说了。

代码都克隆到我们的服务器了之后,下面我们稍微配置一下 nginx 配置很简单,跟着我就可以了。进入到 nginx 配置目录

cd /etc/nginx/conf.d/

通过 ls查看配置文件,(你之前没有配置过,下面就是空的了),然后通过 vi 命令新建一个配置文件,例如:
sudo vi static-naice-me.conf (我的顶级域名是naice.me通过解析子域名 static.naice.me,所以就起了这个static-naice-me.conf 名字的文件),然后你就进入了一个 vi 编辑的环境,按下 键盘的i 键,就可以写入内容,写入以下内容

server {
  server_name static.naice.me; // 你的域名或者 ip
  root /www/static-web/static-web; // 你的克隆到的项目路径
  index index.html; // 显示首页
  location ~* ^.+.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /www/static-web/static-web;
  } // 静态文件访问
}

写入内容之后,按下esc然后输入:wq!来保存你编辑的内容。

退出之后我们需要通过命令行重启 nginx服务

sudo nginx -s reload
域名解析

域名解析是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务,
下面简单说说一下域名解析的操作,你拥有了一个域名然后,进入 dnspod,没有的话账号的话, 直接注册登录,然后进到控制台

添加域名

添加 a记录

如下图:

好了,我们刚好刚刚把解析好的域名写进去我们的 nginx 的配置里面,也重启了 nginx 服务,下面就直接输入http://static.naice.me/,就可以访问到我们刚才写的静态网页,是不是有点小激动??

还有一种方式

就是可以借用 Nodejs 来输出页面,然后在构建这个 Nodejs 项目的是,需要能渲染这些 html 文件,这个比较利于后期扩展,借助 pm2 自动部署,比如增加数据库,可以用 koa express 来搭建一个网站,不同的路由,访问你不同的后台 html 文件,模板引擎可以使用 ejs,这样可以兼容你的 html,不需要修改为其他的模板格式。后面可以详细说说。

最后安利一下个人博客: http://blog.naice.me/

done

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/39637.html

相关文章

  • Nginx 部署你的静态网页

    摘要:关联本地文件夹和远程仓库,注意地址是你的地址哦上面的后面三点就是,添加到码云仓库,相信大家都知道。这里不能克隆到的,需要把服务器本机的公钥添加到码云上面。 emmmm,作为一个前端开发时刻想着,怎么把自己写的东西,丢到自己的服务器上面,然后展示给别人看。下面我就简单直白的写下,如何用 Nginx 部署你的静态网站。 事前准备 云服务器,(我的是阿里云) 码云或者 gihub (用来存...

    arashicage 评论0 收藏0
  • Angular2 网站 SEO 攻略

    摘要:使用生成静态页,再配置在爬虫访问时提供静态页中的内容。如何在爬虫访问时让爬虫获取到静态页中的内容要演练此部分内容,首先你要把网站用部署。 Angular 的优点有很多,但如果用它来开发网站的话,就不得不面对它的两大缺点: 首页加载慢 搜索引擎的爬虫获取不到页面内容 由于 Angular 是通过 js 动态生成 dom 并插入到页面中,搜索引擎默认只能获得页面的标题。我们可以使用 c...

    niuxiaowei111 评论0 收藏0
  • 利用 NGINX 最大化 Python 性能,第一部分:Web 服务和缓存

    摘要:无论是将其用作的服务器反向代理服务器负载均衡器,还是同时使用以上三种功能,和都能带来很大好处。再就是下篇文章会介绍如何把和当作反向代理服务器和多个应用程序服务器的负载均衡器。而使用将会有助于解决这一问题。 【编者按】本文主要介绍 nginx 的主要功能以及如何通过 NGINX 优化 Python 应用性能。本文系国内 ITOM 管理平台 OneAPM 编译呈现。 Python 的著名之...

    1treeS 评论0 收藏0
  • 利用 NGINX 最大化 Python 性能,第一部分:Web 服务和缓存

    摘要:无论是将其用作的服务器反向代理服务器负载均衡器,还是同时使用以上三种功能,和都能带来很大好处。再就是下篇文章会介绍如何把和当作反向代理服务器和多个应用程序服务器的负载均衡器。而使用将会有助于解决这一问题。 【编者按】本文主要介绍 nginx 的主要功能以及如何通过 NGINX 优化 Python 应用性能。本文系国内 ITOM 管理平台 OneAPM 编译呈现。 Python 的著名之...

    v1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<