GitHub + Hexo 搭建个人博客网站

github,hexo,搭建,个人,博客,网站 · 浏览次数 : 180

小编点评

## Blog搭建指南 **准备工作:** 1. **GitHub + Hexo:** 建议注册一个 GitHub 账号,并在 GitHub 上创建仓库。 2. **Hexo:** 了解 Hexo 首页文档,并下载安装包。 3. **Node.js:** 确保拥有 Node.js 14 或更高版本。 **安装 Hexo:** 1. 打开 cmd 终端。 2. 执行 `npm install -g hexo-cli` 命令。 3. 查看 Hexo 版本:`hexo -v` **本地博客搭建:** 1. 创建工作目录 `D:\workspace\blog`。 2. 运行 `hexo init github-blog` 命令。 3. 按照屏幕提示进行配置。 4. 运行 `hexo ghexo server` 启动博客服务器。 **提交本地博客至 GitHub 仓库:** 1. 使用两种方法提交博客: * **方法一:部署插件:** `hexo deploy git -d` * **方法二:直接将 public 目录推送至 GitHub 仓库:** - 将 public 目录中的文件和目录上传至 `gitHub` 仓库。 - 修改 `_config.yml` 文件,添加远程仓库地址。 - 使用 `hexo g -d` 命令部署博客。 **主题配置:** 1. 在 GitHub 上搜索 Hexo 主题。 2. 选择你喜欢的主题并下载安装包。 3. 按文档配置主题。 **完成步骤:** 1. 开始写作你的博客内容。 2. 发布博客。 **其他提示:** * 请阅读 Hexo 文档进行详细配置。 * 使用 Demo 演示可帮助你快速搭建博客。 * 提交博客时注意格式和文件扩展名。

正文

一、准备工作

1. GitHub + Hexo 的优势

Hexo 提供现成的模板和模块;githubpages 功能提供免费的服务器,零成本搭建属于自己的博客。

2. 需要了解的网站

  • github,开源代码托管网站,需要我们去注册一个账号。
  • hexo,一个快速、简洁且高效的博客框架,需要我们去提前了解一些搭建文档。
  • git,本地安装 git 工具,实现代码提交和推送。
  • nodejs,本地安装 nodejsHexo 基于 nodejs 编写的。

以上安装软件操作,请自行搜索

二、github 上创建仓库

1. 新建仓库

image

2. 填写地址

仓库名称为 <用户名>.github.io,勾上 Add a README file
image

提示,用户名为你自己的 github 帐号,见下图。
image

3. 访问

访问地址 https://<用户名>.github.io,如图则说明创建成功。
image

三、本地安装 Hexo,生成博客模板

1. 安装 Hexo

打开cmd,执行

npm install -g hexo-cli

查看 Hexo 版本

hexo -v

执行结果如下

PS C:\Users\Administrator> hexo -v
hexo-cli: 4.3.0
os: win32 10.0.25217
node: 14.21.1
v8: 8.4.371.23-node.87
...

2. 创建本地博客

切换到工作区域文件夹下,执行

hexo init github-blog

执行结果如下

PS D:\workspace\blog> hexo init github-blog
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
...
22 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
INFO  Start blogging with Hexo!

然后初始化

cd github-blog
npm i

安装好后运行,执行

hexo g
hexo server

执行结果

PS D:\workspace\blog\github-blog> hexo g
INFO  Validating config
INFO  Start processing
INFO  Files loaded in 141 ms
INFO  Generated: archives/index.html
···
INFO  17 files generated in 349 ms
PS D:\workspace\blog\github-blog> hexo server
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
INFO  Have a nice day

浏览器打开 http://localhost:4000/ 预览,如下图
image

四、提交本地博客至 github 仓库

有两种方式

1. 利用 Hexo 的部署插件

安装 hexo-deployer-git

npm install hexo-deployer-git -D

安装完之后修改根目录的 _config.yml 文件,拉到最下面,增加远程仓库地址(自己的),记得保存(ctrl + s)。

deploy:
  type: git
  repo: git@github.com:weizwz/weizwz.github.io.git
  branch: main

提示,远程仓库地址选择 ssh 的,如下图,HTTPS 的貌似还需要 token(主要是我加完token也没成功。。。)
image

部署到GitHub

hexo g -d

执行成功后,查看 github 代码仓是否更新,查看博客地址页面。
image

2. 直接将 public 目录中的文件和目录推送至 gitHub 仓库

可参考我的博客 Git使用记录 - 持续更新 - 将本地项目关联到远程仓库。
记得是 public 目录,不是整个项目。如果你把整个项目推送了过去,记得回退。

