hviewer添加新站点_使用Hugo+Netlify 5分钟部署一个网站 NanoDM站点迁移到Netlify记

news/2024/5/10 11:31:51/文章来源:https://blog.csdn.net/weixin_34233974/article/details/112334090
友情提示:
微信公众号文章发布后无法修改更新。
如有更新,会在原文更新和修正。
如需查看原文请点击底部的“

前言

此前老灯介绍过最麻烦的Hugo站点部署方法,很多人可能光看配置文件就头疼了,
这次老灯借着给NanoDM站点迁移的机会,顺便介绍一下最简单的Hugo部署方法。

为什么迁移

NanoDM当前的站点是基于Hugo静态站点生成器构建的。

仓库为什么迁移到github

NanoDM的站点源码此前一直托管在我的bitbucket私人仓库,这次做的另一个改变是:迁移到github

新的仓库地址为: https://github.com/ttys3/nanodm.net  (欢迎fork, 欢迎贡献文章或编写FAQ)

迁移到github之后,可以方便大家一起维护NanoDM的文档。毕竟单靠我一人之力,精力非常有限。
大家平常使用的时候,总会遇到这样那样的问题,而这些问题有些在群里我看到后解答了,大部分时候忙去了没看群,我是没时间回复的。
如果整理成文档呢?那么不仅是群里的人可以看到,任何遇到困难的人都可以得到帮助。文档能形成记录,方便后续的查看和引用。
另一方面是,如果大家有使用心得需要分享的,或者解决了一个疑难问题希望能帮助后来者的,也可以通过github提交PR的方式来参与贡献文档,
合并通过后会直接显示在站点。

为什么托管到Netlify

Hugo支持特别多的部署方式,比如大家常用的github pages(及其它git仓库托管服务商的类似pages服务),
无论是本地depoy静态文件到单独的github pages分支,还是采用github actions自动部署,我觉得,都没有使用Netlify部署方便。
因此,老灯这次偷个懒,直接用Netlify点几下鼠标完成了部署,更省事。

费用问题,对于一般的站点,Netlify的免费套餐完全够用。

此前一直托管在单独的服务器上,这次准备对服务器进行维护升级,为避免操作时影响访问,我决定将NanoDM站点托管到Netlify.
原NanoDM的服务器不再托管网站,只用于固件下载,demo站点演示等。

特此记录,一来方便老灯自己做备忘,二来大家想要”省事“的站点部署方案时,亦可参考本文。

部署到Netlify

部署非常简单:

github仓库用于托管Hugo文件 => Netlify自动持续部署且托管网站

这哥俩都是托管,但是我们把他们合起来使用,他们配合得天衣无缝。

github仓库用于托管源码,一但你push了新提交到github的指定仓库,Netlify就会开始自动拉取代码并部署站点(自动执行Hugo命令生成静态站点并发布)。

那么Netlify怎么就知道你什么时候push了代码了呢?因为你在Netlify配置的时候,指定了仓库,
同时也把这个仓库的权限给予了Netlify在github的app,如下图:

进入仓库设置(Settings)页面,切到Integrations, 你就会发现这个仓库启用了一个名为Netlify的app:

74f43cab60b3d9acb23b4f1fccb2ebd3.png
github-repo-apps

所以,我们在Netlify添加github的仓库时,实际上是授权Netlify在github的app访问某个仓库的权限。

一旦有代码push或者PR,Netlify在github的app都能收到通知然后进行相应地处理。

好了, 这种部署方式的原理大概说清楚了。接下来简单地讲一下操作步骤。

  1. 用githbu登录https://app.netlify.com/

  2. 点击"New site from git"

  3. Netlify会提示需要额外的权限以便于站点部署,选择仅给予指定仓库权限,然后选择 ttys3/nanodm.net 这个仓库

4d9ca56b9b88215dc69cee0768bb2a47.png
netlify-choose-repo
d0af00f8fac5bcc2f8542d3b21c35511.png
github-netlify-app-config
  1. 配置构建方式为hugo并部署站点

