【项目实战】使用Github pages、Hexo如何10分钟内快速生成个人博客网站

文章目录

  • 一.准备工作
    • 1.安装git
    • 2.安装node
      • 安装 cnpm
    • 3.使用 GitHub 创建仓库，并配置 GitHub Pages
      • 0.Github Pages是什么
      • 1. 在 GitHub 上创建一个新仓库
      • 2. 创建您的静态网站
      • 3. 启用 GitHub Pages
      • 4. 等待构建完成
      • 5. 访问您的网站
  • 二. Hexo
    • 1.什么是Hexo
    • 2.安装Hexo
        • 1. 安装前提
        • 2.使用npm安装hexo-cli
        • 3.新建存储博客的文件夹，初始化hexo
        • 4.进入hexo项目文件夹，安装npm**
        • 5. 本地启动hexo项目
        • 6.将hexo博客站点部署到github上
        • 7. 推送hexo项目到github
          • hexo clean && hexo deploy 推送报错解决
    • 3.Hexo常用命令
    • 4.更换theme主题
        • 1. 找到喜欢的主题
        • 2.clone主题，或者将主题下载到本地解压
        • 3. 将主题解压后放到Hexo项目的`themes文件夹`下面
        • 4. 打开`_config.yml`配置文件，找到`theme:xxx`替换成你克隆下来的文件名
        • 5. 重新编译，并本地启动hexoo该hero项目
        • 6. 本地ok后上传到github等待审核通过
  • 三.配置指南
    • 1._config.yml中设置网站信息
    • 2.配置分类、标签
      • 2.1.创建分类选项
      • 2.2. 创建标签选项
      • 2.3.打开你要部署的md文件
    • 3.hexo报错解决方案

一.准备工作

1.安装git

git下载地址：https://git-scm.com/downloads

  • git安装完成后命令行执行 git -v 有返回表示安装完成

在这里插入图片描述

2.安装node

Hexo 基于 NodeJS 运行，因此在开始前，需要安装NodeJS 和npm工具

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)

    • 新版的Node都是内置安装了 npm 模块

  • git安装完成后命令行执行 node -v npm -v 有返回表示安装完成
    在这里插入图片描述

  • 如果执行 node -v 报错的话，手动将 Node.js 的安装路径添加到环境变量中。

安装 cnpm

如果npm很慢，可以配置taobao的镜像：

	npm install -g cnpm --registry=https://registry.npm.taobao.org

配置后，使用 cnpm 代替 npm 命令即可。

3.使用 GitHub 创建仓库，并配置 GitHub Pages

0.Github Pages是什么

  • Github Pages 是一个免费的静态网页托管服务，可以托管博客、项目官网等静态网页。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

    • 编译 Hexo 依据：仓库编译目录下存在 package.json、_config.yml文件和 scaffolds 目录时，会使用hexo generate生成静态文件。由于每次部署需要重新克隆代码、执行 npm install 以及编译，部署时间相对于 Hugo 和 Jekyll 会长一些。

    • 编译 Hugo 依据：仓库编译目录下存在config.toml|json|yaml文件和 content 目录时，会使用hugo生成静态文件。

    • 当不符合上述 1 和 2 条件的时候，就使用 Jekyll 编译。

2.使用前须知

    1. 仓库必须有 index.html 才可以正常访问
    1. 静态网页的样式可以自己写，也可以拿一些静态模版来修改，Pages服务本身不提供任何形式的模版

3.Pages 进阶，使用 Jekyll、Hugo、Hexo 生成自己的静态网页

  • Jekyll、Hugo、Hexo 究竟是什么？
    在这里插入图片描述

    • Jekyll 使用文档：https://www.jekyll.com.cn/docs/home/
    • Hugo 使用文档：https://gohugo.io/documentation/
    • Hexo 使用文档：https://hexo.io/docs/

1. 在 GitHub 上创建一个新仓库

登录到您的 GitHub 账户（没有就注册一个吧，开始你的GitHub之旅）

  • 在页面右上角，点击页面顶部的 “+”（加号）按钮，然后选择 “New repository”（新建仓库）

  • github仓库用于存放个人博客页面，仓库名必须使用<GitHub用户名>.github.io格式。

  • 填写一个简短的描述，选择是否要将仓库设置为公共或私有
    在这里插入图片描述

  • 勾选 “Initialize this repository with a README” 选项，这将创建一个初始的README文件
    在这里插入图片描述

