Hexo+Github Pages搭建个人博客(超详细教程)

最新推荐文章于 2025-05-08 11:26:17 发布
最新推荐文章于 2025-05-08 11:26:17 发布
阅读量2.2k 收藏 35
点赞数 27
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41810991/article/details/106198452

目录

GitHub创建个人仓库

第一步 注册

登录到 GitHub ，如果没有 GitHub 帐号，请使用你的邮箱注册 GitHub 帐号：https://github.com
在这里插入图片描述

第二步 创建一个存储库（repository）

登录成功之后，点击 GitHub 中的 New repository 创建新仓库，仓库名应该为：用户名 .github.io 。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第三步 下载Git，并创建ssh密钥

在这里插入图片描述
安装好 Git 后，只需要进行下面的配置即可。

配置信息

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

生成ssh密钥

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

然后直接三个回车即可，默认不需要设置密码。最后得到了两个文件(在C盘的.ssh文件夹中)：id_rsa和id_rsa.pub。
在这里插入图片描述
在这里插入图片描述
登上Github,点设置
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第四步 创建一个Github Pages repository

桌面右击Git bash here，键入以下命令：

git clone https://github.com/username/username.github.io

cd username.github.io
echo "Hello World" > index.html

git add --all
git commit -m "Initial commit"
git push -u origin master

详情可以参考这个官方教程 GitHub Pages 写的十分好懂，按这个做完之后你就有了一个你的网址 username.github.io，里面有一句 Hello World！然后就可以通过点击https://username.github.io.访问你的网站！

Hexo

现在离一个好网站只差一步了，接下来就是把某个好网站的所有文件拷贝到你的库里面。
GitHub官方建议你使用博客生成工具 Jekyll 。GitHub在库的设置里面还提供Jekyll主题选择。而我推荐使用Hexo生成工具。
要使用Hexo，需要在你的系统中支持Node.js以及Git，Git我们前面已经装好了，只要装Node.js就好了！
https://nodejs.org/en/download/
安装完成后，即可使用 npm 安装 Hexo。
桌面右击Git bash here，然后键入指令：

#在d盘放Hexo
cd d:/hexo
npm install -g hexo-cli

安装好 Hexo 后，马上就能使用了。首先初始化博客，在E盘新建一个文件夹MyBlog，用来放博客的文件，进入MyBlog文件夹，右击Git bash here，输入：

 hexo init myBlog

接着，输入以下命令以启动服务器，你的网站会在 http://localhost:4000 下启动。在服务器启动期间，Hexo 会监视文件变动并自动更新，无须重启服务器。

hexo s

Hexo 提供了快速方便的一键部署功能，只需一条命令就能将网站部署到服务器上。
在开始之前，必须先在 _config.yml 中修改参数，一个正确的部署配置中至少要有 type 参数，例如：

1 deploy:
2   type: git

接着，键入

hexo d

即可部署到服务器了。

Hexo 主题

hexo自带的主题是很朴素的！所以你博客一看就充满了贫穷的气味！咦~
所以，要想拥有一个炫酷的博客，那自然要换上一个高大上的主题喽~
博主使用的是hexo-theme-matery 这款主题。
从github git clone 下主题到hexo的themes文件夹中，

在这里插入图片描述
然后在hexo根目录中的_config.yml更换主题：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-matery

然后，更新到服务器就能看到更换后的主题了！
当然，更详细的DIY,可以通过https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/，进行细致自定义。
这里放上我自定义后的博客主题：

在这里插入图片描述
在这里插入图片描述

其他高级使用技巧

绑定独立域名

最后还可以去腾讯云买一个独属于自己的域名。
这里贴上一个博主的教程。https://blog.csdn.net/heimu24/article/details/81159099

图床

图床可以去七牛云，但是，博主我偷了个懒，直接在CSDN发一个只粘贴了图片的博文，直接拿CSDN作为我的图床了。

live2d看板娘

