利用Github与Hexo搭建属于自己的在线个人博客

一、需求描述

自己没有任何可用的在线服务器、但是平时使用markdown编写博客内容,想要将这些博客内容分享到互联网上,让大家都可以查看自己写好的博客内容;同时也方便自己在线访问查阅。

没有在线服务器则可以借助github这个最大的全球在线平台;使用markdown编写博客则可以使用静态博客Hexo。

二、搭建属于自己的在线个人博客

2.1、准备工作

2.1.1、在自己电脑上下载安装Git

Githttps://git-scm.com/

在git安装完成之后点击鼠标右键选择【Git Bash Here】或者直接打开解压后的Git目录下的【git-bash.exe】查看git的版本信息【git --version】如下图所示:

到这里恭喜你表示本机安装git完成。

2.1.2、在自己电脑上下载安装node.js

Node.js --- Download Node.js®https://nodejs.org/en/download/

配置nodejs在windows的环境变量:选择【此电脑】-->点击鼠标右键【属性】-->【高级系统设置】-->【环境变量】-->在【系统变量】点击【新建】输入变量名【node】,变量值输入nodejs的路径【如:E:\AllSoftWare\DevelopSoftWare\NodeJs】-->【确定】后再git-bash中输入【node -v】显示版本信息则表示安装nodejs成功。如下图所示:

到这里输入【node -v】显示版本信息,恭喜你表示已经安装nodejs成功了。

2.2、安装Hexo

2.2.1、安装cnpm

npm(Node Package Manager),而cnpm是国内版的npm,在国内直接使用淘宝的提供的下载会更快。

bash 复制代码
#在git中安装cnpm命令
npm install -g cnpm --registry==https://registry.npm.taobao.org

#2-验证cnpm是否安装完成(显示对应的版本信息则表示安装成功)
cnpm -v

注意:如果在安装cnpm命令后,使用【cnpm -v】提示"bash: cnpm: command not found"时是因为我们的cnpm被安装到了其他目录,一般情况下是安装在【C:\Users\自己用户名\AppData\Roaming\npm】如(C:\Users\CoffeeMilk\AppData\Roaming\npm);也可以通过【Everything】工具来查找cnpm的路径(如:F:\SoftWareResources\AiBox\ai\pic-smaller\pic-smaller\.ai\node-v18.19.0-win-x64\node_global),然后将这个查找到的路径添加到【XXX用户变量】的【Path】中后再次输入【cnpm -v】即可看到

到这里恭喜你显示cnpm的版本信息内容表示安装完成。

2.2.2、安装Hexo

bash 复制代码
#1-使用cnpm下载安装Hexo
cnpm install hexo-cli -g

#2-查看hexo版本信息(显示对应的版本信息则表示安装成功)
hexo -v

2.2.3、创建指定名称的Hexo项目

bash 复制代码
#1-进入指定路径(比如我想要将博客内容都放置在F盘的MyBlog目录中,则先进入该目录下)
cd F:\MyBlog

#2-创建一个名为【ckblogs】的Hexo新项目
hexo init ckblogs

#3-进入该内容目录中
cd ckblogs

#4-安装Hexo项目所需的依赖内容
npm install

#5-安装Hexo项目所需的依赖内容并保存
npm install hexo-deployer-git --save

#6-启动Hexo项目(启动后不要立即按下【Ctrl+C】停止服务)
hexo server

#7-可以直接在浏览器输入【localhost:4000】即可访问到项目页面(表示项目安装配置完成)
http://localhost:4000/

到这里恭喜你表示创建的名为ckblogs的Hexo项目完成。

2.2.4、预览Hexo的主题并配置到自己项目中

《1》到Hexo主题官网浏览主题,挑选自己喜欢的(如:Kratos-Rebirth、Amazing、Reimu)