2. 创建您的静态网站

  • 创建仓库完成后，必须在仓库根路径下创建一个名为index.html的来验证个人博客搭建是否成功。

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

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>怎么回事</title></head><body><h1>您好</h1>

3. 启用 GitHub Pages

  • 进入仓库的 Settings（设置）选项卡
  • 在左侧导航栏中，选择 “Pages”
  • 在 “Source” 部分，选择您希望用于 GitHub Pages 的分支（通常是 main 或 gh-pages）
  • 点击 “Save”
    在这里插入图片描述

4. 等待构建完成

构建完成后， 在<GitHub用户名>.github.io仓库对应的 GitHub Pages 设置页面 (访问路径为Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub-username>.github.io/<repository-name>

  • 其中 GitHub-username 是您的 GitHub 用户名，repository-name是您的仓库名称。
    • 由于我的仓库名叫ouyangll.github.io ，自带.github.io 所以生成的个人博客访问地址为https://ouyangll.github.io/
      在这里插入图片描述

5. 访问您的网站

  • 等待几分钟后，若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功。

在这里插入图片描述

二. Hexo

1.什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

  • 官方教程:https://hexo.io/zh-cn/docs/

2.安装Hexo

1. 安装前提
  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git
2.使用npm安装hexo-cli
npm install -g hexo-cli 或者
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g hexo-cli
  • 安装完成可输入hexo -v查看版本
3.新建存储博客的文件夹，初始化hexo
mkdir github_blog
hexo init github_blog
4.进入hexo项目文件夹，安装npm**
cd github_blognpm install

在这里插入图片描述

5. 本地启动hexo项目
hexo server

访问http://localhost:4000/ 至此hero就搭建好了。可以在本地访问了

6.将hexo博客站点部署到github上
  1. npm安装hexo的上传插件deploy-git
npm install hexo-deployer-git --save
  1. 修改hexo配置文件_config.yml指定仓库路径
		deploy:type: gitrepo: https://<github_token>@github.com/ouyangll/ouyangll.github.io.gitbranch: main
7. 推送hexo项目到github
hexo clean && hexo deploy

推送中会要求输入github的用户名和密码，GitHub 从 2021 年 8 月 13 日起不再支持通过密码进行认证。因此，使用电子邮件和密码的方式克隆或推送代码到 GitHub 仓库将会失败。

hexo clean && hexo deploy 推送报错解决

在这里插入图片描述

  • GitHub 从 2021 年 8 月 13 日起不再支持通过密码进行认证。因此，使用电子邮件和密码的方式克隆或推送代码到 GitHub 仓库将会失败。

  • 推荐使用个人访问令牌（Personal Access Token, PAT）或 SSH 密钥进行认证。你可以前往 GitHub 的设置页面，生成一个 PAT，并在 Git 命令中使用它来代替密码

    • 请查看 https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls 以获取当前推荐的认证模式信息。

  • 致命错误：出现问题。也许您可以在这里找到解决方案：https://hexo.io/docs/troubleshooting.html

  1. 在github页面的右上角，单击您的个人资料照片，然后单击 Settings（设置）

    在这里插入图片描述

  2. 在左侧边栏中，单击 Developer settings
    在这里插入图片描述

  3. 在左侧边栏中，单击 Personal access tokens（个人访问Tokens） 然后点击 Generate new token（生成新Tokens）
    在这里插入图片描述
    在这里插入图片描述

  4. 设置token名称，过期日期，以及权限。
    在这里插入图片描述

  5. 点击生成
    在这里插入图片描述
    在这里插入图片描述

  6. 记得将生成的token复制并且存储下来，因为安全原因当您离开该页面之后，token将不再显示。

你在github上的原始url： https://github.com/<github-username>/<repo-name>.git而你现在需要clone的则是：https://<your_token>@github.com/<github-username>/<repo-name>.giy
  • 也可以在密码登录时使用token作为密码进行登录认证

上传成功
在这里插入图片描述

3.Hexo常用命令

  1. hexo init： 命令用于初始化一个本地文件夹为网站的根目录

  2. hexo new <title > 新建一篇文章

  3. hexo clean 命令用于清理缓存文件
    在这里插入图片描述

  4. hexo generate：该命令用于生成静态文件，可以简写成 hexo g
    在这里插入图片描述

  5. hexo deploy 命令用于部署网站，上传文件到git/gitee 可以简写成 hexo d

  6. hexo server 命令用于启动本地服务器，可以简写成 hexo s

    • -p 选项，指定服务器端口，默认为 4000
    • -i 选项，指定服务器 IP 地址，默认为 0.0.0.0
    • -s 选项，静态模式 ，仅提供 public 文件夹中的文件并禁用文件监视

  7. hexo --safe 表示安全模式，用于禁用加载插件和脚本

  8. hexo --debug 表示调试模式，用于将消息详细记录到终端和 debug.log 文件

4.更换theme主题

1. 找到喜欢的主题

hexo主题地址：Themes | Hexo
在这里插入图片描述
在这里插入图片描述

2.clone主题，或者将主题下载到本地解压

https://github.com/zhangolve/hexo-theme-olive
在这里插入图片描述

3. 将主题解压后放到Hexo项目的themes文件夹下面

在这里插入图片描述

4. 打开_config.yml配置文件，找到theme:xxx替换成你克隆下来的文件名

在这里插入图片描述

在这里插入图片描述

5. 重新编译，并本地启动hexoo该hero项目
cd github_blog 进入hexo项目
hexo generate 生成静态文章
hexo server 本地启动

http://localhost:4000/

6. 本地ok后上传到github等待审核通过
hexo clean && hexo deploy  清理缓存上传github

在这里插入图片描述

三.配置指南

1._config.yml中设置网站信息

在这里插入图片描述

2.配置分类、标签

2.1.创建分类选项

  • hexo默认是按时间（年月日）分类，如果自定义分类：

    hexo new page categories

  • 生成文件在...\source\categories\index.md
    在这里插入图片描述

  • 编辑创建分类生成的...\source\categories\index.md文件，加入 categories ：

    ---
title: 分类
date: 2024-05-10 14:37:47
type: "categories"
---

2.2. 创建标签选项

  • 默认是没有标签的，生成标签：

    hexo new page tags

  • 生成文件...\source\tags\index.md
    在这里插入图片描述

  • 打开...\source\tags\index.md文件，加入 tags：

    ---
title: 标签
date: 2024-05-10 14:37:47
type: "tags"
---

2.3.打开你要部署的md文件

部署到服务器的文章统一在放在source/_posts目录下的
在这里插入图片描述

打开文章，在头部声明分类和标签

---
title: 安装Nodejs、Git、Npm教程
date: 2024-05-10 14:52:57
categories: 
- web前端
- 环境安装
tags:
- Nodejs
- Git
- Npm
---
  • 分类 只能有一个，如果有多个默认取第一个；标签可以有多个

在这里插入图片描述

编译并上传

hexo g && hexo d

等待审核查看网站是否生效

在这里插入图片描述

要添加更多的归档或者自定义分类，参考：https://www.jianshu.com/p/ebbbc8edcc24

3.hexo报错解决方案

hexo d命令报错 ERROR Deployer not found: git
解决npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to
搭建Hexo博客中遇到的那些“坑”

Hexo 好看的主题推荐

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/10004.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Maven 插件使用

Maven 插件使用

1.spring-boot-maven-plugin 我们直接使用 maven package &#xff08;maven自带的package打包功能&#xff09;&#xff0c;打包Jar包的时候&#xff0c;不会将该项目所依赖的Jar包一起打进去&#xff0c;在使用java -jar命令启动项目时会报错&#xff0c;项目无法正常启动。…
阅读更多...
开源相机管理库Aravis例程学习（七）——chunk-parser

开源相机管理库Aravis例程学习（七）——chunk-parser

开源相机管理库Aravis例程学习&#xff08;七&#xff09;——chunk-parser 简介例程代码函数说明arv_camera_create_chunk_parserarv_camera_set_chunksarv_chunk_parser_get_integer_value 简介 本文针对官方例程中的&#xff1a;05-chunk-parser做简单的讲解。并介绍其中调…
阅读更多...
kali linux更新卡在libc6:amd64 (2.37-15)

kali linux更新卡在libc6:amd64 (2.37-15)

适配于linux的windows子系统&#xff0c;wsl2&#xff0c;安装kali linux&#xff0c;运行 sudo apt update 卡在&#xff1a;Setting up libc6:amd64 (2.37-15) … 关机重启、重新修复执行也不行 解决办法&#xff1a;kill当前apt进程或者关机重启kali-linux&#xff0c;然…
阅读更多...
【系统架构师】-选择题（十二）计算机网络

【系统架构师】-选择题（十二）计算机网络

1、网闸的作用&#xff1a;实现内网与互联网通信&#xff0c;但内网与互联网不是直连的 2、管理距离是指一种路由协议的路由可信度。15表示该路由信息比较可靠 管理距离越小&#xff0c;它的优先级就越高&#xff0c;也就是可信度越高。 0是最可信赖的&#xff0c;而255则意味…
阅读更多...
【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 )

