使用hugo+github搭建免费个人博客

news2024/11/15 20:04:11

使用hugo+github搭建免费个人博客

前提条件

  • win11电脑一台
  • 电脑安装了git
  • 电脑安装了hugo
  • github账号一个

个人博客本地搭建

初始化一个博客

打开cmd窗口,使用hugo新建一个博客工程

hugo new site blogtest

下载主题

主题官网:themes.gohugo.io

在上面找一个主题,我这里找名称为m10c 的主题:m10c | Hugo Themes (gohugo.io)

注意:不同主题的安装方式不同,以后再专门写一个文章介绍如何安装复杂主题。本文不使用git add submodule 或者git clone的方式下载主题,因为这个部署到github的时候会有问题,坑已踩过,请紧跟我走。

主题的网站是一个github仓库:vaga/hugo-theme-m10c: A minimalistic (m10c) blog theme for Hugo (github.com),我们需要把它的zip文件下载下来。

下载了zip文件之后,需要在hemes 目录新建一个m10c 的文件夹,然后把zip包里面的内容全部放到m10c 文件夹,放好之后的文件目录是这样的:

在这里插入图片描述

主题应用

在blogtest目录的cmd命令行,输入如下命令:

hugo server -t m10c

其中-t 是指定主题的意思。在浏览器中输入https://localhost:1313 就能访问

修改配置,将m10c 设置为默认主题:

参考E:\HugoProject\blogtest\themes\m10c\exampleSite\config.toml 的配置,修改E:\HugoProject\blogtest\hugo.toml 为如下

baseURL = 'https://lishuangquan1987.github.io/'
languageCode = 'en-us'
title = 'Tony Blog'
theme = 'm10c'
paginate = 8

[menu]
  [[menu.main]]
    identifier = "home"
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    identifier = "tags"
    name = "Tags"
    url = "/tags/"
    weight = 2
  [[menu.main]]
    identifier = "about"
    name = "About"
    url = "/about/"
    weight = 3

[params]
  author = "Tony"
  description = "familiar with c#,go,lua,vb6"
  menu_item_separator = "  ·  "
  [[params.social]]
    icon = "circle"
    name = "CSDN"
    url = "https://blog.csdn.net/lishuangquan1987"
  [[params.social]]
    icon = "github"
    name = "Github"
    url = "https://github.com/lishuangquan1987"
  

  # Default theme
  #[params.style]
  #  darkestColor = "#242930"
  #  darkColor = "#353b43"
  #  lightColor = "#afbac4"
  #  lightestColor = "#ffffff"
  #  primaryColor = "#57cc8a"

  # Green theme
  #[params.style]
  #  darkestColor = "#315659"
  #  darkColor = "#253031"
  #  lightColor = "#96a879"
  #  lightestColor = "#fff"
  #  primaryColor = "#dad865"

  # Red theme
  #[params.style]
  #  darkestColor = "#d35050"
  #  darkColor = "#212121"
  #  lightColor = "#d6d6d6"
  #  lightestColor = "#d3d3d3"
  #  primaryColor = "#ffffff"

其中几个比较重要的配置:

  • theme=m10c 指定默认主题
  • baseUrl=https://lishuangquan1987.github.io/ 这个后面将网站部署到github会用到

此时。我们再使用如下命令启动:

hugo server

在浏览器中发现能启动,且主题的文字发生变化。

新建一个文章

使用如下命令,可以新建一个文章:

hugo new post/k8s集群简单搭建.md

这时,我们直接运行hugo server 命令,发现不能看到文章,需要编辑k8s集群简单搭建.md:

+++
title = ‘K8s集群简单搭建’
date = 2023-10-05T12:32:30+08:00
draft = true
+++

其中有个draft=true 表示草稿的意思,将它去掉之后,就能看到文章了。往文章里面填写markdown 语法的内容即可

将博客部署到github

在github上新建仓库

在github上新建一个名称为 {用户名}.github.io的仓库。例如我的github用户名是lishuagnquan1987 ,那么我新建仓库名称为lishuagnquan1987.github.io

编译本地项目

E:\HugoProject\blogtest> 的命令行中输入如下命令:

hugo

即可编译项目,编译之后,发现生成了public文件夹

推送本地项目到github

