转载[大雄的学习人生 - 原文地址:https://www.cnblogs.com/codernie/p/9062104.html]

一、使用github或者gitlab登陆netlify

首先,打开netlify网站(https://app.netlify.com/)

然后使用github或者gitlab账号登录。

二、根据github/gitlab仓库创建网站

点击New site from Git按钮:

根据你的仓库所在平台选择,以下三选一:

选择你需要部署的仓库:

设置部署选项,包括三点:

  1. 部署分支(对应下图中 Branch to deploy):

    顾名思义就是你的git仓库的分支,默认选择为master分支

  2. 打包命令(对应下图中 Build command):

    就是你的打包命令,诸如 npm run build,gulp build 之类;如果本身已是静态文件,不需打包编译,这一栏则不填

  3. 打包后目录(对应下图中 Publish directory):

    即执行完打包命令之后静态文件所在目录,诸如 dist,_site 之类;如果本身已是静态文件,这一栏则不填

完成之后点击途中 deploy site 按钮

三、设置域名,绑定域名

进行完第二步,我们可以看到自动化部署已经开始运行了,而且过不多久,我们的网站就已经可以利用netlify域名就行访问了,如下图:

可以看到netlify为我们随机生成了一个netlify下的域名,这里我们可以更改其前缀,并绑定到我们自己的域名下:

>> 更改netlify域名前缀:

首先,点击上图中 Site settings 按钮,然后在下方点击 Change site name 按钮,然后在弹出框中输入自己需要更改的前缀名,点击保存即可,如下图所示:

>> 绑定到自己的域名下:

首先,点击上上图中 Domain settings 按钮,然后在下方点击 Add custom domain 按钮,然后在弹出框中输入自己需要绑定的完整域名,点击保存,如下图所示:

这个时候会显示 !Check DNS configuration,因为我们还没有设置域名解析到netlify服务器,所以这个时候需要到你自己域名的相应服务商网站登录之后在需要绑定的域名下添加一条CNAME解析,解析的主机记录即对应的netlify域名值(这里即 codernie.netlify.com)

ok,过一会儿就可以使用自己的域名访问自己的网站啦

四、生成HTTPS证书,实现HTTPS访问

第四部中的Domain settings 中往下拉,可以看到 HTTPS 几个大字母:

点击 Verify DNS configuration 按钮,待它变成下方绿色按钮之后,再点击:

然后在弹出框中点击确认,过一会儿之后就可以使用https访问你的小站啦:

看到自己的小站前面可以有绿色的安全字样,是不是很酷炫,而且很放心,再也不用担心运营商在自己的网站上挂广告啦,哈哈哈。。。等等,是不是还差了点什么:

对啊,还没有强制跳转https,OK,继续

五、强制HTTP跳转HTTPS访问

在第四步 Domain settings 再往下翻一点,可以看到 Force HTTPS,只需点击 Force HTTPS 即可实现,是不是很方便,如下图:

到这里,你的网站即使用户使用http访问,也将强制跳转至https访问啦,这下可以彻底不用担下运营商给你的用户“发红包”啦!

六、设置redirect

利用netlify实现自动化部署和HTTPS就写到这里了,喜欢就点个赞啦。

netlify搭建静态站+https的更多相关文章

  1. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

  2. Ubuntu 14.04TLS Nginx搭建静态文件服务器

    Nginx搭建静态文件服务器 [官方教程]https://www.nginx.com/resources/admin-guide/serving-static-content/ 打开Nginx的配置文 ...

  3. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  4. windows上使用mkdocs搭建静态博客

    windows上使用mkdocs搭建静态博客 之前尝试过用HEXO搭建静态博客,最近发现有个叫mkdocs的开源项目也是搭建静态博客的好选择,而且它支持markdown格式,下面简要介绍一下mkdoc ...

  5. CentOS 6(64-bit) + Nginx搭建静态文件服务器

    Nginx搭建静态文件服务器 使用命令打开Nginx配置文件: sudo vim /etc/nginx/conf.d/default.conf 将配置改为: server { ...... ..... ...

  6. 使用github和hexo搭建静态博客

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 终于写这篇文章了,这是我使用github和hexo搭建博客的一些心得,希望能给大家一点帮助.少走点弯路.刚接触github,只是用来存项目的版本, ...

  7. WordPress多本小说主题–WNovel主题发布,十分钟搭建小说站! 现已更新至1.2版本

    本文属于<WNovel主题操作手册>文章系列,该系列共包括以下 8 部分: WNovel主题使用手册之–主题安装及更新教程 WNovel主题使用手册之–小说管理 WNovel主题使用手册之 ...

  8. 在GitHub上使用Hexo搭建静态博客

    搭建静态博客须要一个前提是电脑上有安装git而且有github帐号,这个不懂能够看廖雪峰先生的git教程 1.下载nodejs.在官网上能够下载 2.使用git进入你新建的一个目录,输入命令 npm ...

  9. [golang][hugo]使用Hugo搭建静态站点

    使用Hugo搭建静态站点 hugo下载地址:https://github.com/gohugoio/hugo 模板列表:https://github.com/gohugoio/hugoThemes 开 ...

随机推荐

  1. 配置 SSL、TLS 以及 HTTPS 来确保 Elasticsearch、Kibana、Beats 和 Logstash 的安全

    配置主机hosts文件 192.168.75.20 filebeat.local kibana.local logstash.local 192.168.75.22 node2.elastic.tes ...

  2. Nacos配置中心

    本文介绍spring cloud 集成 nacos案例 官方文档:https://nacos.io/zh-cn/docs/what-is-nacos.html](https://nacos.io/zh ...

  3. python正确使用异常处理机制

    一.不要过度使用异常 不可否认,Python 的异常机制确实方便,但滥用异常机制也会带来一些负面影响.过度使用异常主要表现在两个方面: 把异常和普通错误混淆在一起,不再编写任何错误处理代码,而是以简单 ...

  4. Application类-多窗口交互

    我们在派生自Application类中出来放置响应应用程序事件的代码外,还可以放置一些完成其他任务的代码. 在此之前要知道: 如何获取应用程序的Application对象: //App是一个继承自Ap ...

  5. tf.Session()函数的参数应用(tensorflow中使用tf.ConfigProto()配置Session运行参数&&GPU设备指定)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/dcrmg/article/details ...

  6. MAC电脑卸载Jenkins

    终端输入下面命令 '/Library/Application Support/Jenkins/Uninstall.command' zudeMoPro:~ zhu$ '/Library/Applica ...

  7. centos7启动redis命令

    redis安装 yum install redis 安装完成后redis.conf配置文件默认在 /etc/redis.conf 启动命令: redis-server /etc/redis.conf

  8. c# 读取数据库得到dateset

    public DataSet GetCraftInformation(string connectionString, string opName, string productType)       ...

  9. Linux下getopt()函数

    from https://www.cnblogs.com/qingergege/p/5914218.html 最近在弄Linux C编程,本科的时候没好好学啊,希望学弟学妹们引以为鉴. 好了,虽然啰嗦 ...

  10. 苹果电脑Mac系统如何安装Adobe Flash Player

    一)安装/更新Adobe Flash Player 开系统偏好设置 , Flash player  更新,立即检查/立刻安装: Flash插件官方每月常规更新1~2次,为避免频繁过期,建议设置为允许A ...