转载[大雄的学习人生 - 原文地址: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. MySQL各类型字段可定义最大宽度

    今天浏览mysql的官网文档,无意中看到如图划线部分一句话,引起了我的兴趣,所以决定做实验官方所言. 条例1.创建数据表时,所有字段定义时"宽度之和"不得超过65535字节: 条例 ...

  2. APUE—UNIX文件系统

    在linux系统中——一切都是文件. 1. 磁盘物理结构 磁盘的物理结构如下: 磁盘由很多盘面组成,而盘面上则是由很多同心圆环组成的磁道,每个磁道又被切割成许多扇区.所有磁盘面的同一个磁道构成一个柱面 ...

  3. IDEA 部署spring Cloud

    Spring cloud Eureka Eureka Server,注册中心 Eureka Client,所有要进行注册的微服务通过Eureka Client 连接到 Eureka Server ,完 ...

  4. sql中别名加as和不加as的区别

    select UserName as 用户名,PassWord as 密码 from user 与 select UserName 用户名,PassWord 密码 from user 中as用于不用的 ...

  5. 记录一次OracleJDK开发的项目发部到Linux中使用OpenJDK启动后失败的错误的解决方案

    一.现象 基于JAVA SpringBoot2.0.4的项目,发部后项目发部后,放到OpenJDK环境中运行时,提示下列错误: 2019-10-22 10:03:55 [main] WARN  o.s ...

  6. Mybatis源码解析(一) —— mybatis与Spring是如何整合的?

    Mybatis源码解析(一) -- mybatis与Spring是如何整合的?   从大学开始接触mybatis到现在差不多快3年了吧,最近寻思着使用3年了,我却还不清楚其内部实现细节,比如: 它是如 ...

  7. Win10 默认用Windows照片查看程序打开图片

    ::复制以下内容到记事本: @echo off&cd\&color 0a&cls echo 恢复Win10照片查看器 reg add "HKLM\SOFTWARE\M ...

  8. tomcat采坑

    1. tomcat采坑 1.1. 采坑 今天又踩了个以前踩过的坑,运维系统迁移到docker,使用的tomcat版本是tomcat8,而原来的版本是tomcat7.0.53,导致的结果就是系统间请求一 ...

  9. vue-cli随机生成port源码

    const portfinder = require('portfinder'): const port = await portfinder.getPortPromise(): 两行代码 端口搜索范 ...

  10. linq to js 用法

    /** * 排序汇总 * */ var result = Enumerable.From(vm.productList).GroupBy("$.goods_id", null, f ...