发现好多的博客页面上有这样一个看板娘，身为老二刺螈，怎么可能放过呢？
嘿嘿嘿~
首先，先去github搜刮一遍，找到一个Star 3k 的live2d 开源包。
https://github.com/EYHN/hexo-helper-live2d
然后，根据它的readme,博主劈里啪啦操作了一番，简易步骤如下：

1、安装模块

在hexo根目录执行命令：

npm install --save hexo-helper-live2d

2、挑选中意的看板娘

live2d提供了一些现有的看板娘模型，当然，最好是自己捏，这里贴上live2d的官方网站，有兴趣的可以去学习一下如何捏老婆：https://www.live2d.com/
博主这里就直接使用官方提供的看板娘了!具体模型有：
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16
当然看名字是看不出啥的啦！所以博主我，贴心的找了一给博主放的预览图：
Live2D看板娘+模型预览

3、下载模型及配置

挑选了自己中意的看板娘，下一步当然就是抱回家啦！
博主相中了live2d-widget-model-shizuku这名小可爱。
shizuku
首先，下载模型：

---博主使用的模型shizuku
# npm install live2d-widget-model-shizuku

接着配置_config.yml 文件：
在Hexo的 _config.yml 文件或主题的 _config.yml 文件中添加配置.
参阅 live2d-widget.js API

# Live2D
## https://github.com/EYHN/hexo-helper-live2d
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
  enable: true
  #enable: false
  scriptFrom: local # 默认
  pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/ # 模型文件相对与插件根目录路径
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自定义 url
  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-shizuku
    # use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # 博客根目录/live2d_models/ 下的目录名
    # use: ./wives/wanko # 相对于博客根目录的路径
    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自定义 url
  display:
    position: right
    width: 145
    height: 315
  mobile:
    show: true # 是否在移动设备上显示
    scale: 0.5 # 移动设备上的缩放
  react:
    opacityDefault: 0.7
    opacityOnHover: 0.8

最后更新博客到github就好了！

看到没？我家的看板娘超级可爱！！！

总结

好了，大概过程就是这样了！最后贴上我的小破站地址。
青枫阁
欢迎诸位客官大老爷~~
完结撒花~
在这里插入图片描述