b5ba143b871a041ff0ae3ccc6ddd4824.png
netlify-deploy-config
  1. 域名配置

部署成功,Netlify会自动分配一个随机的域名给你。我们可以自行修改成方便记忆的,比如我这里使用的 nanodm.netlify.app

7f723842b9671e687b1d433d97737117.png
netlify-domain-settings

xxx.netlify.app 这个域名太长了,太难记了,因此,当然是要设置自定义域名了。
Netlify设置自定义域名是完全免费的。但是官方的文档可能看起来没那么简洁明了。
因此老灯这里特别说明一下,加自定义域名,就是加一个CNAME记录指向你当前的xxx.netlify.app 这个域名。

老灯以CloudFlare为例:

9f37e9d9bb573860001a44b0cb72975e.png
cf-config-netlify-custom-domain

注意这里启用了CF的Proxy功能,为什么呢?因为老灯的域名是托管在CF的,主要是CF可以自动https.
当然,Netlify也是完全支持自动ACME申请Let's Encrypt的证书的,但是前提是你的域名要使用Netlify的DNS.
Netlify也支持手动设置SSL证书,当然,这个基本上咱不考虑了,都2020年了,谁还手动设置证书呢?

DNS CNAME配置好之后,我们就可以在Netlify Custom domains那里添加上这个域名了。
注意顺序,一定是先设置好CNAME记录,再到Netlify添加,因为Netlify并不能确定这个域名是不是你的,
所以,它的处理方法也很简单,在你点击提交的时候,它会校验这个域名的CNAME记录的值,是不是对应了你的xxx.netlify.app 这个域名

老灯的添加成功的效果:

99062cba4b6863cb415198f8580cbd1b.png

好了,现在就能用自定义域名访问了。

整个过期是不是非常简单?总结起来就是, push一个仓库到github, 在netlify选中这个仓库部署。嗯,就这样,一个站点就好了。
自定义DNS是额外的可选操作。用netlify提供的域名也是OK的。

要查看部署好的站点,请访问: https://nanodm.net/

其它

Netlify构建失败处理

由于本地环境和Netlify的构建环境还明些差异的,如果遇到构建失败,可以通过查看log定位问题。
比如老灯这里,把even这个主题升级到最新版之后,发现在Netlify构建失败了。

98f067fe0b932aebc22ea849e21f91c9.png
netlify-build-log

然后通过查看日志,我们发现是新版本的even主题需要较新版本的hugo( 0.60.0以上的版本)。

0f8fb67e0bd34ce9273ef9024d8459ae.png
netlify-hugo-build-failed

解决办法:仓库根目录下增加netlify.toml配置文件指定hugo版本, 当前最新版本为 0.69.2, 老灯就指定HUGO_VERSION = "0.69.2"

hugo当前最新版本号可以去https://github.com/gohugoio/hugo/releases查看

[context.production.environment]
  HUGO_VERSION = "0.69.2"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.69.2"

自定义部署命令

Netlify支持通过 netlify.toml配置文件 来配置构建。

老灯的配置文件如下:

[build]
publish = "public"
command = "env TZ='Asia/Shanghai' hugo --gc --minify --enableGitInfo"

[context.production.environment]
  HUGO_VERSION = "0.69.2"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.69.2"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"

Netlify会自动从这个配置文件读取配置,可以在Netlify 配置面看到这个文件配置是生效的:

5aaf2aa6f284dfba359e0f8dff84cbd0.png
netlify-file-config

通过构建log我们可以验证,Netlify是不是执行了我们配置的命令:

2c3c3342ad26367fa65440be3201117a.png
hugo-custom-build-command-on-netlify

另外,Netlify还有很多有趣的功能,大家感兴趣的可以慢慢玩。

参考文档

https://gohugo.io/hosting-and-deployment/hosting-on-netlify/

