[Hugo+Netlify]从零开始建立并发布一个网站

现在有越来越多的开发者选择把自己的博客以静态网站的方式托管在 GitHub 上, 这样的方式可以通过诸如 Jekyll, Hexo,Hugo 等等现有的静态博客生成工具, 非常便捷地搭建出一个样式美观的静态博客或文档页面。

通过对比,我选择了Hugo框架来创建网页,使用 Netlify来自动发布和持续集成这个网站。
选择Hugo+Netlify的理由主要有:

  1. Hugo安装方便,环境搭建非常简单;
  2. Hugo会在创建或更新内容时热重载页面,页面编辑起来非常舒适;
  3. Hugo的运行和生成静态页面的操作非常简单,只需要hugo server和hugo两个命令即可;
  4. Netlify会提供一个免费的可自定义前缀的域名来发布你的网站,并且速度可以,至少比githubPages或giteePages快很多;
  5. Netlify提供方便地自动发布和持续集成功能,把网页代码提交到github的同时,Netlify会自动更新并发布新版的网页。

以上仅为我体验Hugo+Netlify三天的感触,发布一个文档或博客网站,Hugo+Netlify绝对是最便捷最低成本的选择。

如何使用Hugo+Netlify来创建并发布你的个人网站呢?请往下看.

Hugo

1、安装Hugo(Windows电脑)

参考官方文档:https://gohugo.io/getting-started/installing/#windows

  1. 在你Windows电脑的应用程序存放的文件夹下新建一个Hugo文件夹;

  2. 在Hugo文件夹下新建一个bin文件夹用来存放hugo执行程序;

  3. 访问https://github.com/gohugoio/hugo/releases下载hugo压缩包;

  4. 把压缩包内容解压至\Hugo\bin文件夹内;在这里插入图片描述

  5. 把\Hugo\bin加入系统变量;在这里插入图片描述

以上操作完成后可以在cmd终端输入hugo version命令,查看是否安装成功。

2、创建工程并启动

  1. 在github新建一个仓库,并clone到本地,该网站工程的代码将在这里托管;注意不能用gitee,因为Netlify目前不支持gitee。

  2. 生成hugo工程框架,hugo new site example

  3. (忽略第2步,推荐直接进行这里)或者找一个hugo主题,按照主题文档进行安装主题,参考https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

  4. 进入工程文件夹,打开终端,hugo server命令启动工程,浏览器中即可预览网站;hugo命令生成该网站的静态页面等资源,会生成一个public文件夹,githubPages或giteePages托管网站的话便使用public文件夹里面的内容。

3、使用Netlify自动发布网站

发布或更新网站前请先运行hugo命令生成静态资源,并把工程提交到github。

发布网站参考:https://www.cnblogs.com/codernie/p/9062104.html

网站发布之后,每次在github提交该工程的代码更新后,Netlify会自动更新你的网站。因此,每次在本地对网站内容进行更改后,只需要:

cd project
hugo
git add .
git commit -m '更新'
git push

Netlify便会自动更新你的网站。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HuGo版文章发布系统(三层MVC模式) 主要功能: 1、文章管理:发布、修改、删除文章,还能对文章进行置顶、推荐、审核等操作。 2、用户管理:添加、修改、删除用户,还能对用户进行审核、锁定等操作,其中用户密码用了3次MD5加密。 3、栏目管理:实现ajax二级栏目联动,对栏目进行添加修改和删除。 主要特色: 1、网站采用3层模式开发,实现了表现层、数据层和业务逻辑层的分离。 2、整站采用CSS布局,很多表现层东西都用CSS来实现。 3、本站所有链接采用UrlReWrite实现伪静态,隐藏了扩展名。 4、用AjaxPro.2.dll实现二级栏目联动,并解决了栏目取值问题。(但修改文章时二级栏目在页面加载时无法从数据库取值的问题还没解决) 5、本站采用forms身份和角色验证,实现管理员和普通用户两类不同的权限。 6、采用FCk编辑器,数据库操作用SqlHelper封装等等。 后台登陆页面:Admin/Login.aspx 默认管理帐号/密码:51aspx/51aspx data下为Sql数据库,附加即可 该网站是本人的处女作,学习net2个月,就做了那么一个系统。该系统框架是.net2.0的,但是是在vs2008下开发的。该系统算是一个演示吧。里面结合了很多技术,在一些细节上,也用了不用的方法实现。比如在实现Giewview全选这个功能的时候,在用户管理那模块中是用编程的方式在后台实现的,而在文章管理模块中却是用JS来实现的。 在做该网站时,遇到了很多问题,都基本一一解决了。但由于时间匆忙,刚做完还未进行测试就发布出来了,如果大家在使用的过程中遇到什么问题,可直接邮件至:baofen@vip.qq.com大家共同探讨。 本人网站:泡泡网络教程:http://www.hugo8.com/该网站用到的很多技术,我都写在了我网站的asp.net栏目里希望大家常光顾。 最后说下本人现大四,马上要实习了,如果哪家公司不嫌弃,给小弟介绍下,不胜感激。 申明:该源码为本人原创,首发于51aspx.com,未经本人同意,请勿用于商业用途!转载请注明!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值