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

news/2024/7/11 0:41:08 标签: github, elasticsearch, 大数据, Hexo, 静态站, 个人博客, blog

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

    • 步骤一:安装 Node.js 和 Git
    • 步骤二:创建Github Pages 仓库
    • 步骤二:安装 Hexo
    • 步骤三:创建 Hexo 项目
    • 步骤四:配置 Hexo
    • 步骤五:创建新文章
    • 步骤六:生成静态文件
    • 步骤七:本地预览
    • 步骤八:部署到 GitHub Pages
    • 步骤八:访问你的博客
    • 步骤九:写作和发布
    • 常用命令
    • 更换主题(扩展)

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

步骤一:安装 Node.js 和 Git

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

下载:

  • Node.js: https://nodejs.org/
  • Git:https://git-scm.com/

安装:

  • Node.js安装部署
  • Git安装部署

步骤二:创建Github Pages 仓库

  • Github Pages 仓库创建

Hexo_16">步骤二:安装 Hexo

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

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

npm install  hexo-cli -g

blog.csdnimg.cn/direct/2d5d9f2d3f9b4a0fa3cdfb8976851e92.png" alt="在这里插入图片描述" />

Hexo__25">步骤三:创建 Hexo 项目

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

hexo init blog
cd blog
npm install

blog.csdnimg.cn/direct/ef484e9d44404912b4f3bb032fe57ca0.png" alt="在这里插入图片描述" />

Hexo_35">步骤四:配置 Hexo

首先安装 hexo-deployer-git:

npm install hexo-deployer-git --save

blog.csdnimg.cn/direct/be6625b9c24e45a292a6aa15ba61face.png" alt="在这里插入图片描述" />

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

#_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协议
blog.csdnimg.cn/direct/47ec0c70da8842a88e7c1232b2719af8.png" alt="在这里插入图片描述" />

步骤五:创建新文章

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

hexo new "My First Post"

这将在 source/_posts 目录下创建一个 Markdown 文件,你可以在其中编写你的博客内容。
blog.csdnimg.cn/direct/0925a398e5cc4f09bc08c24a7d887dcf.png" alt="在这里插入图片描述" />

步骤六:生成静态文件

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

hexo generate 
简写:hexo g

blog.csdnimg.cn/direct/32b835f60f6d418b8c9b5e2c2b7476bf.png" alt="在这里插入图片描述" />

步骤七:本地预览

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

hexo server
简写 hexo s

然后在浏览器中打开 http://localhost:4000,查看博客的本地预览效果
blog.csdnimg.cn/direct/dac8eb96d7fb4347901258da4ecd51c2.png" alt="在这里插入图片描述" />

步骤八:部署到 GitHub Pages

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

hexo deploy
简写:hexo d

blog.csdnimg.cn/direct/481cf4e8b32a40a6bb0e737a50496c06.png" alt="在这里插入图片描述" />
如果出现以下情况,直接授权就行
blog.csdnimg.cn/direct/4b3aadb28ef147b3b51f46e55fe64617.png" alt="在这里插入图片描述" />
blog.csdnimg.cn/direct/00548c8a5c0f4c6c9357488d980728dc.png" alt="在这里插入图片描述" />

步骤八:访问你的博客

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

如果出现以下情况:静态资源未加载
blog.csdnimg.cn/direct/2f717a6aa61b46a8968284837c9879bc.png" alt="在这里插入图片描述" />
解决办法:修改hexo 中 _config.yml文件
原文件的 root:/ 指向的是根目录,在后面添加上仓库名
即修改为 root:/仓库名
blog.csdnimg.cn/direct/2a4cfb2dca2c4535893ea55fec808bc0.png" alt="在这里插入图片描述" />

保存,重新使用上传到github

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

最后访问成功。
blog.csdnimg.cn/direct/f6c1d199211449c1b6cd6519b02c4efc.png" alt="在这里插入图片描述" />

步骤九:写作和发布

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

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

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

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

常用命令

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/

点击喜欢的主题
blog.csdnimg.cn/direct/daf14e5528704fcab147d454b4d965b0.png" alt="在这里插入图片描述" />

步骤二:安装主题
两种方法一种克隆下载,一种直接下载压缩包
blog.csdnimg.cn/direct/a6add7664d04414a9a110196663e4d51.png" alt="在这里插入图片描述" />
在博客根目录下执行以下命令,安装你选择的主题:
theme-name 你的主题名

git clone https://github.com/yourfavorite/theme-name.git themes/theme-name

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

# _config.yml
theme: theme-name

步骤四:重新生成和部署
重新生成静态文件并部署到 GitHub Pages:

hexo g
hexo d

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


http://www.niftyadmin.cn/n/5284777.html

相关文章

AI创新之美:AIGC探讨2024年春晚吉祥物龙辰辰的AI绘画之独特观点

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《粉丝福利》 《linux深造日志》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引言一、龙辰辰事件概述二、为什么龙辰辰会被质疑AI创作&#xff1f;1.1 AI 作画的特点2.2 关于建行的合作宣传图…

List 流的使用

摘要 本文将介绍在 Java 1.8 中对 List 进行流操作的使用方法。引入的 java.util.stream 包为开发者提供了一种更为便捷和强大的方式来处理集合数据。通过使用流&#xff0c;我们能够以声明性的方式进行集合操作&#xff0c;减少了样板代码&#xff0c;提高了代码的可读性和可…

RabbitMQ如何做到不丢不重

目录 MQTT协议 如何保证消息100%不丢失 生产端可靠性投递 ​编辑 RabbitMQ的Broker端投 &#xff08;1&#xff09;消息持久化 &#xff08;2&#xff09;设置集群镜像模式 &#xff08;3&#xff09;消息补偿机制 消费端 ACK机制改为手动 总结 MQTT协议 先来说下MQTT…

将Go语言开发的Web程序部署到K8S

搭建K8S基础环境 如果已经有K8S环境的同学可以跳过&#xff0c;如果没有&#xff0c;推荐你看看我的《Ubuntu22加Minikue搭建K8S环境》&#xff0c;课程目录如下&#xff1a; Ubuntu22安装Vscode 下载&#xff1a;https://code.visualstudio.com/Download 安装命令&#…

[原创][R语言]股票分析实战[4]:周级别涨幅趋势的相关性

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…

华为设备VRP系统管理

为了满足企业业务对网络的需求&#xff0c;网络设备中的系统文件需要不断进行升级。另外&#xff0c;网络设备中的配置文件也需要时常进行备份&#xff0c;以防设备故障或其他灾害给业务带来损害。在升级和备份系统文件或配置文件时&#xff0c;经常会使用FTP和TFTP来传输文件。…

C#上位机与欧姆龙PLC的通信04---- 欧姆龙plc的存储区

1、存储区概念 欧姆龙PLC将整个数据存储器分为10个区&#xff1a;输入继电器区、输出继电器区、内部辅助继电器区、特殊继电器区、保持继电器区、暂存继电器区、定时/计数器区、数据存储区、辅助存储继电器区、链接继电器区。 输入输出继电器区 CP1E系列PLC输入继电器区有16…

使用Uniapp随手记录知识点

使用uniapp随手记录知识点 1 组件内置组件扩展组件 2 vuex状态管理使用流程mapState 辅助函数gettersMutation 1 组件 内置组件 内置组件内主要包含一些基础的view button video scroll-view等内置基础组件&#xff0c;满足基础场景 扩展组件 扩展组件是uniapp封装了一些成…