制作网站

制作网页两种方式,一是完全自己来写,二是使用模板来修改。对于一般性的 App 或者前端不太熟的话,使用模板来修改已经足够了。

使用模板制作 Landing Page

直接 Google landing page template 就会出来很多,找一个喜欢的自己修改一下即可,但要注意某些模板的协议是需要在页脚保留其签名的。

image-20190709085242678

我们在第一个结果(https://colorlib.com/wp/cat/landing-page/ “Landing Page”)里面找一个合适的模板,看下使用协议,免费使用的话允许商用但不能移除页脚的信息,想要移除的话需要购买一份授权:

image-20190709090019622

下载下来,修改一下内容、配色、图片等,这样我们网站的静态文件就准备好了:

image-20190709195211509

接下来我们来看服务器相关的配置。

服务器配置

配置 NginX

我们使用 scp -r 命令将文件夹传输到服务器上:

image-20190709112324617

登入服务器,编辑配置文件,这里涉及 Vi (服务器自带的文本编辑器)的基本使用,不会的可以学习下,或者将文件 scp 下载下来编辑好再传输到服务器:

image-20190709112659840

将默认的 NginX 的 root 目录改为我们的网站目录地址:

image-20190709122214495

保存并重启 NginX:

image-20190709122405718

浏览器里访问我们服务器的 IP,看到已经可以访问网页了:

image-20190709195025888

域名解析及HTTPS配置

这里我们使用 CloudFlare 的免费服务进行域名解析、 CDN加速以及开启 HTTPS。

打开 https://www.cloudflare.com ,点击 Sign Up 进行注册:

image-20190709132604341

输入自己的域名进行加速:

image-20190709132848697

选择免费的服务即可:

image-20190709132912337

配置两条 A 记录指向服务器的 IP:

image-20190709141328165

提示我们要将 DNS 服务器指向 CloudFlare,复制这两个地址:

image-20190709133312518

登入 NameCheap,进入域名管理:

image-20190709134113254

修改 Nameservers:

image-20190709135424361

回到 CloudFlare,验证修改:

image-20190709135727417

如果没有生效,可等一小时后再验证:

image-20190709135851483

当显示这个信息的时候则表示成功了:

image-20190709140837134

上一步没完成没关系,先进行 HTTPS 的配置,切到 Crypto 面板:

image-20190709140645191

首先把 SSL 改为 Full,表示自动使用 https 访问:

image-20190709165708899

其中几种不同的加密模式区别如下:

image-20190709165823606

打开 https 自动跳转:

image-20190709170614007

稍等几分钟,等各种设置都生效以后直接用我们的域名访问:

image-20190709194951388

至此,我们的网站就搭建完成了,其中还有很多网页优化以及服务器配置的技巧,留待大家自行学习。

额外建议

  • 网站可用性监控
  • 网站访问统计
  • 网站备份

img

关注【代码内外】公众号,获取最新文章。