https://docs.netlify.com/domains-https/custom-domains/#definitions

https://docs.netlify.com/large-media/setup/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_832822.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux国外脚本网站,Shell脚本实现防止国外ip访问服务器

客户的要求,不想让外国的ip来访问服务器,本来要让机房在上端路由解决,但是那些人不鸟你!!!~~~~这样的话,只能自己用iptables解决了~~~~~~~~~关于 ip库 大家可以去 http://www.ipdeny.com/ipblo…

某食品公司网站存在SQL注入

错误链接:http://www.shenggu2006.com/news1.php?id5 在id后传参6-1,回显页面与id5相同,放入sqlmap跑包,存在sql注入 甚至可以爆出数据库名

下载英文图书的几个网站

★ 1. https://ebooks.adelaide.edu.au/ 按作者:https://ebooks.adelaide.edu.au/meta/authors 按书名:https://ebooks.adelaide.edu.au/meta/titles/A.html 按类别: https://ebooks.adelaide.edu.au/meta/collections 界面下方的几个按钮…

ASP网站搭建

Windows2003IIS6.0环境搭建 集成IIS6.0的Windows2003虚拟机 链接:https://pan.baidu.com/s/1rMb9-6A_Oc2luTwtoaB2VA 提取码:8d1o 安装好IIS组件后 管理工具->Internet信息服务(IIS)管理器 网站->新建->网站 意思就是备注,随便填,点击下一步 …

关于测试web端兼容性、性能测试和安全测试的网站

一、测试浏览器兼容性的国外网站 1.网址:browsershots.org BrowserShots的功能比较强大,它支持如上图所示各种不同系统下不同版本的浏览器。只要你选中你所想查看的浏览器,然后输入你网站的网址,它就会将你网站在不同浏览器的显示…

手机控必备网站,让自己拥有更好的智能手机

手机成为人们日常生活标配后,无论年幼年长还是年轻群体,都将业余时间给了手机,而移动互联网不但满足了我们的需要,还方便了我们的生活,但如果没有一部好的手机,我们分分钟都有想砸手机的暴躁心情&#xff0…

网站开发_盒子模型

divcss 与 全table布局 先主流布局为divcss&#xff0c;更容易实现数据与表现的分离&#xff0c;代码更少&#xff0c;更容易维护。 两种盒子模型 w3c标准盒子模型以及IE盒子模型&#xff0c;推荐试用标准盒子模型。需要在网页顶部加DOCTYPE 声明区分。 <!DOCTYPE html PUBL…

网站开发_从基础做起1

推荐一个网站&#xff1a;标准之路&#xff0c;讲解网站开发确实很详细&#xff0c;带有实例边讲边实践&#xff0c;很是惊喜 就本人的经验来说&#xff0c;网站开发基础可以去w3School中学习html以及css的基本语法&#xff0c;然后参考上面提到网站的DIVCSS教程 一步一步搭建起…

网站开发_从基础做起2

一超链接的四种样式 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 以上分别定义了超链接未访问时的链接样式&#xff0c;已访问的…

领英宣布开源其两大网站问题自动修复工具

领英宣布将用于调查主机和服务中断以及其他网站导航问题的两种工具开源。Fossor(gragraigger的拉丁语)是一个Python工具和库&#xff0c;可以同时自动执行多个检查&#xff0c;而另一个Python库Ascii Etch以ASCII字符图的形式输出从Fossor收集的信息。 领英首席开发人员Steven…

大型网站技术架构(二)架构模式

2019独角兽企业重金招聘Python工程师标准>>> 每一个模式描述了一个在我们周围不断重复发生的问题及该问题解决方案的核心。这样&#xff0c;你就能一次又一次地使用该方案而不必做重复工作。 所谓网站架构模式即为了解决大型网站面临的高并发访问、海量数据、高可靠…

c++伪代码_如何实现“AI SEO伪原创”?