【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 )

文章目录 一、数组对象1、数组简介2、数组创建3、数组检测 - Array.isArray() 方法4、数组检测 - instanceof 运算符 Array 数组对象参考文档 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array 一、数组对象 1、数组简介 在 JavaScr…
阅读更多...
（三十八）第 6 章 树和二叉树（二叉树的二叉线索存储）

（三十八）第 6 章 树和二叉树（二叉树的二叉线索存储）

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrc…
阅读更多...
Html生成自定义函数的图形（2024/5/10）

Html生成自定义函数的图形（2024/5/10）

大概效果如下&#xff1a; 可以自定义函数和x的定义域。 我们可以使用数学表达式解析库来解析用户输入的函数方程&#xff0c;并根据给定的 x 区间计算函数的值&#xff0c;然后使用图表库绘制图形。 在这里&#xff0c;我将使用 math.js 库来解析数学表达式&#xff0c;并使…
阅读更多...
探索计算之美：HTML CSS 计算器案例

探索计算之美：HTML CSS 计算器案例

本次案例是通过HTML和CSS&#xff0c;我们可以为计算器赋予独特的外观和功能&#xff1b; 在这个计算器中&#xff0c;你将会发现&#xff1a; 简洁清晰的界面设计&#xff0c;使用户能够轻松输入和查看计算结果。利用HTML构建的结构&#xff0c;确保页面具有良好的可访问性和…
阅读更多...
【全开源】JAVA上门家政服务系统源码微信小程序+微信公众号+APP+H5

