拿Nginx 部署你的静态网页

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

事前准备

1. 云服务器，（个人是阿里云）

2. 码云或者 gihub （用来存放你的代码）

事前配置

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

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

链接成以后会有下面的一个界面，

这就能够成功的登陆到你的服务器啦！

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

1. 安装 git很简单，在命令行模式下输入sudo apt-get install git命令进行安装。安装完毕以后输入git --version就能够看到 git 的版本了；

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

正式部署

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

下面是index.html代码

本地也东西也弄好，下面到来到码云上面创建一个新的仓库，个人就叫static-web，而后把本地static-web-server的文件夹关联到咱们码云static-web的仓库，而且提交到仓库上面，下面几条命令就能够了。

tips：提交代码须要你的本地公钥复制到码云的仓库的设置上面哦，你们这个部分自行百度解决嘛。

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

2. git add .

3. git commit -m 'first'

4. git push -u origin master

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

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

而后进入 www文件夹

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

路径是

而后在static-web文件夹里面，下载咱们刚才上传到码云的代码。

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

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

经过 ls查看配置文件，（你以前没有配置过，下面就是空的了），而后经过 vi 命令新建一个配置文件，例如：
sudo vi static-naice-me.conf （个人顶级域名是naice.me经过解析子域名 static.naice.me，因此就起了这个static-naice-me.conf 名字的文件），而后你就进入了一个 vi 编辑的环境，按下 键盘的i 键，就能够写入内容，写入如下内容

写入内容以后，按下esc而后输入:wq！来保存你编辑的内容。

退出以后咱们须要经过命令行重启 nginx服务

域名解析

域名解析是把域名指向网站空间IP，让人们经过注册的域名能够方便地访问到网站的一种服务，
下面简单说说一下域名解析的操做，你拥有了一个域名而后，进入 dnspod,没有的话帐号的话， 直接注册登陆，而后进到控制台

1. 添加域名

2. 添加 a记录

以下图：

好了，咱们恰好刚刚把解析好的域名写进去咱们的 nginx 的配置里面，也重启了 nginx 服务，下面就直接输入http://static.naice.me/，就能够访问到咱们刚才写的静态网页，是否是有点小激动？？

还有一种方式

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

最后安利一下我的博客： http://blog.naice.me/