E:\HugoProject\blogtest> 的命令行中输入如下命令:

  • 初始化git仓库

    git init
    
  • 添加远程仓库

    git remote add origin https://github.com/lishuangquan1987/lishuangquan1987.github.io.git
    
  • 暂存本地修改

    git add .
    
  • 提交本地修改

    git commit -m "first commit"
    
  • 提交本地修改到远程

    git push --set-upstream origin master
    

设置github仓库

在仓库主界面,点击Settintgs:

在这里插入图片描述

进入设置界面,点击左侧导航栏的Pages:

请添加图片描述

Build and deployment->Source中选择GitHub Actions:

在这里插入图片描述

点击browse all workflows:

在这里插入图片描述

然后搜索 hugo,找到hugo之后点击configure按钮:

在这里插入图片描述

它会自动在lishuagnquan1987.github.io/.github/workflows目录下新建一个hugo.yml文件

这时候,我们不需要修改任何东西,直接点击右侧的Commit changes 按钮提交修改即可:

在这里插入图片描述

此时,可以看到github正在构建你的项目:

在这里插入图片描述

等构建完毕之后,可以输入地址:http://lishuagnquan1987.github.io来访问你的博客啦:

在这里插入图片描述

注意:需要将新建的hugo.toml文件同步到本地,否则后续修改会造成冲突

git pull

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

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

相关文章

快手直播显示请求过快

快手直播显示请求过快 问题描述情况一问题描述原因分析解决方案:情况二问题描述解决方法问题描述 在使用快手直播网页版时,如果我们的请求过于频繁,系统可能无法及时显示所需内容。这种情况下,我们会收到一个稍后重试的提示。一般有两种情况。一种是直接返回一段json,里面…

园林园艺服务经营小程序商城的作用是什么

园林园艺属于高单价服务,同时还有各种衍生服务,对企业来说,多数情况下都是线下生意拓展及合作等,但其实线上也有一定深度,如服务售卖或园艺产品售卖等。 基于线上发展可以增强获客引流、品牌传播、产品销售经营、会员…

云原生微服务 第六章 Spring Cloud中使用OpenFeign

系列文章目录 第一章 Java线程池技术应用 第二章 CountDownLatch和Semaphone的应用 第三章 Spring Cloud 简介 第四章 Spring Cloud Netflix 之 Eureka 第五章 Spring Cloud Netflix 之 Ribbon 第六章 Spring Cloud 之 OpenFeign 文章目录 系列文章目录前言1、OpenFeign的实现…

mybatis-plus控制台打印sql(mybatis-Log)

配置了mybatis-plus.configuration.log-implorg.apache.ibatis.logging.stdout.StdOutImpl;但是mybatis执行的sql没有输出 需要检查点: 1、日志级别设置:请确保你的日志级别配置正确。如果日志级别设置得太低,可能导致SQL语句不…

软件工程与计算总结(四)项目管理基础

目录 一.项目和项目管理 二.团队组织与管理 三.软件质量保障 四.软件配置管理 五.项目实践 一.项目和项目管理 1.软件开发远不是纯粹的编程,随着软件规模的增长,软件开发活动也变得越来越复杂~ 2.软件项目就是要将所有的软件开发活动组织起来&#…

云原生Kubernetes:K8S集群kubectl命令汇总

目录 一、理论 1.概念 2. kubectl 帮助方法 3.kubectl 子命令使用分类 4.使用kubectl 命令的必要环境 5.kubectl 详细命令 一、理论 1.概念 kubectl是一个命令行工具,通过跟 K8S 集群的 API Server 通信,来执行集群的管理工作。 kubectl命令是操…

嵌入式Linux裸机开发(一)基础介绍及汇编LED驱动

系列文章目录 文章目录 系列文章目录前言IMX6ULL介绍主要资料IO表现形式 汇编LED驱动原理图初始化流程时钟设置IO复用设置电气属性设置使用GPIO 编写驱动编译程序编译.o文件地址链接.elf格式转换.bin反汇编(其他) 综合成Makefile完成一步编译烧录程序imx…

分词.join 保存txt

要求 分词.join 保存txt 第1种方法 分词.join 保存txt input多行文本 /storage/emulated/0/数据中心/txt没有就新建为什么会想到这么做 1. 是因为有分词文件📄要处理 2. 对各种词语和线索进行分类 3. 解释一下生活中不常见的现象,但是深刻的符合社会…

十月四日作业

1、服务器 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer> //服务器头文件 #include <QTcpSocket> //客户端头文件 #include <QList> //链表容器 #include <…

基于混合蛙跳优化的BP神经网络(分类应用) - 附代码