【全开源】JAVA上门家政服务系统源码微信小程序+微信公众号+APP+H5

功能介绍 用户端&#xff1a;精准分类、支持家政、维修、万能服务、一口价、报价、线上、各类家政服务、优惠专区、师傅入驻、商家入驻、我的需求、补费明细、我的投诉 师傅端&#xff1a;接单池、消息通知、接单管理、今日订单、师傅入驻、我的钱包、实名认证 商家端&#…
阅读更多...
HTTPS 原理和 TLS 握手机制

HTTPS 原理和 TLS 握手机制

HTTPS的概述与重要性 在当今数字化时代&#xff0c;网络安全问题日益凸显&#xff0c;数据在传输过程中的安全性备受关注。HTTPS 作为一种重要的网络通信协议&#xff0c;为数据的传输提供了强有力的安全保障。它是在 HTTP 的基础上发展而来&#xff0c;通过引入数据加密机制&a…
阅读更多...
流量分析（一)

流量分析（一)

数据库类流量分析 MySQL流量 常规操作&#xff0c;查找flag ctfhub{} 注意要选择字符集 Redis流量 查找ctfhub结果没找到 尝试把其变成十六进制继续进行查找 看到了前半段flag 接着往下看 找到了后半段的flag MongoDB流量 还是一样查找ctfhub 字符串没找到 转成十六进制也没…
阅读更多...
OpenVoiceV2本地部署教程,苹果MacOs部署流程,声音响度统一,文字转语音,TTS

