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

文章目录

    • 前言
    • 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.xdnf.cn/news/1475284.html

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

相关文章

量产工具一一UI系统(四)

前言 前面我们实现了显示系统框架,输入系统框架和文字系统框架,链接: 量产工具一一显示系统(一)-CSDN博客量产工具一一输入系统(二)-CSDN博客量产工具一一文字系统(三)…

前端面试题23(css3)

关于CSS3的面试题,我们可以从多个维度来探讨,包括但不限于选择器、盒模型、布局技术、动画与过渡、响应式设计等。下面我会列举一些典型的CSS3面试问题,并尽可能提供详细的解答或示例代码。 1. CSS3中新增了哪些选择器? 答案: C…

医院、体育场、学校或工厂等的同步时钟系统有什么区别?

在现代社会中,同步时钟系统在医院、体育场、学校和工厂等场所发挥着至关重要的作用。尽管它们的基本功能都是提供准确统一的时间,但由于各场所的性质和需求不同,其同步时钟系统在诸多方面存在显著区别。 一、医院同步时钟系统 医院作为救死扶…

selenium处理cookie问题实战

1. cookie获取不完整 需要进入的资损平台(web)首页,才会出现有效的ctoken等信息 1.1. 原因说明 未进入指定页面而获取的 cookie 与进入页面后获取的 cookie 可能会有一些差异,这取决于网站的具体实现和 cookie 的设置方式。 通常情况下,一些…

镜舟科技:国产数据库角逐金融赛道,开年斩获数家银行订单

在国产数据库领域,镜舟科技正迅速崛起,成为一匹瞩目的基础数据技术黑马。 开年伊始,镜舟科技便成功斩获中信银行、南京银行、某股份制银行、某头部民营银行、某大型综合类券商以及某消费金融公司等多家金融企业订单,其锚定需求匹…

C++ | Leetcode C++题解之第216题组合总和III

题目&#xff1a; 题解&#xff1a; class Solution { private:vector<vector<int>> res;void backtracking(int k, int n, vector<int> ans){if(k 0 || n < 0){if(k 0 && n 0){res.emplace_back(ans);}return;}int start (ans.size() 0 ?…

30万的剧本杀店 被“好色”店长玩死了

文&#xff5c;琥珀食酒社 作者 | 朱珀 对开店搞钱的人来讲 什么才是最苦逼的&#xff1f; 不是一开始生意就不行 而是刚开始好到不行 最后只剩下不行 本期投稿的主人公糊糊 就是这样的 苦逼大BOSS 30万开剧本杀店 短短几个月 从巅峰跌到谷底 被捞钱又好色的猪队友…

代码随想录算法训练营第67天:图论5[1]

代码随想录算法训练营第67天&#xff1a;图论5 ‍ 105.有向图的完全可达性 卡码网题目链接&#xff08;ACM模式&#xff09;(opens new window) 【题目描述】 给定一个有向图&#xff0c;包含 N 个节点&#xff0c;节点编号分别为 1&#xff0c;2&#xff0c;…&#xff0…

ICC2:ignore pin的设置

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 相关文章链接:

项目:简易Mybatis

目录 一、新建项目 二、新建模块 三、回顾JDBC 四、准备环境 五、使用dom4j解析xml文件 六、开始,编写Mapper解析API 1、自定义Resources类 2、定义Configuration类 3、定义MappedStatement类 4、定义XmlMapperBuilder类 5、更新一下UserMapper.xml和UserMapper接口 …

Redis基础教程(十六):Redis Stream

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

读书记录《SQL从小白到大牛》01

读书记录《SQL从小白到大牛》01 接地气的书名&#xff0c;内容应当值得一读。 第一篇 SQL基础 01 一些基础概念 SQL是结构化查询语言&#xff08;Structured Query Language&#xff09;&#xff0c;是一套用来输入、更改和查看关系数据库内容的命令。数据库发展经历三个阶…

SMA 内孔 弯头——KH-SMA-K513-G

品  牌&#xff1a; kinghelm(金航标) 厂家型号&#xff1a; KH-SMA-K513-G 封装&#xff1a; 插件 商品毛重&#xff1a; 2.86克(g) 包装方式&#xff1a; 袋装

使用Mybatis批量插入大量数据的实践

前言 在项目开发过程中&#xff0c;我们经常会有批量插入的需求&#xff0c;例如&#xff1a;定时统计任务 但是受限于MySQL中 max_allowed_packet 参数限制&#xff0c;5.7版本默认值为4M&#xff0c;这显然不太符合我们的需求&#xff0c;当然我们也可以通过修改此值来适应…

【Unity几种数据存储之间的区别】PlayerPrefs、Json、XML、二进制、SQLite数据存储之间的优缺点以及如何选择

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 专栏交流&#x1f9e7;&…

Meta关于深度学习推荐系统的Scaling Law的研究

作者 | 番茄爱鸡蛋 整理 | NewBeeNLP https://zhuanlan.zhihu.com/p/688913185 大家好&#xff0c;这里是 NewBeeNLP。今天看看 Meta 关于深度学习推荐系统 Scaling Law 的研究。 零、论文信息 论文题目&#xff1a;Wukong: Towards a Scaling Law for Large-Scale Recommend…

更好的预测方法:使用前后控制图

我已经写了很多关于阶段控制图的文章&#xff0c;因为我认为它们是一个非常好的可视化工具。它们有许多用途而且很容易创建。除了有助于分析改进或变更前后的流程之外&#xff0c;它们还是更准确预测或预报的重要第一步。 不同的预测方式或用不同的方法预测 有很多不同的方法…

硅纪元视角 | Speak火了!3个月收入翻倍,OpenAI为何频频下注?

在数字化浪潮的推动下&#xff0c;人工智能&#xff08;AI&#xff09;正成为塑造未来的关键力量。硅纪元视角栏目紧跟AI科技的最新发展&#xff0c;捕捉行业动态&#xff1b;提供深入的新闻解读&#xff0c;助您洞悉技术背后的逻辑&#xff1b;汇聚行业专家的见解&#xff0c;…

信息技术课堂上如何有效防止学生玩游戏?

防止学生在信息技术课堂上玩游戏需要综合运用教育策略和技术手段。以下是一些有效的措施&#xff0c;可以用来阻止或减少学生在课堂上玩游戏的行为&#xff1a; 1. 明确课堂规则 在课程开始之初&#xff0c;向学生清楚地说明课堂纪律&#xff0c;强调不得在上课时间玩游戏。 制…

【十八】【QT开发应用】标签页QTabWidget的常见用法

#include "widget.h" // 包含自定义的widget头文件 #include <QHBoxLayout> // 包含QHBoxLayout头文件&#xff0c;用于水平布局 #include <QTabWidget> // 包含QTabWidget头文件&#xff0c;用于创建标签页控件 #include <QDebug> // 包含QDebug头…