bash 复制代码
#Kratos-Rebirth主题将入自己Hexo项目【blog】的操作
#0-给使用Hexo创建的项目【blog】添加主题【Kratos-Rebirth】
cd F:\MyBlog
cd blog
git clone https://github.com/Candinya/Kratos-Rebirth/archive/refs/tags/v2.2.0.zip themes/amazing
#0.1-将下载好的【Kratos-Rebirth-2.2.0.zip】解压到【F:\MyBlog\blog\themes】目录中且名称修改为【Kratos-Rebirth】
#0.2-编辑【F:\MyBlog\blog】目录下的【_config.yml】文件中的【theme: landscape】修改为【theme: Kratos-Rebirth】保存


#1-进入创建好的blog项目中
cd F:\MyBlog
cd blog

#2-安装blog项目所需的依赖内容
npm install

#3-清除缓存
hexo clean

#4-编译
hexo g

#5-启动服务
hexo s
bash 复制代码
#Amazing主题的加入到自己Hexo项目【ckblogs】中的操作

#1-进入Hexo项目目录
cd F:\MyBlog
cd cd ckblogs/

#2-在需要使用这个主题的项目中克隆主机
git clone https://github.com/removeif/hexo-theme-amazing.git themes/amazing
#2.1-修改所在项目目录下的【_config.yml】文件中倒数第二主题内容为【theme: amazing】

#3-安装该主题的依赖包【即主题文件【package.json】最后面的【dependencies】内容)】
#注意:主题文件【package.json】里面最后没有【dependencies】内容的就不用安装
npm install --save bulma-stylus@0.8.0 deepmerge@^4.3.1 hexo@^7.1.1 hexo-component-inferno@^3.1.2 hexo-log@^4.1.0 hexo-pagination@^3.0.0 hexo-renderer-inferno@^1.0.2 hexo-renderer-stylus@^3.0.1 hexo-util@^3.2.0 inferno@^8.2.3 inferno-create-element@^8.2.3 moment@^2.30.1 semver@^7.5.4

#4-清除缓存
hexo clean

#5-编译
hexo g

#6-启动服务
hexo s

#7-浏览器访问【http://localhost:4000/】查看效果

其余的主题配置也是类似的操作。

2.2.5、查看并强制删除4000端口进程

bash 复制代码
#查看windows系统的4000端口的进程
netstat -ano | findstr 4000

#强制杀死指定进程(如:1652 进程)
taskkill /f /pid 1652

2.3、将Hexo项目部署到Github

注意:若没有github账号则需要先注册一个,github官网地址是【https://github.com/

2.3.1、先将本机配置为免密登录GitHub

bash 复制代码
#先在本机指定路径下生成一对密钥(一般生成的路径是:C:\Users\电脑当前的用户名\.ssh)
ssh-keygen -t ed25519 -C"xxxx@exp.com"

2.3.2、将本地生成的SSH公钥内容复制到Github中

将本地生成的ssh密钥对中的文件结尾带有.pub的公钥文件内容复制一份到github中【登录自己的github账号,然后点击右上角的头像】-->【Settings】-->【SSH and GPG keys】-->【New SSH key】-->【输入Title内容(随便填写)、选择Key type是(Authentication key)、将将本地生成的ssh密钥对中的文件结尾带有.pub的公钥文件内容全选后粘贴到Key输入框中】-->【Add SSH key】,相信操作如下图所示:

2.4、在Github上创建所属博客的仓库

在github界面上选择右上角的加号【+】-->【New repository】-->【根据自己情况填写仓库名称(如:blog)】-->【Create repository】;然后该github上的仓库就创建完成了,在这个仓库界面选择右边的【code】-->【local】-->【ssh】-->点击复制图标即可获取到该仓库的SSH链接。详细操作如下图所示:

bash 复制代码
#在正式执行【hexo d】命令将本地的Hexo项目部署到github上前,还需要给上传的项目(如F:\MyBlog\blog\_config.yml文件最后添加如下内容才可实现上传到github指定仓库)
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: git@github.com:自己在github上的用户名称/仓库名称.git
  branch: main
  name: 自己在github上的用户名称
  email: 自己在github上的用户对应的邮箱
