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内网穿透工具实现一键发布公网随时随地远程访问的全部流程。另外由于该服务无需账号即可在浏览器直接访问,出于安全考虑,建议大家远程访问时不要轻易与他人分享地址,感谢您的观看,有任何问题欢迎留言交流。

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

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

相关文章

压测引擎数据库设计(上)

压测引擎数据库设计(上) 引言 在当今快速发展的互联网时代,软件质量保证和性能测试变得尤为重要。自动化测试平台,提供了一套完整的解决方案,以确保软件产品在发布前能够满足性能和稳定性的要求。本文将深入探讨滴云自…

启发式防御大模型越狱攻击

前言 在本文中,我们来分析、复现几个典型的启发式的防御工作,用于防御面向大语言模型的越狱攻击。 Self Examination 首先来看Self Examination方法。 这是一种简单的零样本防御LLM攻击的方法,旨在防止用户接触到由LLMs诱导产生的有害或恶…

ROS编译错误: fatal error: test_pkg/test_pkg.h: 没有那个文件

在ROS安装完毕后编译ros工作空间,出现了以下错误: 解决方法: 删除工作空间,重建再重新编译

【数据结构】单链表:数据结构中的舞者,穿梭于理论与实践的舞池

欢迎来到白刘的领域 Miracle_86.-CSDN博客 系列专栏 数据结构与算法 先赞后看,已成习惯 创作不易,多多支持! 一、链表的概念和结构 1.1 链表的概念 在上一篇文章中,我们了解了线性表(linear list),并且学习了其…

你认为最优美的数据结构是什么?

并查集算是,巧妙的不行,让人为之一惊。 在学习数据结构Q的时候,老师多少会提到并查集,他的应用也是超级广泛。本文首先会通过案例来对并查集有一个介绍。然后给出并查集的java实现。 刚好我有一些资料,是我根据网友给…

【Altium】AD-网络版一个用户非人为异常占用多个License的解决方法

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 当出现一个用户同时占用多个授权,又无法单独释放一个授权的情况下,该如何解决。 2、 问题场景 一个用户获取网络版授权后,AD会自动重复获取授权,直到该license下所有授…

怎么给电子文档批量盖骑缝章或公章?

怎么给电子文档批量盖骑缝章或公章?假如你有100个PDF电子文档要同时盖缝章,如果不借助专业的盖电子骑缝章软件,还真不好干。下面讲述如何利用e-章宝批量盖电子骑缝章。 1.在软件中导入待批量盖章的PDF文件 如下图,在“待盖章PDF文件”区域…

后端之路——登录校验

前言:Servlet 【登录校验】这个功能技术的基础是【会话技术】,那么在讲【会话技术】的时候必然要谈到【Cookie】和【Session】这两个东西,那么在这之前必须要先讲一下一个很重要但是很多人都会忽略的一个知识点:【Servlet】 什么是…

redis-cli 连接Redis

Redis-cli介绍 redis-cli 是原生 Redis 自带的命令行工具&#xff0c;您可以在云主机或本地设备上通过 redis-cli 连接 Redis 数据库&#xff0c;进行数据管理。 redis-cli 客户端的使用方法&#xff0c;请参考官方文档。 连接命令 redis-cli -h <redis_instance_address…

【算法笔记自学】第 7 章 提高篇(1)——数据结构专题(1)

7.1栈的应用 #include <iostream> #include <string> #include <stack> using namespace std;int main() {int n, x;string action;cin >> n;stack<int> s;for (int i 0; i < n; i) {cin >> action;if (action "push") {ci…

Qt/C++项目积累: 2.主机监控器 - 2.1 项目介绍

一&#xff1a;项目主体编写背景 在观察程序的运行状态时&#xff0c;其对系统的CPU&#xff0c;内存&#xff0c;硬盘占用无疑是几项重要参考指标&#xff0c;而现有的监控软件&#xff0c;搜索了解到以Zabbix类软件比较出名&#xff0c;其采用标准的SNMP协议的原理来实现监控…

【鸿蒙学习笔记】页面布局

官方文档&#xff1a;布局概述 常见页面结构图 布局元素的组成 线性布局&#xff08;Row、Column&#xff09; 了解思路即可&#xff0c;更多样例去看官方文档 Entry Component struct PracExample {build() {Column() {Column({ space: 20 }) {Text(space: 20).fontSize(15)…

10岁女孩儿童编程规划

目录 1. 背景2. 为什么让她学儿童编程&#xff1f;3. 学习方法&目标4. 整体规划4.1 Python 入门与基础4.1.1 目标4.1.2 学习内容 4.2 C 入门与基础4.2.1 目标4.2.2 学习内容 4.3 算法进阶4.3.1 目标4.3.2 学习内容 4.4 高级编程4.4.1 目标4.4.2 学习内容 4.5 参与编程赛事4…

Java套红:指定位置合并文档-NiceXWPFDocument

需求&#xff1a;做个公文系统&#xff0c;需要将正文文档在某个节点点击套红按钮&#xff0c;实现文档套红 试了很多方法&#xff0c;大多数网上能查到但是实际代码不能找到关键方法&#xff0c;可能是跟包的版本有关系&#xff0c;下面记录能用的这个。 一&#xff1a;添加依…

深入源码,探究#、$号替换符的区别

在Mybatis的日常使用过程中以及在一些技术论坛上我们都能常常听到&#xff0c;不要使用$符号来进行SQL的编写&#xff0c;要使用#符号&#xff0c;否则会有SQL注入的风险。那么&#xff0c;为什么在使用$符号时会有注入的风险呢&#xff0c;以及#号为什么不会有风险呢&#xff…

spark任务,使用 repartition 对数据进行了重新分区,但任务输入数据大小仍存在不均衡

目录 目录 确认 Spark 任务重新分区后的数据不均衡 1. 检查分区大小 2. 使用 DataFrame API 检查分区 3. 使用 Spark UI 查看分区情况 4. 使用日志记录分区信息 可能原因 1. 数据分布不均衡 2. 分区策略 3. 数据预处理 解决方案 1. 检查数据分布 2. 使用 coalesce…

Java反射与Fastjson的危险反序列化

什么是Java反射&#xff1f; 在前文中&#xff0c;我们有一行代码 Computer macBookPro JSON.parseObject(preReceive,Computer.class); 这行代码是什么意思呢&#xff1f;看起来好像就是我们声明了一个名为 macBookPro 的 Computer 类&#xff0c;它由 fastjson 的 parseObje…

工程仪器振弦采集仪的设计与研发进展

工程仪器振弦采集仪的设计与研发进展 工程仪器振弦采集仪是一种用于测量和记录物体振动参数的仪器。它能够实时采集物体的振动信号&#xff0c;并通过内部的传感器将振动信号转化为电信号&#xff0c;然后进行信号放大和处理&#xff0c;最终以数字形式显示或存储。 河北稳控科…

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

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

股票数据分析(K线图、均值图、MACD图、RSI图)--股票日数据

数据 数据是上证指数日行情数据&#xff0c;股票代码000002.sz&#xff0c;原始数据shdata示例如下&#xff1a; 读取数据&#xff1a; import numpy as np import pandas as pd import mplfinance as mpf import matplotlib.pyplot as plt from datetime import datetime imp…