10分钟使用网站构建框架hugo本地搭建个人网站并快速上线详细教程

news2024/9/21 19:05:35

文章目录

    • 前言
    • 1. 安装环境
    • 2. 配置环境变量与hugo安装
      • 2.1 创建程序目录
      • 2.2 配置环境变量
      • 2.3 查看程序版本
    • 3. 创建博客网站
      • 3.1 创建站点
      • 3.2 在站点中创建一篇文章
      • 3.3 为网站添加主题
    • 4. 本地访问测试
    • 5. 安装内网穿透工具
    • 6. 配置公网地址
    • 7. 配置固定公网地址

前言

今天和大家分享如何在Windows系统电脑使用HUGO快速搭建一个本地博客网站,并结合cpolar内网穿透工具实现一键发布本地站点至公网,随时随地远程访问,无需公网IP与准备域名、服务器。

Hugo 是 Go 编写的静态网站生成器,速度快,易用,可配置。作为一款跨平台开源建站系统,当前提供 Windows,Linux,FreeBSD,NetBSD 和 OS X (Darwin) 的 x64, i386 和 ARM 架构的二进制预构建包。

Hugo 依赖于 Markdown 文件,元数据字体 。用户可以从任意的目录中运行 Hugo,支持共享主机和其他系统。只需要几分之一秒就可以渲染一个经典的中型网站,非常适合博客,文档等等网站的生成。

image-20240705134636543

1. 安装环境

接下来教大家如何在Windows系统本地安装HUGO

HUGO项目地址:https://github.com/gohugoio/hugo

首先需要安装好Windows版本的 git:

