【24年7月】最新Hexo+GitHubPages搭建个人博客【一】

news2024/12/30 3:33:56

Hexo 是一个高效的静态网站生成器,使用简洁的 Markdown(或其他模板引擎)编写内容,支持丰富的插件和主题,允许用户轻松定制网站。它通过将文本转换为静态HTML页面,使得网站加载速度快,易于部署,同时支持多平台发布,非常适合创建博客、文档或个人网站。本文将介绍如何使用Hexo搭建个人博客并且将博客文章免费放到github上。

1. 安装环境

本机是Windows 10 专业版,此教程适用于Windows10, Windows11各版本。

Hexo是基于Node.js的框架,同时我们要用到git进行部署。

软件需求:

  • Node.js官网 (nodejs.org)
  • Git官网 (git-scm.com)

软件安装教程

  • Node.js图文安装教程
  • Git图文安装教程

2. 本地搭建Hexo环境

官网地址:Hexo

2.1 新建blog文件夹

在电脑硬盘上任意位置新建存放blog文件的文件,例如d:\blog。本文将以d:\hexo_blog文件夹来演示如何搭建环境,同学可以根据你自己的情况建立文件夹。

image-20240720183516792

2.2 使用Git Bash初始化环境

进入此文件夹,在任意空白处点击右键,在右键菜单中选择Open Git Bash here,打开Git Bash窗口。如果右键菜单中无此选项,请检查环境搭建是否成功。Git图文安装教程

image-20240720183713667

image-20240720183803879

打开之后输入以下命令修改npm的源为阿里的源:

npm config set registry https://registry.npmmirror.com

image-20240720184251099

执行完成之后,输入以下命令一键安装hexo

npm install hexo-cli -g

image-20240720184400504

完成之后再依次执行以下命令并回车,启动初始化并安装组件:

hexo init
npm install

命令执行完毕之后,文件夹里会增加类似以下的文件目录,安装完成。

image-20240720184616976

可能遇到的问题:

输入hexo init后,可能卡在INFO Install dependencies不动,此时需按下Ctrl+C停止此命令,继续输入npm install即可。

2.3 启动Hexo服务