市面上已经有众多【AI伪原创】工具&#xff0c;看产品说明&#xff0c;介绍是基于NPL卷积神经网络千万语料库机器学习生成的文章。百度“AI伪原创”&#xff0c;随便找一款产品&#xff0c;测试一下伪原创效果&#xff1a;巧了&#xff0c;这个伪原创的内容&#xff0c;跟Googl…

网站建设报价单_角点科技:网站建设怎么收费的?

现在建设网站的公司是比较的多的&#xff0c;想要建设网站的公司也是比较的多的。但是在价格这里&#xff0c;就会有一些不等了。建设同一个网站&#xff0c;去找网站建设公司报价的时候得到的却是不一样的。那么这是为什么呢。网站建设公司的收费是怎么收费的呢。网站建设的收…

如何让移动端出现横向滚动条_移动端网站应该如何优化?

原标题&#xff1a;移动端网站应该如何优化&#xff1f;随着移动设备的普及&#xff0c;也引发了一大批移动端网站的建设&#xff0c;而且像我们公司新建设的网站一般都会配备了移动端网站的&#xff0c;从而也引发出一个新问题你&#xff0c;那就是移动端网站应该如何优化&…

java开发一个网站要多久,JAVA开发一个网站难吗?要怎么开始?

下面谈一下我的看法吧。01 难与不难是相对的从Java技术角度来看&#xff0c;开发一个简单的动态网站(例如&#xff1a;在线报名网页)&#xff0c;你需要掌握的是Java语言基础、JSP动态网页技术、JDBC数据库访问技术。从网页制作角度&#xff0c;你还要掌握HTML/CSS/Javascript。…

一直显示数据格式错误_网站打不开常见错误以及解决方法

网站行业&#xff0c;经常会不可避免的遇到各种各样的问题&#xff0c;而大家汪汪队这些问题不知所措。下面鸿鑫瑞就来分析分析我们遇到的问题就是什么原因导致的。一、通过浏览器返回的错误状态码查找问题 400 - 错误的请求。401 - 访问被拒绝。IIS 定义了许多不同的 401 错误…

js关闭浏览器清除cookie_如何在Chrome浏览器中清除特定网站的Cookie数据

当我们在网站上遇到错误时&#xff0c;经常会用到的一个方法就是清除Cookie&#xff0c;清除网站的Cookie和网站数据来重置本地的缓存&#xff0c;很多客户端引起的错误都可以使用该方法修复&#xff0c;但是在清除Cookie时有一个问题是使用浏览器更多中的清除浏览数据功能会直…

日活量百万网站服务器配置,干货篇丨日活用户超3亿的流量平台,是怎么进行性能压测的?...

一、压测常识1、性能测试的工作流程2、性能测试的类别负载测试&#xff1a;通过逐步加压的方法&#xff0c;达到既定的性能阈值的目标&#xff0c;阈值的设定应是小于某个值&#xff0c;如cpu使用率小于等于80%。压力测试&#xff1a;通过逐步加压的方法&#xff0c;使得系统的…

记录重要的网站

文章目录一、UI1.逼格高&#xff0c;动态图比较高清&#xff08;GIF&#xff09;2. 阿里的大部分UI图&#xff0c;够用二、查找问题1.Stack Overflow最大编程社区&#xff0c;可以找到绝大多数问题三、技术1.web、HTML、JS、CSS文档&#xff0c;界面舒适&#xff0c;适合基础2.…

qq账号绑定服务器地址,网站接入 QQ 登录整合社交账号登录 - 文章教程

QQ互联是腾讯旗下的开放平台&#xff0c;通过QQ互联网站主或开发者可以申请接入QQ登录&#xff0c;获取登录用户基本资料&#xff0c;用户使用QQ账号登录接入的站点或应用APP&#xff0c;通过分享功能&#xff0c;将站点内容分享到QQ、手机QQ、QQ空间、微博等平台&#xff0c;也…