青枫。
关注
GitHub搭建免费博客
smile_po的博客
05-07 1036
一、GitHub仓库准备 ​ 搭建博客需要准备两个仓库。一个存放博客图床的仓库，另一个存放博客网站的仓库。
创建GitHub技术博客全攻略
weixin_33966095的博客
07-12 1687
说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本文中假设用户名为 tiemaocsdn1. 注册账号:地址: https://github.com/输入账号、邮箱、密码,然后点击注册按钮.图1 第1步2. 初始设置注册完成后,选择Free免费账号完成设置。图2 第2步2.1 验证邮箱请打开你的邮箱，查看发送给...
Hexo+GitHubPages搭建个人博客网站
​​
01-14 791
Hexo 是一个静态网站生成器，GitHub Pages 可以免费帮我们托管静态网站，本文主要介绍如何结合两者搭建一个类似于本站点的博客网站。 官网：https://hexo.io/zh-cn/ Hexo 介绍 Hexo 是一个基于 Node.js 开发的静态网页生成器，官网的说明是博客框架，但是我认为它不仅仅可以用于博客，还可以用于企业宣传站、产品展示、文本文档等以信息展示为主的网站。 特点 ...
hexo+github+Netlify+ClouldFlare搭建个人博客
最新发布
etrospect的博客
05-08 1341
使用hexo+github+netlify+clouldflare搭建个人博客全过程记录
GitHub Pages + Hexo搭建个人博客网站，史上最全教程
Cool的博客
07-26 6229
文章目录 一、准备工作1. GitHub账号2. 安装Git3. 安装NodeJS 二、创建仓库三、安装Hexo四、更换主题1. NexT 主题2. Fluid主题 四、创建文章五、个性化页面展示1. 浏览器tab页名称2. 博客标题3. 主页正中间的文字 六、添加阅读量统计1. 申请LeanCloud账号并创建应用2. 修改Fluid配置单篇文章阅读量计数页面底部展示网站的 PV、UV 统计数 七、添加评...
【效率为王】超详细 Hexo + Github Pages 博客搭建教程
村雨遥
05-07 2193
前言 现在市面上已经有许多博客了，比如 CSDN、掘金、博客园、简书等等。我们可以直接在上面发表内容，而且交互比较人性化，而且也能被搜索引擎检索到。但是总归是别人的平台，经常会受限，因此我们就希望能有自己的博客。之前也尝试过搭建过不同的博客类型，折腾了不少工作，最终决定定型，采用 Hexo + Github Pages 的方式。今天就带大家一起来搭建自己的博客。由于是采用 Hexo + Github Pages 的方式，所以都是免费的，只是需要有一定的动手能力！ Hexo 简介 Hexo 是一个快速、简洁且
【图文教程】Hexo+GitHubPages搭建个人博客
middle_age666的博客
08-17 1754
Hexo 是一个高效的静态网站生成器，使用简洁的 Markdown（或其他模板引擎）编写内容，支持丰富的插件和主题，允许用户轻松定制网站。它通过将文本转换为静态HTML页面，使得网站加载速度快，易于部署，同时支持多平台发布，非常适合创建博客、文档或个人网站。本文将介绍如何使用Hexo搭建个人博客并且将博客文章免费放到github上。more。
hexo+GitHub Pages一键搭建部署博客
weixin_42372852的博客
01-25 1371
前言： 现在技术更新迭代是非常的快，尤其是web方面！所以当前搭建一个博客差不多有手就行，这里我们用到hexo进行博客的一键生成和部署。我自己的博客也是用hexo搭建的：杨Yang 博客相关配置 matery主题相关配置 1. 什么是 Hexo？ Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 hexo官网：https://hexo.io/ 2. 准备工作： 安装Git： Windows：下载并安装git。
Hexo+GitHub Pages搭建个人博客（ 0 基础、小白值得一看--实力软文！）- 初行?&??-附件资源
03-02
Hexo+GitHub Pages搭建个人博客（ 0 基础、小白值得一看--实力软文！）- 初行?&??-附件资源
hexo +GitHub个人搭建的博客
08-04
下面将详细阐述Hexo和GitHub搭建个人博客的过程及关键知识点。 1. **Hexo基本概念** - **站点结构**：Hexo站点通常包含`source`、`themes`、`public`、`config.yml`等目录，每个都有特定功能，如`source`存放内容...
Hexo与Github Pages搭建个人博客
发条毛虫
05-24 1542
Hexo与Github Pages搭建个人博客 Hexo与Github Pages搭建个人博客 系统环境配置 安装Nodejs和Git 安装Hexo Github Pages Github Pages是什么 表格 定义列表 代码块 脚注 目录 数学公式 UML 图 离线写博客 浏览器兼容 系统环境配置 配置安装环境： Ubuntu 16.04.3 LTS
GitHub博客搭建
weixin_49777720的博客
03-17 739
文章目录GitHub仓库创建文件内博客构建安装Hexo修改配置，链接GitHub写文章自定义博客主题 文章参考：超详细Hexo+Github博客搭建小白教程 GitHub仓库创建 GitHub博客搭建的前提是有git，这个在上文已经提到了。 GitHub博客的仓库与代码托管的仓库有一点点不同，首先是仓库命名。他的仓库名字必须和GitHub的用户名字相同，如果你的GitHub名字是yourname，那么你的仓库名字就是yourname.github.io 然后在按照下图点击，目的是有一个可以被访问的链接。 先
用hexo+github pages+独立域名搭建个人博客
qq_35479468的博客
07-09 414
摘要 用hexo建立博客这个教程，查阅了很多资料，自己倒腾了两三个小时弄好了。 现在简单记录下，以便不时之需。 基本环境 Window10 Node.js （点击进入官网下载） 在 Windows 环境下安装 Node.js 非常简单，仅须到官网下载安装文件并执行即可完成安装。 Git（点击进入官网下载） GIT安装教程 安装Hexo 在任意盘新建hexo文件夹并右键，选择Bit Bash Here，如图： 输入安装hexo命令 $ npm install -g hexo-c
Github Pages + Hexo 搭建自己的个人博客
Copcin的小站
03-27 994
​ 1. 准备工作 本文示例环境：Windows 8.1 准备1：有一个 GitHub 账号，网址，点击右上方 Sign Up 然后跟着提示一步一步走~ 准备2：Git on Windows 要安排上，网址，点击下面 Assets 适合你电脑版本的安装包，记住一定要是 Git 开头的 .exe 结尾的文件！）然后安装，过程一路 Next~ 准备3：有一个 Node.js 环境，网址，进去会比较慢，点击红箭头标出来的地址，也就是Windows Installer (.msi) 右边的64-bit
基于 Hexo + GitHub Pages 搭建个人博客
owenfy的博客
08-08 345
参考 markdown一些语法 1、 --- title: Hello Blog --- 2、链接[CSDN](https://blog.csdn.net/owenfy) 3、大小标题 ## Quick Start ### Create a new post 4、中间是代码 ``` bash $ hexo server ``` 5、换行 两个空格 6、在字体加背景 &gt...
Hexo+GitHub Pages免费搭建个人博客
乐我所乐的博客
03-12 316
介绍 从刚接触互联网开始就想着能拥有属于自己的个人网站，能够在里面记录自己的心情随笔、天马行空的想法或者学习笔记之类的。 前不久开始使用git，并注册了一个GitHub账号，某天在某个博客中了解到可以使用GitHub提供的pages服务免费搭建一个个人博客，于是便开始了折腾之路。 刚好之前的github账号因为第一次创建的时候随便起的名字，最近新注册了个g...
Hexo折腾记
weixin_33806914的博客
09-06 264
如果时间可以静止，我希望就停在此刻。 博客地址:Damonare的个人博客 前言 博主之前也有折腾wordpress和jekyll可对于一个前端er来说，wordpress让人没法尽兴，因为不知道该如何添加自己的代码。而jekyll就太麻烦了每一次都需要重新提交，而且样式也不是很丰富，简直就和鸡肋一般。食之无味，弃之可惜。 之前有听说过Hexo这个博客框架，但一直没时间给自己搭一个，其实平时也...
搭建个人博客-hexo+github pages搭建个人博客教程
MAINKEYS的博客
09-07 321
如何搭建个人博客-hexo搭建个人博客教程 1 安装hexo并生成本地博客目录 1.1 前置依赖 在搭建之前你需要： 有一个github账号； 安装了Node.js，没有的去Node.js官网安装即可； 安装了git，并设置了用户和邮箱，网上教程很多。 因为这里我们用的是github pages部署静态网站，所以简单介绍一下使用github pages服务搭建博客的好处有： 全是静态文件，访问速度快； 免费方便，不用花一分钱就可以搭建一个自由的个人博客； 不需要服务器不需要后台根据Git
hexo+github免费搭建个人博客网站
04-01
<think>好的，我需要帮助用户了解如何用Hexo和GitHub免费搭建个人博客网站。首先，我得回忆一下Hexo的基本流程和GitHub Pages的使用方法。用户可能对静态网站生成器和版本控制不太熟悉，所以步骤需要详细但简洁。 首先，安装Node.js和Git是前提条件，因为Hexo基于Node.js，而Git用于部署到GitHub。我需要确保用户正确安装这些工具，可能还需要指导他们如何验证安装是否成功。 接下来是安装Hexo，通过npm全局安装。然后初始化项目，进入目录并安装依赖。这里需要注意命令的正确性，比如hexo init之后是否要指定文件夹，或者默认当前目录。 创建GitHub仓库的部分，用户需要知道仓库命名规则，比如username.github.io必须正确，否则无法生成页面。可能需要提醒用户将username替换为自己的GitHub用户名。 配置Hexo的部分，重点是修改_config.yml文件中的部署设置。需要指出正确的仓库URL和分支，通常使用main或master分支。这里容易出错，比如缩进问题或拼写错误，可能需要特别强调语法。 生成静态文件和部署的命令，hexo generate和hexo deploy，用户需要了解每个步骤的作用。可能还要提到hexo server来本地预览，这对调试很重要。 最后，自定义主题和写作的部分，用户可能希望个性化博客，所以需要推荐一些主题和基本的写作流程。比如创建新文章的命令，以及如何修改主题配置。 在引用方面，用户提供的引用链接[^1]和[^2]需要正确对应到相关内容。比如，引用是关于使用Hexo和GitHub搭建网站的具体指南，而引用[^2]是静态生成器的集合，可能用来推荐其他工具，但当前问题主要关注Hexo，所以可能只在最后提到。 还要考虑用户可能遇到的问题，比如部署失败、页面无法访问、主题安装错误等，是否需要包含常见问题解答？不过根据用户要求，回答应结构清晰，分步骤解决，可能不需要深入排错，但可以建议查阅引用资料获取更多帮助。 最后，生成的相关问题需要围绕Hexo和GitHub Pages的优化、主题选择、部署问题等，确保问题有针对性，帮助用户进一步探索。</think>### 如何使用Hexo和GitHub免费搭建个人博客网站？ 以下是分步操作指南： #### 1. 环境准备 - **安装Node.js** 访问[Node.js官网](https://nodejs.org/)下载安装包，完成后验证安装： ```bash node -v # 查看Node.js版本 npm -v # 查看npm版本 ``` - **安装Git** 访问[Git官网](https://git-scm.com/)下载安装包，完成后验证： ```bash git --version ``` #### 2. 安装Hexo ```bash npm install -g hexo-cli # 全局安装Hexo脚手架 hexo init myblog # 初始化博客项目 cd myblog npm install # 安装依赖 ``` #### 3. 创建GitHub仓库 - 新建仓库名为 `用户名.github.io`（需替换为你的GitHub用户名） - 仓库需设为公开（Public） - 分支默认使用 `main` 或 `master` #### 4. 配置Hexo部署 修改 `_config.yml` 文件末尾的部署配置： ```yaml deploy: type: git repo: https://github.com/你的用户名/你的用户名.github.io.git branch: main ``` #### 5. 安装部署插件 ```bash npm install hexo-deployer-git --save ``` #### 6. 生成静态文件并部署 ```bash hexo clean # 清理缓存 hexo generate # 生成静态文件 hexo deploy # 部署到GitHub ``` #### 7. 访问博客 打开浏览器输入 `https://你的用户名.github.io`，约1-2分钟后生效。 #### 8. 自定义主题（以Butterfly主题为例） 1. 安装主题： ```bash npm install hexo-theme-butterfly ``` 2. 修改 `_config.yml`： ```yaml theme: butterfly ``` 3. 重新部署： ```bash hexo clean && hexo deploy ``` #### 9. 写作新文章 ```bash hexo new "我的第一篇文章" # 在source/_posts生成Markdown文件 # 编辑完成后重新生成部署 ``` --- ### 关键配置说明 1. **本地预览** 使用 `hexo server` 可在 `http://localhost:4000` 实时调试 2. **自定义域名** 在博客根目录添加 `CNAME` 文件（内容为域名），并在域名服务商处配置DNS解析 3. **自动持续集成** 可通过GitHub Actions实现自动构建（参考[GitHub Pages文档](https://docs.github.com/en/pages)） --- ### 优势分析 | 方案 | 成本 | 技术门槛 | 可定制性 | 维护难度 | |------------|-------|----------|----------|----------| | Hexo+GitHub| 免费 | 中等 | 高 | 低 | | WordPress | 付费 | 低 | 中 | 中 | | Wix | 免费/付费 | 低 | 低 | 低 | --- ### 常见问题处理 - **页面404错误** 检查仓库命名是否正确，部署分支是否匹配 - **样式加载失败** 主题配置后需重新生成静态文件 - **部署超时** 尝试清除浏览器缓存或等待GitHub服务器刷新（最长等待10分钟） ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值