基于混合蛙跳优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于混合蛙跳优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.混合蛙跳优化BP神经网络3.1 BP神经网络参数设置3.2 混合蛙跳算法应用 4.测试结果…

全屋灯具选购指南,如何选择合适的灯具。福州中宅装饰,福州装修

灯具装修指南 灯具就像我们家里的星星&#xff0c;在黑暗中带给我们明亮&#xff0c;可是灯具如果选择的不好&#xff0c;这个效果不仅体现不出来&#xff0c;还会让人觉得烦躁。 灯具到底该怎么选呢&#xff1f;装修灯具有哪些注意事项呢&#xff1f;给大家做了一个总结&#…

集群服务器

文章目录 项目名:实现集群服务器技术栈通过这项目你学到(或者复习到)实现功能编码环境json环境muduo库boost库MySql数据库登录mysql&#xff1a;查看mysql服务开启了没有&#xff1f;mysql的服务器及开发包库chat&#xff0c;表 allgroup friend groupuser offlinemessage user…

【吞噬星空】第四季出现技术事故,巴巴塔变秃头,提升质量成笑话

Hello,小伙伴们&#xff0c;我是小郑继续为大家深度解析国漫资讯。 《吞噬星空》动画第四季复播了&#xff0c;而且还是连播两集&#xff0c;不少粉丝都表示这次看爽了&#xff0c;不过在看爽了的同时&#xff0c;这一季的不少细节也引起了大家广泛的关注和讨论。这部动画作品以…

引入短信服务

一、阿里云短信服务 进入阿里云平台&#xff0c;然后选择短信服务&#xff0c;通过API发送短信(需要充值金额&#xff0c;几块钱就可以&#xff0c;我们仅仅是小规模项目) 找到openAPI 可以看到Java语言的代码模板&#xff0c;这个就是Java SendSMS短信服务的代码 创建Accessk…

电机-电力拖动-振动-应力分析-设备防护知识初步

1.涉及领域和课程&#xff1a; 信号与系统现代自动化原理与应用频谱转换及振动分析材料学基础与应力分析数学建模、仿真与求解工程数学传感器机器学习与模式识别随机信号处理反馈系统文献学DSP应用机器视觉凸优化&#xff0c;数学物理方法 2.教材推荐 豆瓣书单&#xff0c;更…

【云备份项目】【Linux】:环境搭建(g++、json库、bundle库、httplib库)

文章目录 1. g 升级到 7.3 版本2. 安装 jsoncpp 库3. 下载 bundle 数据压缩库4. 下载 httplib 库从 Win 传输文件到 Linux解压缩 1. g 升级到 7.3 版本 &#x1f517;链接跳转 2. 安装 jsoncpp 库 &#x1f517;链接跳转 3. 下载 bundle 数据压缩库 安装 git 工具 sudo yum…

很普通的四非生,保研破局经验贴

推免之路 个人情况简介夏令营深圳大学情况机试面试结果 预推免湖南师范大学面试结果 安徽大学面试结果 北京科技大学笔试面试结果 合肥工业大学南京航空航天大学面试结果 暨南大学东北大学 最终结果一些建议写在后面 个人情况简介 教育水平&#xff1a;某中医药院校的医学信息…

英语——分享篇——每日100词——601-700

disastrous——adj.灾难性的&#xff0c;完全失败的——disast(e)r灾难(熟词)ous藕丝(拼音)——灾难性的地震后大家只能吃藕丝 disorder——n.骚乱&#xff0c;混乱&#xff1b;vt.使失调——dis的士(谐音)order命令(熟词)——的士司机命令我稳住那场骚乱 distract——vt.转移…

C++设计模式-工厂模式(Factory Method)

目录 C设计模式-工厂模式&#xff08;Factory Method&#xff09; 一、意图 二、适用性 三、结构 四、参与者 五、代码 C设计模式-工厂模式&#xff08;Factory Method&#xff09; 一、意图 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类。Factory…

华为云云耀云服务器L实例评测使用 | 通过程序实现直播流自动分段录制

华为云云耀云服务器L实例评测使用 | 通过程序实现直播流自动分段录制 1. 准备工作2. 环境搭建3. 心得总结 1. 准备工作 随着云计算时代的进一步深入&#xff0c;越来越多的中小企业企业与开发者需要一款简单易用、高能高效的云计算基础设施产品来支撑自身业务运营和创新开发。基…