使用hexo+github搭建个人博客

最新推荐文章于 2024-06-11 02:45:00 发布
最新推荐文章于 2024-06-11 02:45:00 发布
阅读量257 收藏
点赞数 1
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AlienEowynWan/article/details/113743545
版权
本文详述了使用Hexo和GitHub搭建个人博客的全过程，包括GitHub账号注册、Git配置、Node.js安装、Hexo框架的使用、本地博客的运行与部署、主题配置、搜索引擎优化等关键步骤，旨在帮助读者快速建立自己的博客空间。
摘要由CSDN通过智能技术生成

之前实验室布置的任务，记录一下踩坑的过程,也参考了许多师傅的博客，在此感谢

一.GitHub篇

申请账号

首先需要有一个Github账号，直接官网注册就OK啦。
注册完成后需要新建一个仓库，仓库的命名就是用户名.github.io例如，我的用户名是nor-ming，我的仓库就叫nor-ming.github.io，这样方便让大家访问
在这里插入图片描述
注意：

  • 注册的邮箱需要验证，不要乱写
  • 仓库创建成功可能不会立即生效，需要等一会
    创建成功之后你可以在这里看到你的仓库
    在这里插入图片描述
    此时访问用户名.github.io能够看见你之前建仓库时候README里面的内容，像这样
    在这里插入图片描述
下载git

安装参考这个吧
安装完成后要配置环境变量：
网上说在Path变量中增加： C:\Program Files (x86)\Git\bin （你git实际安装的bin路径）
我好像是这样的（真的不记得了啊啊啊啊啊
在这里插入图片描述
在这里插入图片描述
验证是否配置成功，打开windows命令行，输入git命令，出现下列信息表示配置成功。
在这里插入图片描述

为仓库配置SSH-Key

GitHub上连接已有仓库是通过SSH公开密钥认证方式进行的，所以我们需要配置密钥。
打开Git BASH，运行命令

ssh-keygen -t rsa -C "邮件地址"

“邮件地址”写成在创建GitHub账户时候用的邮箱地址。然后连续回车三次（它会要求你设置密码，可以不设置直接回车就好了）
最终，它会生成一个文件，如图
在这里插入图片描述
记事本打开id_rsa.pub，复制里面的内容，在你的GitHub主页的设置中找到如下选项
在这里插入图片描述
点击New SSH key
名称随便起，Title粘贴复制内容，添加成功后，邮箱会收到提示邮件
在Git Bash中测试，输入命令

ssh -T git@github.com

在这里插入图片描述
如图所示即为设置成功
有的博客说还要配置Git信息，个人不太记得了，不放心可以试试，也是在Git Bash中

git config --global user.name "用户名"
git config --global user.email  "用户名@gmail.com"

二.Node.js篇

首先在自己的电脑上安装 Node.js，下载地址
安装完毕之后，配置环境变量
在这里插入图片描述
应该是这两个吧，在Path里面添加
测试
在这里插入图片描述
有的时候可能使用Git Bash会很慢，此时可以选择切换镜像（但是个人感觉还好，一般不建议换掉）
切换命令：

npm config set registry http://registry.npm.taobao.org/

查看版本命令：

npm get registry

切回官方镜像：

npm config set registry http://www.npmjs.org

三.Hexo篇

Hexo是一个博客框架，Hexo 官方还提供了一个命令行工具，用于快速创建项目、页面、编译、部署 Hexo 博客，所以在这之前我们需要先安装 Hexo 的命令行工具。

npm install -g hexo-cli

安装完毕之后，配置环境变量
在path变量中添加类似如下的地址，注意最后是.bin文件

C:\ProgramFiles\nodejs\node_global\node_modules\hexo\node_modules.bin

测试
在这里插入图片描述
使用命令

hexo init {name}

新建一个文件夹，这个文件夹会是你以后管理博客用的，{}中填名字，运行之后找到该文件夹，会发现文件夹中出现了这样一些文件
在这里插入图片描述
在这里打开Git Bash，输入命令

hexo generate

将 Hexo 编译生成 HTML 代码，
可以看到输出结果里面包含了 js、css、font 等内容，并发现他们都处在了项目根目录下的 public 文件夹下面了。