五、 主题配置

github 上搜索 Hexo theme,选择自己喜欢的主题,最好选择有详细文档的,这样安装比较方便。以我选择的 hexo-theme-butterfly 为例,具有 Demo 演示和详情的文档说明,只需按照文档来安装和配置即可。
参照 安装文档 进行安装配置,基础效果如下
image
按照文档进行其他配置,最后推送至远端仓库即可。

然后开始写作欣赏你自己的博客吧!

与GitHub + Hexo 搭建个人博客网站相似的内容:

GitHub + Hexo 搭建个人博客网站

一、准备工作 1. GitHub + Hexo 的优势 Hexo 提供现成的模板和模块;github 的 pages 功能提供免费的服务器,零成本搭建属于自己的博客。 2. 需要了解的网站 github,开源代码托管网站,需要我们去注册一个账号。 hexo,一个快速、简洁且高效的博客框架,需要我们去

又重新搭了个个人博客

哈喽大家好,我是咸鱼。 前段时间看到一个学弟写了篇用 Hexo 搭建博客的教程,心中沉寂已久的激情重新被点燃起来。(以前搞过一个个人网站,但是因为种种原因最后不了了之) 于是花了一天时间参考教程搭了个博客网站,我的博客网址是:https://xxxsalted.github.io/ 下面是相关教程。

英伟达又向开源迈了一步「GitHub 热点速览」

大家是否还记得 2012 年,Linux 之父 Linus Torvalds 在一次活动中“愤怒”地表达了对英伟达闭源 Linux GPU 驱动的不满?这个场景曾是热门表情包,程序员人手一个。

将传统应用带入浏览器的开源先锋「GitHub 热点速览」

现代浏览器已经不再是简单的浏览网页的工具,其潜能正在通过技术不断地被挖掘和扩展。得益于 WebAssembly 等技术的出现,让浏览器能够以接近原生的速度执行非 JavaScript 语言编写的程序,从而打开了浏览器的“潘多拉魔盒”。

GitHub 创始人资助的开源浏览器「GitHub 热点速览」

你是否注意到,现在主流的浏览器如 Chrome、Edge、Brave 和 Opera 都采用了谷歌的 Chromium 引擎?同时,谷歌每年不惜花费数十亿美元,确保其搜索引擎在 Safari 中的默认地位,甚至连 Firefox 也难逃商业利益的影响,这使得谷歌在浏览器和搜索引擎市场“一家独大”。

免费且离线的同声翻译利器「GitHub 热点速览」

开源的翻译软件众多,但大多数依赖于翻译 API 服务,因此就需要联网、有次数限制、并非完全免费。然后,本周上榜的是一款可以离线使用的 Android 翻译软件:RTranslator,它创建于 4 年前,最初也是基于谷歌翻译 API 开发,但在上周发布的 2.0 版本中,采用了全新的 NLLB+Wh...

开源的网络瑞士军刀「GitHub 热点速览」

上周的开源热搜项目可谓是精彩纷呈,主打的就一个方便快捷、开箱即用!这款无需安装、点开就用的网络瑞士军刀 CyberChef,试用后你就会感叹它的功能齐全和干净的界面。不喜欢 GitHub 的英文界面?GitHub 网站汉化插件 github-chinese,让英语不好的同学实现无障碍浏览 GitHu...

一周万星的文本转语音开源项目「GitHub 热点速览」

上周的热门开源项目让我想起了「图灵测试」,测试者在不知道对面是机器还是人类的前提下随意提问,最后根据对方回复的内容,判断与他们交谈的是人还是计算机。如果无法分辨出回答者是机器还是人类,则说明机器已通过测试,具有人类的智力水平。 ​虽然现在大模型的回答还充满 AI “味”,可以一眼识破,但 GitHu

代码界的超级英雄:GitHub的奇幻冒险之旅

GitHub简介 GitHub是一个用于代码托管、版本控制和协作开发的平台。它于2008年2月8日由Chris Wanstrath、PJ Hyett和Tom Preston-Werner创立,目前由微软拥有。 GitHub是目前最流行的代码托管平台之一,拥有超过8000万个项目和超过2.7亿活跃用户

3 个好玩的前端开源项目「GitHub 热点速览」

单休的周末总是短暂的,还没缓过神新的一周就又开始了。如果你和我一样状态还没有完全恢复,那就让上周好玩的开源项目唤醒你吧!每周 GitHub 上总是有一些让人眼前一亮的开源项目,上周好玩的前端项目特别多。