免费的在线托管网站-netlify图过程部署上线实践+自动部署 + HTTPS之ssl搭建

netlify 是一个提供静态网站托管的服务,提供CI服务,能够将托管 GitHub,GitLab 等网站上的 Jekyll,Hexo,Hugo 等静态网站。

** Netlify 有如下的功能: **

  • 能够托管服务,免费 CDN
  • 能够绑定自定义域名,支持SSL证书
  • 支持自动构建
  • 提供 Webhooks 和 API

** Netlify使用 **
Netlify 的使用非常直观和简单,和网站的自我介绍和定位一样简答,使用 GitHub 登录,然后获取公开项目的授权,让其获取源码,然后指定编译命令,比如我的网站使用 Jekyll,那么编译命令就是
jekyll build

将生成的静态网站放到

这个目录下,接下来的事情就是等着 Netlify 自动编译部署,默认情况下 Netlify 会分配一个随机的子域名 https://<随机字符>.netlify.com 这样的地址,可以在设置中设置为自己想要的域名,或者在设置中绑定自己的域名。
那接下来就是 Netlify 会在每一次提交commit时自动编译部署静态网站。

方便吧?下面就是全过程的图文部署实践。

*随着开源工具越来越多,特别是nodejs构建微服务器之快,实现前端自动化部署越来越简单了,有可能【10行js代码+10行sh脚本+设置github的webhook】就能实现,但是如果你和我一样,就是“懒”(此处为褒义),连这些都不想自己做,那该怎么办呢?这个时候我发现了这款好工具—netlify,下面我就来讲讲它究竟有多好用吧_

一、使用github或者gitlab登陆netlify

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

image

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


image

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

点击New site from Git按钮:

image

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

image

选择你需要部署的仓库:


image

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

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

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

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

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

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

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


image

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

三、设置域名,绑定域名

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

image

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

更改netlify域名前缀:

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


image

绑定到自己的域名下:

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


image

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

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

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

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


image

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

image

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

image

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

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

五、强制HTTP跳转HTTPS访问

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

image

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

六、设置redirect

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

原文:https://www.z01.com/Item/3513

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容