此时，可以利用Hexo 提供的 serve 命令把博客在本地运行起来

hexo serve

将项目成功运行在本地的4000端口上，浏览器访问http://localhost:4000： 即可看到空的博客页面

四.部署完善篇

只能在本地访问自然时不合适的，下面我们将要做的是将博客部署到 GitHub Pages 并完善它

记事本打开根目录下的 _config.yml 文件
在这里插入图片描述找到 Deployment 这个地方，把刚才新建的 Repository 的地址贴过来，然后指定分支为 main 分支，最终修改为如下内容：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/Nor-ming/Nor-ming.github.io
  branch: main

这里需要注意，更新之后的win10可能并不能识别这个url，如果不可以，可以把repo改成
repo: git@github.com:Nor-ming/Nor-ming.github.io
还需要额外安装一个支持 Git 的部署插件，名字叫做hexo-deployer-git，有了它我们才可以顺利将其部署到 GitHub 上面，如果不安装的话，在执行部署命令时会报如下错误

Deployer not found: git

这是由于版本不同造成的，可以使用如下命令安装插件

npm install hexo-deployer-git --save

安装成功后，执行部署命令：

hexo d

访问自己的博客网址，就可以看到和本地一样的内容了

我们还可以修改自己的站点信息
修改根目录下的 _config.yml 文件，找到 Site 区域，这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容，比如我的就修改为如下内容：

# Site
title: Nor-ming
subtitle: ''
description: ''
keywords:
author: Alien Wan（924704640@qq.com)
language: zh-CN
timezone: Asia/Shanghai

它们在我的网页中的显示是这样的
在这里插入图片描述
原来的主题太普通，我们可以换一个主题，下载Next主题并选择自己喜欢的
首先命令行进入到项目的根目录（对我来说救赎被我命名为Norming的文件夹），执行如下命令即可：

git clone https://github.com/theme-next/hexo-theme-next themes/next

执行完毕之后 Next 主题的源码就会出现在项目的 themes/next 文件夹下。
修改下博客所用的主题名称，修改项目根目录下的 _config.yml 文件，找到 theme 字段，修改为 next 即可，修改如下：

theme: next

hexo g
hexo d
即可查看

接下来我们就对主题进行进一步地详细配置
Next 主题内部也提供了一个配置文件，名字同样叫做 _config.yml，只不过位置不一样，它在 themes/next 文件夹下，Next 主题里面所有的功能都可以通过这个配置文件来控制，下文所述的内容都是修改的 themes/next/_config.yml 文件。
Next 主题还提供了多种样式，通过修改配置文件的 scheme 字段即可，修改 _config.yml （注意是 themes/next/_config.yml 文件）如下：

# scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

hexo g
hexo d 后即可查看

我们还可以自己制作站点的小标签
有一个网站可以直接将图片转化为站点小图标，站点链接为：https://realfavicongenerator.net，到这里上传一张图，便可以直接打包下载各种尺寸和适配不同设备的小图标。

图标下载下来之后把它放在 themes/next/source/images 目录下面。
然后在配置文件里面找到 favicon 配置项，把一些相关路径配置进去即可，示例如下：

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon.png
  safari_pinned_tab: /images/safari-pinned-tab.svg

更新后可以发现站点图标改变了，例如我的
在这里插入图片描述
添加tags（标签）页面可以方便查找文章
在根目录执行命令

hexo new page tags

成功后会提示一个路径，根据路径，找到index.md这个文件，打开后默认内容是这样的：

---
title: 标签
date: 2021-02-05 20:42:36
---

添加type: "tags"到内容中，添加后是这样的：

---
title: 标签
date: 2021-02-05 20:42:36
type: "tags"
---

添加分类页，也是为了帮助查找文章，方法类似上面

hexo new page categories

找到index.md这个文件，打开后默认内容是这样的：

---
title: 分类
date: 2021-02-05 20:52:50
---

添加后为：

---
title: 分类
date: 2021-02-05 20:52:50
type: "categories"
---

添加文章
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
然后返回根目录，在Public文件夹下打开Git Bash

hexo g
hexo d