安装完成之后,在hexo博客目录下执行以下命令开启Hexo服务(默认情况下,访问网址为: http://localhost:4000/):

hexo server

或者缩写方式

hexo s

见到如下图界面表名Hexo服务启动成功。打开浏览器输入http://localhost:4000/即可看到博客预览界面。

image-20240720185047599

启动过程中如果出现Windows安全中心警报,需要点允许访问

image-20240720184948432

image-20240720185232052

恭喜,Hexo服务启动成功!!!其他详细设置,可参考官方文档继续完善。

3. 部署到GitHub Pages

3.1 创建GitHub仓库

登录GitHub账号之后新建一个仓库,仓库名为用户名.github.io,这里的用户名替换为你自己GitHub上的用户名。

比如你的用户名是ABc123,新建的仓库名就是abc123.github.io

没有Github账号的同学可以参考教程注册。

image-20240720190324263

创建时,选择Public类型。勾选Add a README file来创建默认的main分支。 仓库名为用户名.github.io。填写完毕之后点击Create repository按钮完成创建。

image-20240720200239254

3.2 为GitHub账号设置ssh

3.2.1 设置本地git账号

在刚才的Git Bash窗口中输入以下命令并回车,将其中你的GitHub信息替换掉。

git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

3.2.2 本地创建ssh密钥文件

Git Bash窗口中输入以下命令并回车,注意替换其中的邮箱。接下来的3个输入的地方直接输入回车即可,不用设置密码

ssh-keygen -t rsa -C "你的GitHub注册邮箱"

image-20240720194945954

生成之后,去当前用户名的文件夹下的.ssh文件夹中找到id_rsa.pub密钥文件,用文本编辑器打开并复制其内容

当前用户名的文件一般是C:\Users\Administrator\.ssh,如果当前系统用户不是Administrator,只需要把Administrator换成你的用户名即可。

3.2.3 在GitHub新建ssh key

回到浏览器,在github的页面中点击右上角的用户头像按钮,在弹出的菜单中选择Settings功能。

image-20240720195543240

image-20240720195615651

在新页面中点击左侧菜单中的SSH and GPG keys按钮进入SSH keys设置页面。

image-20240720200142128

点击页面右侧的New SSH key按钮,新增ssh key

image-20240720195913154

在新页面中如下图填写并点击按钮保存。

image-20240720200037212

在Git Bash中检测GitHub公钥设置是否成功,输入以下命令

ssh git@github.com

image-20240720200442686

如上则说明成功。这里之所以设置GitHub密钥原因是,通过非对称加密的公钥与私钥来完成加密,公钥放置在GitHub上,私钥放置在自己的电脑里。GitHub要求每次推送代码都是合法用户,所以每次推送都需要输入账号密码验证推送用户是否是合法用户,为了省去每次输入密码的步骤,采用了ssh,当你推送的时候,git就会匹配你的私钥跟GitHub上面的公钥是否是配对的,若是匹配就认为你是合法用户,则允许推送。这样可以保证每次的推送都是正确合法的。

3.3 将博客部署到GitHub

在刚才的Git Bash窗口中输入以下命令,安装hexo-deployer-git插件:

npm install hexo-deployer-git --save

image-20240720192207823

打开博客文件夹中的_config.yml文件,找到其中deploy的部分并更改deploy的内容,用户名替换为自己的github用户名,修改完成之后保存并关闭该文件。

deploy:
  type: 'git'
  repo: git@github.com:用户名/用户名.github.io.git
  branch: main

回到Git Bash窗口,输入以下命令生成静态文件:

hexo g

上传到GitHub

hexo d

![image-20240720193321657](https://mvkersc.oss-cn-beijing.aliyuncs.com/image-20240720193321657.png

image-20240720200620785

恭喜你已经成功配置好了ssh连接GitHub,并已经把生成的静态页面上传github成功了。

接下来可以在浏览器中打开**https://用户名.github.io**查看你的博客效果,快去试一下吧。

image-20240720200938247

另外,对以下内容感兴趣的同学请移步对应教程:

ChatGPT-4o 升级教程

Onlyfans-注册以及充值、订阅教程

【一看就会】五分钟完成MidJourney订阅

Poe会员开通教程

【新手必读】2024最新Fantia注册与支付指南

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

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

相关文章

Linux操作系统的有关常用的命令

1.linux系统的概述 1.1 什么是Linux系统? Linux,全称GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统,其内核由林纳斯本纳第克特托瓦 兹(Linus Benedict Torvalds)于1991年10月5日首次发布,它主要受…

塔子哥的题解点赞方案-美团2023笔试(codefun2000)

题目链接 塔子哥的题解点赞方案-美团2023笔试(codefun2000) 题目内容 塔子哥写了 n 篇题解,编号从 1 到 n,但是塔子哥忘了每篇题解有多少人点赞了。 现在他有如下两种信息: 1、每篇题解的点赞量都为正数,且不超过 m。 2、第 i 篇…

2024LitCTFmisc复现

secret 这首音乐好听,听完了,中间有段杂音 去AU看看 中间有一段藏了东西,放大 出flag了 flag{Calculate_Step_By_Step} 原铁,启动! 解压出来是一张二维码 扫出来是原神 去010看看 看到有压缩包,提取出来 …

关于集成网络变压器的RJ45网口

集成网络变压器的RJ45网口是一种将网络变压器与RJ45接口集成在一起的网络连接解决方案。这种集成设计具有多项优势,使其在现代网络设备中得到广泛应用。 优势与特点 1. **空间节省**:集成设计减少了组件数量和连接线缆长度,有助于节省设备内…

Adobe Premiere Pro(Pr)安装包软件下载

一、简介 Adobe Premiere Pro(简称Pr)是由Adobe公司开发的一款功能强大的视频编辑软件。它支持多平台使用,包括Windows和Mac系统,并且拥有良好的兼容性和高效的性能。Premiere Pro不仅提供了视频剪辑、特效添加、音频处理等基本功…

监控易V7.6.6.15全新升级14:设置功能全面优化

随着企业IT架构的不断发展,对运维管理的需求也日益增加。为了满足广大用户对运维管理的更高需求,监控易系统近期完成了一次重要版本升级。本次升级在原有功能的基础上,对设置功能进行了全面优化和新增,旨在为用户提供更加灵活、高…

系统架构师(每日一练5)

每日一练 1.某企业准备将四个工人甲、乙、丙、丁分配在A、B、C、D四个岗位。每个工人由于技术水平不同,在不同岗位上每天完成任务所 需的工时见下表。适当安排岗位,可使四个工人以最短的总工时()全部完成每天的任务。答案与解析 ABCD甲7523乙9437丙547…

【每日一练】python编写一个简易计算器

程序代码: #循环语句,条件为真所以循环执行 while True: #定义两个数的变量和运算符号 num1 float(input("第一个数:")) num2 float(input("第一个数:")) syminput("选择运算符 - * /:") #判断运算符号 …

《python语言程序设计》第6章2题(求一个整数各个数字的和)编写一个函数

求一个整数各个数字的和编写一个函数,计算一个整数各个数字的和, def sumDigits(n):a n // 100b n % 100 // 10c n % 100 % 10print(f"{n}数,分成个,十,百,{a}{b}{c}", a b c)sumDigits(23…

算法类学习笔记 ———— 红绿灯检测

文章目录 介绍基于传统视觉方法的检测基于颜色和边缘信息基于背景抑制 基于深度学习的检测特征金字塔网络(FPN)红绿灯检测特征金字塔自下而上自上而下横向连接 特征融合SSD红绿灯检测 高精度地图结合 介绍 红绿灯检测就是获取红绿灯在图像中的坐标以及它…

73.如何通过自开发的T-CODE找到源代码

目录 步骤1,利用SAP的事务代码表(‌TSTC)‌-SE16 步骤2,查询源代码 方法1 - SE80 方法2 - SE38 步骤1,利用SAP的事务代码表(‌TSTC)‌-SE16 通过输入特定的事务代码(‌tcode&am…

web前端学习笔记Day02

web学习Day02 一、页面布局 盒子模型 盒子将页面的所有标签都包含在了一个矩形区域content(内容区域)->padding(内边距区域)->border(边框区域)->margin(外边距区域) div标签: 一行只能显示一个(独占一行)width默认为父元素宽度&#xff0c…

CV每日论文--2024.7.22

1、GroupMamba: Parameter-Efficient and Accurate Group Visual State Space Model 中文标题:GroupMamba:参数高效且准确的群体视觉状态空间模型 简介:我们的论文探讨了基于状态空间模型(SSM)在计算机视觉任务中的稳定性和效率挑战。最近,S…

英语语法第六课之介词

文章目录 1、作用2、分类3、意思4、易混地点on、in、at时间on、in、at方位on、in、to时间after、in时间 since、forin the front of、in front ofby、in、withthrough、across、overunder、below、beneathin、into 5、搭配 1、作用 句子中用法 定语The method of success.&…

创建和管理大量的数据对象:ScriptableObject

一、创建一个继承自ScriptableObject,名为ItemData的类 1、ItemData.cs using UnityEngine;[CreateAssetMenu(menuName "Items/Item")] public class ItemData : ScriptableObject {public string description;public Sprite thumbnail;public GameObj…

十五、公开课

1.不借助第三个变量,交换两个变量的值。 (1)a ab; (2)a a^b; b a-b; b a^b; a a-b; …

Unity UGUI 之 Image和Rawimage

本文仅作学习笔记与交流,不作任何商业用途 本文包括但不限于unity官方手册,唐老狮,麦扣教程知识,引用会标记,如有不足还请斧正 1.Image是什么 Unity - 手册:图像 精灵格式是什么? 1.2重要参数 …

操作系统安全:Windows隐藏账户的安全问题与实战操作。

「作者简介」:冬奥会网络安全中国代表队,CSDN Top100,就职奇安信多年,以实战工作为基础著作 《网络安全自学教程》,适合基础薄弱的同学系统化的学习网络安全,用最短的时间掌握最核心的技术。 Windows系统的…

个人简约低调主页,三种主题风格源码

一、源码描述 这是一款简约低调的个人主页源码,提供了数百个精美的动画效果,拥有完美的视觉体验和交互体验,可操作性也达到了巅峰,源码支持三种主题风格,白色、黑色和蓝色渐变,所有这些效果都是通过原生Ja…

文件IO(Ubuntu)

文件IO 目的 将数据写入文件中 与标准IO的区别 (为什么要学习文件IO) 标准IO只能操作普通文件和特殊的管道文件 文件IO能操作几乎所有的的文件 缓存区的目的 标准IO有缓存区 文件IO没有缓存区 根据右图描述 标准IO 文件IO buffer缓存区 有缓存区…