基于Hexo+GitHub Pages 的个人博客搭建

基于Hexo+GitHub Pages 的个人博客搭建

搭建基于 Hexo 和 GitHub Pages 的个人博客需要一些基本的步骤,下面是详细的步骤:

步骤一:安装 Node.js 和 Git

确保你的电脑上已经安装了 Node.js 和 Git。你可以从官方网站下载并安装它们:

下载:

安装:

步骤二:创建Github Pages 仓库

步骤二:安装 Hexo

Hexo官网:https://hexo.io/zh-cn/index.html

打开终端(或命令行窗口),运行以下命令来安装 Hexo:

bash 复制代码
npm install  hexo-cli -g

步骤三:创建 Hexo 项目

在你选择存储博客文件的目录中,执行以下命令来创建一个新的 Hexo 项目:

bash 复制代码
hexo init blog
cd blog
npm install

步骤四:配置 Hexo

首先安装 hexo-deployer-git:

bash 复制代码
npm install hexo-deployer-git --save

编辑 _config.yml 文件,配置你的博客信息、GitHub Pages 信息和其他相关设置。例如:

yaml 复制代码
#_config.yml
title: 你的博客标题
subtitle: 你的博客副标题
description: 你的博客描述
author: 你的名字
language: en
timezone: Auto

deploy:
  type: 'git'
  repo: https://github.com/<username>/<project>.git
  # example, https://github.com/hexojs/hexojs.git
  #(可复制HTTPS协议或者SSH协议)
  branch: main

或者直接从GitHub项目中复制HTTPS协议或者SSH协议

步骤五:创建新文章

使用以下命令创建新的博客文章:

bash 复制代码
hexo new "My First Post"

这将在 source/_posts 目录下创建一个 Markdown 文件,你可以在其中编写你的博客内容。

步骤六:生成静态文件

在博客根目录下执行以下命令生成静态文件:

bash 复制代码
hexo generate 
简写:hexo g

步骤七:本地预览

运行以下命令启动本地服务器进行预览:

bash 复制代码
hexo server
简写 hexo s

然后在浏览器中打开 http://localhost:4000,查看博客的本地预览效果

步骤八:部署到 GitHub Pages

运行以下命令将生成的静态文件部署到 GitHub Pages:

bash 复制代码
hexo deploy
简写:hexo d

如果出现以下情况,直接授权就行

步骤八:访问你的博客

等待部署完成后,你的博客就可以通过 https://yourusername.github.io 访问了,其中 yourusername 是你的 GitHub 用户名。或者 https://yourusername.github.io/仓库名/

如果出现以下情况:静态资源未加载

解决办法:修改hexo 中 _config.yml文件

原文件的 root:/ 指向的是根目录,在后面添加上仓库名

即修改为 root:/仓库名

保存,重新使用上传到github

bash 复制代码
hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo d       # 部署发布

最后访问成功。

步骤九:写作和发布

从现在开始,你可以通过创建新的 Markdown 文件并使用 hexo generatehexo deploy 命令来更新你的博客内容。每次更新后,运行 hexo deploy 将新内容发布到 GitHub Pages 上

Markdown 文件在source/_posts 目录下

也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可,写完后运行 hexo g 和 hexo d 发布。

bash 复制代码
---
title: Hello World # 标题
date: 2023/12/24 hh:mm:ss # 时间
categories: # 分类
- Diary
tags: # 标签
- 笔记
- win
---

摘要
<!--more-->
正文

常用命令

bash 复制代码
hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

更换主题(扩展)

步骤一:选择 Hexo 主题

在 Hexo 官方网站或 GitHub 上,有许多免费和开源的 Hexo 主题可供选择。选择一个你喜欢的主题并记住它的名称。

主题下载:https://hexo.io/themes/

点击喜欢的主题

步骤二:安装主题

两种方法一种克隆下载,一种直接下载压缩包

在博客根目录下执行以下命令,安装你选择的主题:
theme-name 你的主题名

bash 复制代码
git clone https://github.com/yourfavorite/theme-name.git themes/theme-name

步骤三:配置主题

编辑 _config.yml 文件,将主题设置为你选择的主题:

yaml 复制代码
# _config.yml
theme: theme-name

步骤四:重新生成和部署

重新生成静态文件并部署到 GitHub Pages:

bash 复制代码
hexo g
hexo d

现在,你的博客应该使用新的主题了。根据主题的文档,你可能需要进一步的配置来自定义博客的外观和功能。

相关推荐
B站_计算机毕业设计之家12 小时前
豆瓣电影数据可视化分析系统 | Python Flask框架 requests Echarts 大数据 人工智能 毕业设计源码(建议收藏)✅
大数据·python·机器学习·数据挖掘·flask·毕业设计·echarts
Hello.Reader12 小时前
Flink JobManager 高可用(High Availability)原理、组件、数据生命周期与 JobResultStore 实战
大数据·flink
happyboy198621112 小时前
2026 高职大数据专业考什么证书对就业有帮助?
大数据
Hello.Reader12 小时前
Flink 对接阿里云 OSS(Object Storage Service)读写、Checkpoint、插件安装与配置模板
大数据·阿里云·flink
Lansonli13 小时前
大数据Spark(八十):Action行动算子fold和aggregate使用案例
大数据·分布式·spark
dixiuapp13 小时前
学校后勤报修系统哪个好,如何选择
大数据·人工智能·工单管理系统·院校工单管理系统·物业报修系统
江瀚视野13 小时前
多家银行向甲骨文断贷,巨头甲骨文这是怎么了?
大数据·人工智能
asheuojj13 小时前
2026年GEO优化获客效果评估指南:如何精准衡量TOP5关
大数据·人工智能·python
callJJ13 小时前
Spring AI ImageModel 完全指南:用 OpenAI DALL-E 生成图像
大数据·人工智能·spring·openai·springai·图像模型
SAP工博科技13 小时前
SAP 公有云 ERP 多工厂多生产线数据统一管理技术实现解析
大数据·运维·人工智能