bash 复制代码
#1-进入本地Hexo创建的blog项目中
cd F:\MyBlog
cd blog

#2-安装部署项目到github所需的包
npm install hexo-deployer-git --save

#3--清除缓存
hexo clean

#4-编译blog项目
hexo g

#5-部署blog项目到github上
hexo d

注意:在部署blog项目到github上时若提示:" error: GH013: Repository rule violations found for refs/heads/main.

! [remote rejected] HEAD -> main (push declined due to repository rule violations)
error: failed to push some refs to 'git@github.com:xxx/blog.git'"时,是因为我们推送的当前项目中包含了密钥内容,导致github的密钥扫描发现了就禁止推送了。我们根据提示的消息将类似【Tencent Cloud Secret ID】下面给出的remote链接【https://github.com/xxx/blog/security/secret-scanning/unblock-secret/xxx】复制到浏览器上授予允许后再来重新执行【hexo d】命令重试即可解决,相信操作如下图所示:

到这里恭喜你已经将本地的Hexo创建的blog项目部署到github的仓库中了。

2.5、开启部署到github的博客网址

**选择自己的博客仓库的【Settings】-->【Pages】-->【Branch项下选择(main)-->(/root)】-->【Save】-->【Source下面选择Deploy from branch】**即可获取到博客的网址(如:https://kafeiweimei.github.io/blog/)在浏览器中输入这个网址即可查看到我们部署的网站内容(注意:若我们看到的网站是排版混乱的,此时可以在浏览器界面打开F12后选择网络后按下F5键刷新仔细看资源加载,一般情况下都是这些资源的路径不对【即:我们需要重新配置一下该博客仓库的网站根目录】及其【_config.yml文件内的url后面添加上自己网站的地址】)如下图所示:

三、新增博客内容

只用在自己博客的【source】-->【_posts】目录下创建以.md结尾的文档即可;然后将项目编译部署到github即可看到效果了。

注意:

《1》新创建的markdown文件开头需要先插入如下内容用作右侧的标签与目录内容展示:

《2》关于卡片的介绍内容则是【这是关于typora的常用方法说明,帮助我们快速入门使用<!--more-->】。

bash 复制代码
---
title: hello world
date: 2025-11-03 11:31:36
categories: 教程文档
tags:
- markdown快速入门
- 编写一个markdown文件
- markdown的常用方法
sticky: 100
pic:
comments: true
toc: true
expire: true
only:
- home
- category
- tag
---
bash 复制代码
#1-进入本地Hexo创建的blog项目中
cd F:\MyBlog
cd blog

#2-安装部署项目到github所需的包(已经安装过就不用安装了)
npm install hexo-deployer-git --save

#3--清除缓存
hexo clean

#4-编译blog项目
hexo g

#5-部署blog项目到github上
hexo d
相关推荐
散峰而望4 小时前
C++入门(一)(算法竞赛)
c语言·开发语言·c++·编辑器·github
qq_5470261795 小时前
OAuth 2.0 安全授权
git·安全·github
uhakadotcom8 小时前
基于 TOON + Next.js 来大幅节省 token 并运行大模型
前端·面试·github
孟陬9 小时前
别再社死了!`includeIf` 一招搞定 Git 提交者信息错乱,守护你的邮箱隐私
git·github
Cyril_KI10 小时前
大模型长文生成中的幻觉与事实性:研究进展综述
大模型·llm·github·综述·幻觉
逛逛GitHub11 小时前
3 个近期"优质"的 AI 开源项目, 有点绝。
架构·github
Pluto53816 小时前
第一个app产品的迭代
ios·github
liuccn16 小时前
Ubuntu 22.04 离线升级 OpenSSH 到 9.8p1
linux·ubuntu·github
fruge17 小时前
GitHub Actions CI/CD 自动化部署完全指南
ci/cd·自动化·github