OpenVoiceV2本地部署教程,苹果MacOs部署流程,声音响度统一,文字转语音,TTS

最近OpenVoice项目更新了V2版本&#xff0c;新的模型对于中文推理更加友好&#xff0c;音色也得到了一定的提升&#xff0c;本次分享一下如何在苹果的MacOs系统中本地部署OpenVoice的V2版本。 首先下载OpenVoiceV2的压缩包&#xff1a; OpenVoiceV2-for-mac代码和模型 https:…
阅读更多...
Kitti数据集再识(官网阅读)

Kitti数据集再识(官网阅读)

KITTI数据集中真值与标定参数 0. 前言 为了再研KITTI数据集及方便下载文件，特地买了梯子，心疼人民币QWQ～555 1. KITTI-home Welcome to the KITTI Vision Benchmark Suite! 我们利用我们的自动驾驶平台开发新颖的具有挑战性的真实世界计算机视觉基准。我们感兴趣的任务是…
阅读更多...
interview_bak

interview_bak

flink内存管理 JVM 存在的几个问题： Java 对象存储密度低。一个只包含 boolean 属性的对象占用了16个字节内存：对象头占了8个，boolean 属性占了1个，对齐填充占了7个。而实际上只需要一个bit（1/8字节）就够了。Full GC 会极大地影响性能，尤其是为了处理更大数据而开了很大…
阅读更多...
图片转图标（ICO）的工具软件

图片转图标（ICO）的工具软件

目前常用的ICO转换方式大多都是网页在线转换&#xff0c;没网就无法使用了。自己编写了一款小软件&#xff0c;可以将各种格式图片转为ICO图标。 目前支持PNG,BMP,JPG,JPEG,GIF等格式的图片转换成ICO&#xff0c;支持的尺寸有常用的16*16&#xff0c;24*24&#xff0c;32*32&am…
阅读更多...
Linux 进程间通信 System V系列: 共享内存,信号量,简单介绍消息队列

Linux 进程间通信 System V系列: 共享内存,信号量,简单介绍消息队列

进程间通信 System V系列: 共享内存,初识信号量 一.共享内存1.引入2.原理3.系统调用接口1.shmget2.shmat和shmdt3.shmctl 4.边写代码边了解共享内存的特性1.ftok形成key,shmget创建与获取共享内存2.shm相关指令3.shmat和shmdt挂接和取消挂接4.shmctl获取共享内存信息,释放共享内…
阅读更多...
政务网离线安装python3及其依赖手册

政务网离线安装python3及其依赖手册

文章目录 python安装及环境配置gcc安装make安装python3安装pip安装 测试测试python3报错:ModuleNotFoundError: No module named _ctypes’测试pip3报错“pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.” 依赖库…
阅读更多...
大模型prompt实例：知识库信息质量校验模块

大模型prompt实例：知识库信息质量校验模块

大模型相关目录 大模型&#xff0c;包括部署微调prompt/Agent应用开发、知识库增强、数据库增强、知识图谱增强、自然语言处理、多模态等大模型应用开发内容 从0起步&#xff0c;扬帆起航。 大模型应用向开发路径&#xff1a;AI代理工作流大模型应用开发实用开源项目汇总大模…
阅读更多...
基于FPGA的数字信号处理（11）--定点数的舍入模式（2）向最临近值取整nearest

基于FPGA的数字信号处理（11）--定点数的舍入模式（2）向最临近值取整nearest

前言 在之前的文章介绍了定点数为什么需要舍入和几种常见的舍入模式。今天我们再来看看另外一种舍入模式&#xff1a;向最临近值取整nearest。 10进制数的nearest nearest&#xff1a; 向最临近值方向取整。它的舍入方式和四舍五入非常类似&#xff0c;都是舍入到最近的整数…
阅读更多...
单链表经典oj题(2)

单链表经典oj题(2)

前言 这次将要把剩下的oj题将以图解和自己的理解把它讲解完&#xff0c;希望对大家有所帮助&#xff0c;这次的讲解也是干货 第一题 21. 合并两个有序链表 - 力扣&#xff08;LeetCode&#xff09; ok这次就简单点&#xff0c;大家自己去看题目了 将两个升序链表合并为一个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023