文章即上传成功（可能会慢，等一会多刷新几次就好了）

Hexo的首页默认会显示文章的详细信息，如果想让它只显示标题，如下所示
在这里插入图片描述
可以在md文件前面这样写

---
title: IDA pro使用笔记
categories: 逆向学习笔记
tags:
- 逆向
- 工具使用
---
<escape><!-- more --></escape>

注意 下一行也要空格

其中categories: 逆向学习笔记是分类
tags:

  • 逆向
  • 工具使用
    是标签
    Public文件夹更新后可以看到这样
    在这里插入图片描述
    在这里插入图片描述
    文章多了查找不方便还可以加上一个搜索功能，需要先安装一个插件，叫做 hexo-generator-searchdb，命令如下：
npm install hexo-generator-searchdb --save

然后在项目的 _config.yml 里面添加搜索设置如下：

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

然后在主题的 _config.yml 里面修改如下：

# Local Search
# Dependencies: https://github.com/wzpan/hexo-generator-search
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 5
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

更新后如图
在这里插入图片描述
也可以加一个404页面
直接在根目录 source 文件夹新建一个 404.md 文件即可，内容可以仿照如下：

---
title: 404 Not Found
date: 2021-02-05 21:22 
---

<center>
页面丢失啦~嘤嘤嘤(｡•́︿•̀｡)
试试看<a href="https://nor-ming.github.io/>">点击此处</a>返回首页(｡･ω･｡)ﾉ♡
</center>

<blockquote class="blockquote-center">
    nor-ming
</blockquote>

好啦，此时你就拥有了自己的博客啦，开始记录自己的学习过程吧~~

附上一些参考资料：

https://www.cnblogs.com/jie-fang/p/13445913.html
https://sspai.com/post/62441
https://www.cnblogs.com/xrblog/p/11585902.html
https://zhuanlan.zhihu.com/p/50787870
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html

可能还有一些别的就不一一列举啦

最后
附上自己的博客https://nor-ming.github.io/

完结
撒花花(✿≖ ◡ ≖)✧