(如果没有安装git的话,进入git官网进行下载windows版本 https://git-scm.com/downloads)

image-20240506142150939

然后需要下载并安装Windows版本的 GO:

(如果没有安装go的话,进入go的中文官网进行下载windows版本Go中文网 Go语言中文网 golang (p2hp.com))

image-20240705143948178

2. 配置环境变量与hugo安装

然后去上方的hugo项目地址下载好Windows版本的hugo后,放在一边备用。

image-20240705152740272

本教程中下载的项目压缩包名为:hugo_extended_0.128.2_windows-amd64

2.1 创建程序目录

在C盘新建一个名为hugo的文件夹,进入文件夹后再创建一个名为bin的文件夹

将下载好的Windows版本hugo应用程序压缩包解压到这个bin文件夹

image-20240705135807061

2.2 配置环境变量

然后在Windows搜索栏中搜索环境变量,点击环境变量

image-20240705114717249

选择系统变量中的Path,点击新建,

image-20240705114943055

将 C:\hugo\bin 这个路径添加到环境变量

image-20240705115032733

2.3 查看程序版本

然后打开powershell终端,输入下方命令查看

hugo version

显示版本号,即为成功安装了hugo程序。

image-20240705152958542

3. 创建博客网站

现在我们就可以使用hugo搭建一个属于自己的博客网站了。

3.1 创建站点

首先,我们进入到C盘下的hugo文件夹,点击鼠标右键选择在终端中打开:

image-20240705140412422

执行下方命令创建一个静态站点:(本例创建的站点名为myblog,大家可以自定义)

hugo new site myblog

image-20240705141007887

创建后,我们回到hugo目录,可以看到新增了一个名为myblog的文件夹:

image-20240705141118045

进入该文件夹后,就能看到刚刚创建的博客网站程序:

image-20240705141140258

3.2 在站点中创建一篇文章

创建好了站点后,现在网站中还什么内容都没有,我们可以创建一篇文章来进行一下测试:

现在我们在终端中执行下方命令,进入站点目录:

image-20240705141526446

进入网站目录后,执行下方命令创建一篇markdown格式的文章:

hugo new posts/Articles01.md

image-20240705142018003

执行后可以看到提示已经创建了一篇名为Articles01的文章与其所属路径。

进入这个路径,就能看到文章了。

image-20240705142140173

打开这篇文章后能看到这篇文章的标题,日期等相关信息:

image-20240705142245182

在这里我们需要把draft(草稿) = true 修改为 draft = false 来表示这并不是一篇草稿。

然后随便在文档中写一些内容,比如:

image-20240705142632169

image-20240705153923525

然后保存关闭即可。

3.3 为网站添加主题

现在我们已经创建好了一个博客网站,并在网站中发布了一篇文章,不过现在我们还不能在浏览器中运行这个本地网站进行查看,因为在这之前,我们需要先给网站添加一个主题。

我们可以登录下方的hugo官网页面来挑选一个你喜欢的网站主题:

完整列表 |雨果主题 (gohugo.io)

image-20240705143135266

这里我们随便选择一个主题,点击进入页面后,可以看到安装方式:

image-20240705145905238

可以看到,想要安装这个网站主题,需要先在终端中进入站点目录:

cd myblog

也可以想上边一样,在myblog目录中右键在终端中打开。

然后执行下方命令:

git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c

然后在打开名为 hugo 的 toml源文件,添加主题配置即可。

image-20240705150122474

网站标题修改为myblog,然后再把theme = "m10c"这行代码加进去保存即可。

0a42ab8ed13ee71982e0b7a6baa0a9f

现在,我们在myblog目录下的主题文件夹中就能看到刚才添加的主题文件目录了:

image-20240705150921128

4. 本地访问测试

现在,我们在终端中执行下方代码启动本地网站进行测试:

hugo server

image-20240705154212795

可以看到成功启动,在浏览器中输入 http://localhost:1313/ 即可访问这个本地站点:

image-20240705154313830

可以看到网站标题为myblog,里边有刚才我们发布的第一篇文章Article01:

image-20240705154410789

点击文章标题Article01,即可进入文章页面。

这样我们就成功使用HUGO在Windows本地快速部署了一个静态博客网站。

5. 安装内网穿透工具

目前我们在本机成功部署了一个博客网站,但如果没有公网IP的话,只能在本地局域网环境使用,有一定局限性。如果出差在外想要远程使用的话,可以结合Cpolar内网穿透生成公网地址,免去了本地重新部署过程,只需要使用公网地址直接就可以访问本地部署的网站,进行演示。

下面是安装cpolar步骤:

Cpolar官网地址: https://www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar

img

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

img

6. 配置公网地址

接下来配置一下本地 博客网站 的公网地址,

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个 博客网站 的公网http地址隧道:

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择 http
  • 本地地址:1313
  • 域名类型:免费选择随机域名
  • 地区:选择China VIP

点击创建

image-20240705170358789

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,分别是http和https。

image-20240705170100296

使用任意一个上面Cpolar生成的公网地址,在电脑或任意设备在浏览器进行登录访问,即可成功看到 本地博客网站 界面,这样一个可以远程访问的公网地址就创建好了,使用了Cpolar的公网域名,无需自己购买云服务器,即可在公网访问本地部署的服务了!

image-20240705170122070

7. 配置固定公网地址

我们接下来为其配置固定的HTTP端口地址,该地址不会变化,方便分享给别人长期查看你的本地服务,而无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。本教程中我创建的是二级子域名是 myhugo1,大家可以自定义创建。

image-20240705170557270

返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道 myblog ,点击右侧的编辑:

image-20240705170712922

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

1720170416419

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名:

image-20240705170805460

最后,我们使用固定的公网地址在任何浏览器打开访问,可以看到成功访问 本地博客网站 myblog,这样一个固定且永久不变的二级子域名公网地址就设置好了。

image-20240705170913286
以上就是如何在Windows系统电脑本地使用hugo搭建一个博客网站,并结合cpolar内网穿透工具实现一键发布公网随时随地远程访问的全部流程。另外由于该服务无需账号即可在浏览器直接访问,出于安全考虑,建议大家远程访问时不要轻易与他人分享地址,感谢您的观看,有任何问题欢迎留言交流。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机类期刊横纵向对比

备注:综合影响因子更具针对性,将科技类期刊和人文社科期刊的影响力考虑,更加聚焦于某一特定科学领域;复合影响因子是基于期刊、学位论文、以及会议论文等多个类型的文献作为计算基础。 两者都是通过前两年发表的可被引文献在统计年…

算法重新刷题

基础算法 前缀和 一维前缀和 [USACO16JAN] Subsequences Summing to Sevens S - 洛谷 这一题主要是需要结合数学知识来求解&#xff0c; #include <iostream> #include <cstring> #include <cstdio> #include <algorithm>using namespace std;con…

CANopen协议---PDO使用配置

1、CANopen知识回顾 在上一讲中&#xff0c;已经对CANopen的基本结构和整体内容进行了一番梳理&#xff0c;本笔记主要整理了一下CANopen如何配置PDO&#xff0c;实现数据周期性自动上传和控制信号快速发送等操作。 CANopen协议开发梳理总结笔记教程-CSDN博客文章浏览阅读920次…

uniapp父页面调用子页面 组件方法记录

文章目录 导文如何点击父页面&#xff0c;触发子页面函数先写一个子页面的基础内容父元素 如何点击父页面&#xff0c;修改子页面的值先写一个子页面的基础内容父元素 导文 如何点击父页面&#xff0c;触发子页面函数&#xff1f; 如何点击父页面&#xff0c;修改子页面的值&am…

LVGL移植与VS模拟器使用

一、移植文件介绍 二、移植部分 第一步&#xff1a;创建LVGL文件夹 第二步&#xff1a; 构造LVGL文件夹&#xff1a;LVGL - GUI - lvgl - 第三步&#xff1a;添加文件 3.1 从examples中添加2个.c文件 3.2 从src中添加文件 draw文件 extra文件 第四步&#xff1a; 三、Ke…

WordPress作品设计素材图片站资讯文章教程uigreat主题

主题介绍 uigreat主题是一款wordpress作品主题&#xff0c;发布设计作品素材文章&#xff0c;适合作品展示、设计等站点使用等&#xff0c;这款主题都非常合适。 1、自适应设计&#xff0c;PC、平板、手机等均可正常浏览&#xff1b; 2、图片缩略图可自定义高度&#xff0c;主…

2005-2023年各省居民人均消费支出、城镇居民人均消费支出、农村居民人均消费支出数据(无缺失)

2005-2023年各省居民人均消费支出、城镇居民人均消费支出、农村居民人均消费支出数据&#xff08;无缺失&#xff09; 1、时间&#xff1a;2005-2023年 2、来源&#xff1a;国家统计局、统计年鉴 3、范围&#xff1a;31省 4、指标&#xff1a;全体居民人均消费支出、城镇居…

相位噪声为什么越低越好?

什么是相位噪声&#xff1f; 相位噪声是描述无线电波信号的一种重要参数&#xff0c;它指的是在各种噪声的作用下&#xff0c;系统输出信号相位的随机变化。具体来说&#xff0c;相位噪声可以类比为由于天气原因导致的航班延误&#xff0c;使得航班的起飞和降落时间相对于正常…

废品回收小程序开发,让回收更加便捷

当下随着大众环保意识的提高&#xff0c;废品回收市场得到了快速发展&#xff0c;拥有着巨大的发展空间。在互联网科技的支持下&#xff0c;废品回收行业也迎来了新的发展机遇&#xff0c;从传统的回收模式到线上回收转型&#xff0c;通过数字化发展&#xff0c;为居民带来便利…

智慧党建管理系统源码 党建智能管理系统搭建 含完整带代码包和图文搭建教程

随着信息技术的飞速发展&#xff0c;智慧党建成为新时代党建工作的重要趋势。智慧党建管理系统作为党建信息化的重要载体&#xff0c;不仅提升了党建工作的效率&#xff0c;还增强了党组织的凝聚力和战斗力。分享一个智慧党建管理系统源码&#xff0c;轻松搭建党建智能管理系统…

双链表(数组模拟)

双链表&#xff08;数组模拟&#xff09; 什么是双链表数组模拟双链表题目 什么是双链表 双链表不同于单链表的是 每一个节点不但存储了下一个节点的位置&#xff0c;也存储了上一个节点的位置。 数组模拟双链表 所以如果用数组的话&#xff0c;就需要创建三个数组。 题目 …

【Linux】文件内容查看命令——cat,tac,more,less,head,tail,od

如果我们要查看一个文件的内容时&#xff0c;该如何是好&#xff1f; 这里有相当多有趣的命令可以来分享一下&#xff1a;最常使用的显示文件内容的命令可以说是cat与more及less了。 此外&#xff0c;如果我们要查看一个很大的文件&#xff08;好几百MB时)&#xff0c;但是我们…

数据合并 26-30题(30 天 Pandas 挑战)

数据合并 1. 知识点1.27 左连接1.28 数据填充与交叉连接1.29 获取列值列表 题目2.26 合作过至少三次的演员和导演2.27 使用唯一标识码替换员工ID2.28 学生们参加各科测试的次数2.29 至少有5名直接下属的经理2.30 销售员 1. 知识点 1.27 左连接 datapd.merge(employees,employ…

2024图纸加密软件TOP8排行丨企业保护数据安全最佳选择

图纸往往包含了设计人员的创意和智慧&#xff0c;是企业的重要资产。加密可以防止未经授权的复制、分发或使用&#xff0c;保护设计的原创性和独特性不被侵犯。 许多图纸可能含有公司的商业秘密&#xff0c;比如特定的技术参数、生产流程或是产品设计等。这些信息若泄露给竞争…

美国Facebook直播网络卡顿问题怎么解决?

美国Facebook直播为用户提供了与当地客户、粉丝实时互动的机会&#xff0c;然而&#xff0c;有时由于网络问题&#xff0c;直播可能会出现卡顿现象&#xff0c;影响用户体验。本文将介绍解决美国Facebook直播网络卡顿问题的一种可能解决方案——接入海外直播网络专线。 了解美国…

国内知名源码交易平台及其特点,建议收藏!

​在数字化时代&#xff0c;源码交易平台成为连接开发者与项目需求的重要桥梁。这些平台不仅提供了丰富的源码资源&#xff0c;还促进了技术交流与合作。本文小编将分享介绍几个国内知名的源码交易平台&#xff0c;包括帮企商城、春哥技术博客、86资源网、春哥技术源码论坛以及…

如何选择高性价比的土壤检测仪器?

在现代农业与环保领域&#xff0c;土壤检测仪器的选择显得尤为关键。它不仅关系到土壤养分管理、作物健康生长&#xff0c;还涉及到环境保护和可持续发展。那么&#xff0c;面对市场上琳琅满目的土壤检测仪器&#xff0c;我们该如何选择一款实用的设备呢&#xff1f; 首先&…

智慧安防/智慧工厂/视频分析EasyCVR视频监控汇聚平台如何关闭国标设备的自动检索功能?

安防监控视频融合汇聚平台EasyCVR兼容性强&#xff0c;可支持Windows系统、Linux系统以及国产化操作系统等&#xff0c;平台既具备传统安防视频监控的能力&#xff0c;也具备接入AI智能分析的能力&#xff0c;可拓展性强、视频能力灵活&#xff0c;能对外分发RTMP、RTSP、HTTP-…

用R在地图上绘制网络图的三种方法

地理网络图与传统的网络图不同&#xff0c;当引用地理位置进行节点网络可视化时&#xff0c;需要将这些节点放置在地图上&#xff0c;然后绘制他们之间的连结。Markus konrad的帖子(https://datascience.blog.wzb.eu/2018/05/31/three-ways-of-visualizing-a-graph-on-a-map/)&…

绝地求生PUBG兰博基尼怎么兑换 兰博基尼怎么获得

绝地求生采用虚幻4引擎制作&#xff0c;玩家们会在一个偏远的岛屿上出生&#xff0c;然后展开一场赢家通吃的生存竞赛&#xff0c;最后只会有1个人存活。当然&#xff0c;和其他生存游戏一样&#xff0c;玩家需要在广袤复杂的地图中收集武器、车辆、物资&#xff0c;而且也会有…