^Norming
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Hexo + Github搭建个人博客
m0_50298323的博客
03-22 88
使用Hexo + Github搭建个人博客
Git的安装和环境变量的配置
铁锤妹妹的博客
05-29 3万+
当我们第一次在新电脑上使用git命令的时候，会报错【git 不是内部或外部命令，也不是可运行的程序 或批处理文件】，所以我们需要下载安装Git、配置用户名和邮箱地址、配置环境变量，才能使用Git命令。
（开源）Git的安装、环境变量配置及Git基本操作（基于Windows10、11系统）
dogking3344的博客
12-03 1万+
Git 是世界上使用最为广泛的现代化版本控制系统。
Hexo+Github搭建个人博客教程
最新发布
Rockivy的博客
06-11 1543
完全免费的搭建个人博客，没有任何收费，零基础小白也能上手，不需要编程基础，跟着操作来即可。首先要了解一下我们搭建博客要用到的框架。Hexo是高效的静态站点生成框架，它基于Node.js。通过Hexo，你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到你的github上，然后别人就可以看到你的网页啦。是不是很简单？你无需关心网页源代码的具体细节，你只需要用心写好你的博客内容就行。
如何配置Git环境变量
小柚子的博客
12-04 1万+
首先找到git的执行文件目录 右击选择属性 进入到bin文件下，复制执行文件路径 然后，搜索环境变量
配置git环境变量
m0_50744582的博客
10-13 3万+
在配置git的时候，发现没有配置环境变量，去网上查了一下资料，以下是我配置环境变量的步骤： 一、找到git安装目录 我的git的默认安装目录是在：C:\Program Files\Git。我们打开此目录下的bin文件，就可以看到如下图所示，这里有git.exe 把这个路径复制下来，待会配置系统环境变量的时候使用。 二、找到git的安装目录 首先，在桌面”计算机“→"属性“，打开如下界面 然后，按箭头所示，依次点击”高级系统设置“→”高级“→”环境变量“。这时打开系统环境变量设置窗口，如下图所...
win10安装git及配置其环境变量
heyu996的博客
09-07 4635
win10安装git及配置其环境变量
git的三种环境变量
岁月静好
07-02 1万+
git环境变量存放在三个不同的地方 1.
Git安装及环境配置（Windows10）
Agolonely
07-28 1万+
Git安装及环境配置（Windows10）
Windows 10 配置Git 环境变量（还有：安装git后，鼠标右键没有“git bush here”)
Coder-coco的博客
08-19 532
2， 电脑桌面没有 gitBash 的快捷方式时：git 的安装包，拖一个（拖git-Bash 应用程序）到桌面。shell文件夹下新建Git Bush Here项， Git Bush Here项 下新建 Command项。Git中的Bash是基于CMD的，在CMD的基础上增添一些新的命令与功能。1， 当cmd 输入git，提示没有时~ 配置一下git 的环境变量。//查看git的版本，检查git是否安装和配置成功。3， 鼠标右键没有git bash here选项。移动了git 的目录或者电脑重置C盘。
Git 配置环境变量
Tongyao
07-08 686
任意位置打开git Bash Here，输入where git（查找git安装路径）
windows安装git和环境变量配置
热门推荐
banqgg的博客
10-31 4万+
转自 https://wuzhuti.cn/2385.html Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。 Git是一个开源的分布式版本控制系统，用以有效、高速的处理从很小到非常大的项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 演示版本2.6.1
Git在Windows 10的安装及环境配置
花花的小脑瓜的博客
10-29 1万+
1.安装Git（Windows版） 1.1 官网下载安装包 打开官网Git - Downloading Package会自动下载，下载后点击安装即可。目前最新版本是Git-2.33.1-64-bit。官网界面如下图，然后根据自己的电脑选择对应的版本，一般选 64 -bit for Windows Steup。 1.2 安装 安装的界面依次如下图所示。 1.2.1 关于Git版本信息，不用管，直接next。 1.2.2 选择安装位置，根据自己情况决定。 1.2.3 选择安装Git...
win10配置git环境变量
Knight
02-18 653
win10配置git环境变量
Windows Git下载及环境变量配置
xinyuqing的专栏
09-16 1103
一、Git下载 使用Windows电脑下载Git，官网下载基本不到20%就挂掉了，无法下载下来 https://git-scm.com/download/win(很难下载） 于是使用淘宝镜像进行下载，https://npm.taobao.org/mirrors/git-for-windows/，速度很快，完全没有问题。 二、Windows Git环境变量配置 需要配置三个变量，我直接配置到了系统变量Path下了，可用。 D:\Program Files\Git\bin D:\Program F
win系统的Git安装及配置
夕阳下的狼吻的博客
06-13 902
当前安装git为2.31.1最新版本，不同版本安装界面略有不同 压缩包下载 官网地址：git官网 win系统低下图红色选框 得到下图,win系统为32位的点击32-bit选项。Win系统为64位系统的点击64位选项下载。 安装步骤 选择Git安装位置，要求是非中文并且没有空格的目录，然后下一步 Git选项配置，推荐默认配置，然后下一步 Git安装目录名，不用修改，直接点击下一步 Git的默认编辑器，建议使用默认的Vim编辑器，然后点击下一步 默认分支名设置，选择让Git决定，分支名默认为mas
【前端学习】Git的安装和基本使用方法和环境变量配置 时光大魔王
时光小灶的博客
08-29 4791
【前端学习】Git的安装和使用 时光大魔王
hexo+github搭建个人博客
12-08
以下是使用Hexo和GitHub Pages搭建个人博客的步骤： 1.安装Node.js和Git 2.安装Hexo ```shell npm install -g hexo-cli ``` 3.初始化Hexo shell hexo init blog cd blog npm install ``` 4.配置Hexo 打开根目录下的_config.yml文件，修改以下内容： ```yaml deploy: type: git repo: <your-github-username>.github.io branch: master ``` 5.安装部署插件 ```shell npm install hexo-deployer-git --save ``` 6.创建GitHub仓库 在GitHub上创建一个名为<your-github-username>.github.io的仓库。 7.部署博客 ```shell hexo clean hexo g hexo d ``` 现在你的个人博客已经部署到GitHub Pages上了。 --相关问题--:
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值