hexo+github部署个人博客

article/2025/10/29 0:44:46

文章目录

  • hexo+github部署个人博客
    • 前期准备
    • hexo搭建个人博客
    • 新建GitHub仓库
    • 将个人博客部署到Git pages
    • 写文章和发布文章
    • Hexo优化
      • 修改博客目录下的_config.yml配置
    • matery主题美化

hexo+github部署个人博客

前期准备

  1. 安装git git的下载地址
  2. 安装node.js node.js
  3. 注册github账号，创建个人仓库（仓库名：github名称.github.io）

hexo搭建个人博客

  1. 用来检查git和node是否安装成功（hexo需要使用nodebkys.world.js的npm命令）
node -v
npm -v
git --version

正确安装node.js之后显示如下,如不成功，再次检查配置node.js的环境变量
在这里插入图片描述

  1. 使用阿里的国内镜像进行加速
npm config set registry https://registry.npm.taobao.org
  1. 打开cmd安装hexo
npm install hexo-cli -g
hexo -v  # 检查hexo是否安装成功

在这里插入图片描述

  1. 初始化文件夹（ 以下操作均在博客文件夹完成）
  • 在bkysblog文件夹下右击git bash here
    在这里插入图片描述
hexo init bkysblog
  • node_modules：依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的模板
  • source：用来存放文章
  • themes：主题
  • _config.yml：博客的配置文件
  1. 生成博客
hexo g  # 生成静态页面
hexo s  # 打开本地服务器

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

  • 生成后通过 http://localhost:4000 进行预览
    HEXO官网寻找自己喜欢的主题，将其放在D:\bkysblog\theme目录下并且修改博客目录下的_config.yml文件，即可完成个性化定制
  1. 修改_config.yml文件进行配置
theme: hexo-theme-matery  # 这里写上自己theme目录下的主题文件名

新建GitHub仓库

  1. 进入GitHub官网,没有账号的先注册账号

  2. 进入之后，右上角+号，New repository

  3. Repository name要加.github.io后缀（bkystop.github.io），README前面打勾

  4. 生成ssh添加到github

git config --global user.name "注册GitHub用户名"
git config --global user.email "注册GitHub的邮箱"
git config user.name  # 查看自己的用户名
git config user.email  # 查看自己的邮箱
ssh-keygen -t rsa -C "注册GitHub的邮箱"
cat ~/.ssh/id_rsa.pub  # 查看生成的密钥
  1. 打开gitgub，点击图像下的settings，点击ssh and GPG keys，新建一个ssh，把id_rsa.pub里面的信息复制进去。
ssh -T git@github.com

出现Hi bkystop! You’ve successfully authenticated, but GitHub does not provide shell access.类似字样既为完成。

将个人博客部署到Git pages

1… 配置博客目录下的_config.yml文件(将页面拉到最下面）

deploy:type: gitrepository: git@github.com:bkystop/bkystop.github.io.gitbranch: master
  1. 安装deploy-git，安装后与才可以用命令部署到github
npm install hexo-deployer-git --save
  1. 提交到github
hexo clean  # 清理之前生成的东西
hexo g  # hexo generate
hexo d  # hexo deploy

第一次提交需要输入github的username和password

写文章和发布文章

  1. 在博客目录下右击git bash here，安装扩展npm i hexo-deployer-git
npm i hexo-deployer-git
  1. 新建一篇文章
hexo new post "article title"

然后进入D:\bkysblog\source_posts目录下，可以发现多了一个.md文章。

编写markdown可以使用Typora软件

Hexo优化

  • node_modules是node.js的各种库
  • public是文章和新页面的初始配置
  • soure里面存放文章，各类页面，图片
  • themes 用于存放主题文件
  • hexo的主题有很多，我选择的是matery，官方提供junkexuanzeThemes | Hexo

修改博客目录下的_config.yml配置

title: bkys的客栈  # 网站标题
subtitle: 不轲一逝的客栈  ## 网站副标题
description: ''  # 网站描述
keywords:    # 网站的关键词
author: bkys  # 您的名字
language: zh-CN  # 网站使用语言
timezone: ''  # 网站时区，中国大陆可选 Asia

theme: hexo-theme-matery  # 修改主题后记得修改这里
  1. 新建categories分页（展示所有分类）
  • 新建 /source/categories/index.md目录文件，编辑index.md
---
title: categories
date: 2022-01-01 18:00:00
type: "categories"
layout: "categories"
---
  1. 新建标签tags页(展示所有标签)
  • 新建 /source/tags/index.md目录文件，编辑index.md
---
title: tags
date: 2022-01-01 18:00:00
type: "tags"
layout: "tags"
---
  1. 新建关于我about页（展示个人博客信息）
  • 新建 /source/about/index.md目录文件，编辑index.md
---
title: about
date: 2022-01-01 18:00:00
type: "about"
layout: "about"
---
  1. 新建留言板contact页（展示个人博客信息）
  • 新建 /source/contact/index.md目录文件，编辑index.md
---
title: contact
date: 2022-01-01 18:00:00
type: "contact"
layout: "contact"
---
  1. 新建友情链接friends页
  • 新建 /source/friends/index.md目录文件，编辑index.md
---
title: friends
date: 2012-01-01 18:00:00
type: "friends"
layout: "friends"
---
  • 在source目录下新建 _data目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：
[{"avatar": "http://image.luokangyuan.com/4027734.jpeg","name": "闪烁之狐","introduction": "编程界大佬，闪烁之狐本尊，不懂的都可以请教大佬","url": "https://blinkfox.github.io/","title": "前去学习"
}]

这里的信息日后可自行修改

  1. 搜索

安装hexo插件

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置:

search:path: search.xmlfield: post
  1. 添加评论模块
  • matery主题已经提供了常用评论平台的配置, 进入D:\bkysblog\themes\hexo-theme-matery目录下的_config.yml文件进行配置(以下以畅言云平台为例，其余可自行上网搜索)
changyan:enable: trueappId: conf:

进入http://changyan.kuaizhan.com/ 注册，将app id，和app secret分别填入

  1. 修改打赏的二维码图

主题文件的 source/medias/reward文件中，添加自己的图片

reward:enable: truetitle: 你的赏识是我前进的动力wechat: /medias/bkyswechat.pngalipay: /medias/bkysalipay.png  # 添加自己的图片路径
  1. 修改图像，修改QQ号，github链接等私人信息均在D:\bkysblog\themes\hexo-theme-matery目录下的_config.yml文件进行配置，可自行完成
    更多配置可参考官方文档配置 | Hexo 。

matery主题美化

  1. 添加404页面
  • 在博客目录下的source文件夹新建404.md文件，编辑404.md
---
title: 404
date: 2020-02-23 19:37:07
type: "404"
layout: "404"
description: "我崩溃了！找不到你想要的页面了"
---

然后在layout目录下新建404.ejs文件

<style type="text/css">/* don't remove. */.about-cover {height: 90.2vh;}
</style>
<div class="bg-cover pd-header about-cover"><div class="container"><div class="row"><div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2"><div class="brand"><div class="title center-align">404</div><div class="description center-align"><%= page.description %></div></div></div></div></div>
</div><script>// 每天切换 banner 图.  Switch banner image every day.$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
  1. 添加emoji表情支持
  • 安装插件hexo-filter-github -emojis
npm install hexo-filter-github-emojis --save
  • 在博客目录下的 _config.yml文件新增以下配置
githubEmojis:enable: trueclassName: github-emojiinject: truestyles:customEmojis:
  1. 代码高亮
  • 安装插件hexo-prism-plugin
npm i -S hexo-prism-plugin
  • 在博客目录下的 _config.yml文件关闭原有配置
highlight:			#代码块的设置enable: false			#开启代码块高亮line_number: true		#如果未指定语言，则启用自动检测auto_detect: false		#显示行数tab_replace: ''		#用n个空格替换tabs；如果值为空，则不会替换tabswrap: truehljs: false
  • 在博客目录下的 _config.yml文件新增以下配置
# 代码高亮
prism_plugin:mode: 'preprocess'    # realtime/preprocesstheme: 'tomorrow'line_number: false    # default falsecustom_css:


4. 文章字数统计

  • 安装插件hexo-wordcount
npm i --save hexo-wordcount
  • 在主题下的 _config.yml 文件 ，更改以下内容
postInfo:date: true # 发布日期update: true # 更新日期wordCount: true # 文章字数统计totalCount: false # 站点总文章字数min2read: false # 文章阅读时长readCount: false # 文章阅读次数
  1. 添加RSS订阅
  • 安装插件hexo-generator-feed
npm install hexo-generator-feed --save
  • 在博客目录下的 _config.yml文件新增以下配置
feed:type: atompath: atom.xmllimit: 20hub:content:content_limit: 140content_limit_delim: ' 'order_by: -date
  1. 文章Front-matter介绍
配置默认值描述
titleMarkdown 的文件标题文章标题
date文件创建时的日期时间发布时间
author博客目录下 _config.yml 中的 author文章作者
imgfeatureImages 中的某个值文章特征图
toptrue推荐文章（置顶） top 值为 true，首页推荐文章
tags无文章标签，一篇文章可以多个标签
categories无文章分类
password无文章阅读密码 ， 使用前在主题的 config.yml 中激活 verifyPassword 选项
categories无文章分类 ， 建议一篇文章一个分类

此外还有cover ，coverImg ，toc ，mathjax ，summary ，reprintPolicy 均可自行配置

  • 建议更改博客目录下的scaffolds下的post.md修改同意模板，以后每次hexo new均使用此模板
title: {{ title }}
date: {{ date }}
img: 
tags:
categories: 
top: 
passworld:
summary

此文件根据自己需求配置

  1. 修改主题中的图片
  • 推荐大家使用图床，PicGo+GitHub图床，同时可以避免部分情况下hexo clean清除本地新加入的图片。
  • PicGo+GitHub图床搭配typora填入图片页十分方便

PicGo+GitHub搭建图床

  • 记得安装hexo-asset-image插件，否则md文档中的img属性无法使用
npm install hexo-asset-image --save

http://chatgpt.dhexx.cn/article/r9BV8OBq.shtml

相关文章

利用github进行自定义博客地址

利用github进行自定义博客地址

写在前面&#xff1a; 大家好&#xff0c;我是 花狗Fdog &#xff0c;来自内蒙古的一个小城市&#xff0c;目前在泰州读书。 很感谢能有这样一个平台让我能够在这里分享所学所感。 我喜欢编程&#xff0c;喜欢代码&#xff0c;喜欢去做一个程序员。 努力学习&#xff0c;争取多…
阅读更多...
如何搭建github.io博客

如何搭建github.io博客

零、宣传我的Github.io博客 https://ruixiangjiang.github.io/ 如果我的电脑没开就不能访问。。。正在调试中。。。 一、注册一个账号 进入www.github.com &#xff0c;然后注册。首页右上角头像那里有一个“”号&#xff0c;点击后选择“New repositor”。创建完之后点击“…
阅读更多...
使用Github.io打造个人博客网站

使用Github.io打造个人博客网站

Github.io上可以方便地打造自己的博客网站&#xff0c;相对于CSDN等社区网站来说既没有广告又能凸显个人调性。 建站步骤 建站步骤非常简单 在个人github上建一个repository&#xff0c;名字必须是username.github.io 推送一个静态html上去 # clone the prj git clone htt…
阅读更多...
搭建hexo+Github博客

搭建hexo+Github博客

摘要 本文主要向大家介绍了如何搭建hexo-Github博客的详细过程&#xff0c;有需要的朋友们可以尝试阅读&#xff0c;希望对大家有帮助。 简要吐槽 搭博客其实没那么麻烦&#xff0c;但是在网上各类教程的“指导下”&#xff0c;我不知道放弃了多少次又重新试了多少次&#xff…
阅读更多...
GitHub: 个人博客搭建

GitHub: 个人博客搭建

GitHub: 个人博客搭建 食材&#xff1a;jekyll 工具&#xff1a;GitHub&#xff0c;visual studio code&#xff0c;chrome。 第一步&#xff1a;安装Jekyll&#xff0c;具体参考官方链接 https://www.jekyll.com.cn/docs/step-by-step/01-setup/ 操作指南 安装一个完整的…
阅读更多...
hexo+github搭建博客(超级详细版，精细入微)

hexo+github搭建博客(超级详细版，精细入微)

转载此文章前&#xff0c;请先联系作者&#xff0c;经作者同意后再转载&#xff0c;并请注明原文链接和作者&#xff0c;整理这些不容易&#xff0c;最终版权归作者所有&#xff0c;谢谢合作&#xff01;移步我的个人博客&#xff1a;https://yafine-blog.cn&#xff0c;阅读体…
阅读更多...
用github搭建个人(博客网站

用github搭建个人(博客网站

&#x1f308;博客主页&#xff1a;卿云阁 &#x1f48c;欢迎关注&#x1f389;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; &#x1f31f;本文由卿云阁原创&#xff01; &#x1f64f;作者水平很有限&#xff0c;如果发现错误&#xff0c;请留言轰炸哦&#xff01;万分感谢&a…
阅读更多...
个人博客构建——github个人博客

个人博客构建——github个人博客

摘要 为什么需要构建自己的博客呢&#xff1f;第一&#xff0c;是为解决平台的可能随意删除自己博文&#xff0c;需要有一个不被其他所左右的分享平台&#xff0c;第二&#xff0c;需要一个载体来记录的自己的学习内容&#xff0c;第三&#xff0c;也是为自己自媒体提前做一个…
阅读更多...
Hexo+GitHub免费搭建个人博客(保姆级教程)

Hexo+GitHub免费搭建个人博客(保姆级教程)

文章目录 HexoGitHub免费搭建个人博客(保姆级教程)安装依赖环境Git的下载与安装Node.js下载与安装:red_circle:***注意一***:red_circle:***注意二*** Git和Node.js工具工作状态检验:red_circle:**注意三** 安装Hexo:ng:小插曲1:ng:小插曲3&#xff1a; 生成博客文件博客效果预…
阅读更多...
教程：纯小白如何搭建自己的Github博客并写第一篇博文

教程：纯小白如何搭建自己的Github博客并写第一篇博文

文章目录 1 搭建Github博客1.1 确认github上创建的repository名称1.2 用系统命令行安装hexo并初始化本地博客文件夹1.3 下载并安装hexo NexT主题1.4 更新部署博客页面 2 创建并发布自己的第一篇文章2.1 用hexo new命令创建文章脚本2.2 编辑文章2.3 发布文章/更新博客 写在前面&…
阅读更多...
搭建自己的github.io博客

搭建自己的github.io博客

搭建自己的github.io博客 github.io是基于github的repo管理&#xff0c;这意味着咱们对其是有觉得的控制&#xff0c;这个跟放在第三方的平台比&#xff0c;可控性要好太多。下面咱们将详细讲述如何基于github.io打造属于自己的博客网站。 要完成自己的github.io博客网站&…
阅读更多...
github个人博客快速搭建教程

github个人博客快速搭建教程

文章目录 首先搭建起一个github博客1 左上角标题及简介以及下方的介绍2 评论和访客数3 文章4 Home Archives Categories 和 Tags5 Collections6 Demo7 About 首先搭建起一个github博客 首先建立一个个人博客github仓库。其实只要把 需要的代码 fork下来, 仓库名改为自己的{{gi…
阅读更多...
如何使用Github搭建个人博客

如何使用Github搭建个人博客

介绍 在本文中&#xff0c;我将介绍如何使用GitHub搭建个人博客&#xff08;免费&#xff09;。GitHub是一个功能强大的版本控制和协作平台&#xff0c;它也可以用来托管和发布静态网页。通过将你的个人博客托管在GitHub上&#xff0c;你可以享受到版本控制的好处&#xff0c;…
阅读更多...
github完成个人博客的搭建过程

github完成个人博客的搭建过程

依托于github完成个人博客的搭建过程&#xff0c;但目前只完成了基础部分 Todo: {% cb 评论功能,false, false %} {% cb 版权信息,false, false %} {% cb 页面个性化,false, false %} {% cb 云服务器部署,false, false %}  阿里云学生免费领取6个月 {% cb 公网IP访问,false, f…
阅读更多...
php书写规范

php书写规范

一、基本约定 1、源文件 &#xff08;1&#xff09;纯PHP代码源文件只使用 <?php 标签&#xff0c;省略关闭标签 ?> &#xff1b; &#xff08;2&#xff09;源文件中PHP代码的编码格式必须是无BOM的UTF-8格式&#xff1b; &#xff08;3&#xff09;使用 Unix LF(换…
阅读更多...
SQL书写规范

SQL书写规范

SQL书写规范可以参考&#xff1a; SQL样式指南 SQL style guide by Simon Holywell
阅读更多...
实验报告怎么写之书写规范

实验报告怎么写之书写规范

实验报告怎么写之书写规范 前几天交深度学习实验报告&#xff0c;由于写得太随意被助教师姐给批了… 之前一直觉得写报告是件特别烦人的事&#xff0c;随便写写就完事了&#xff0c;而且之前课程的实验对报告规范也都无要求&#xff0c;所以我就养成了随便写报告的习惯。但是…
阅读更多...
vlc下载视频

vlc下载视频

好久没有用这个功能&#xff0c;今天突然使用一下发现不知道怎么用了&#xff0c;特此记录。 环境 OS&#xff1a;mac VLC&#xff1a;3.0.6, 官方下载地址&#xff1a;https://www.videolan.org/vlc/index.htmlWindows下载地址&#xff1a;https://www.videolan.org/vlc/do…
阅读更多...
Linux 虚拟机与 Linux Live 镜像

Linux 虚拟机与 Linux Live 镜像

Linux 虚拟机与 Linux Live 镜像各有优势&#xff0c;也有不足。 首先我得承认&#xff0c;我非常喜欢频繁尝试新的 Linux 发行版本。然而&#xff0c;我用来测试它们的方法根据每次目标而有所不同。在这篇文章中&#xff0c;我们来看看两种运行 Linux 的模式&#xff1a;虚拟…
阅读更多...
kkfileView linux x86架构 离线安装

kkfileView linux x86架构 离线安装

文章目录 前言一、安装 LiberOffice二、安装kkfileView1.下载安装包2.启动 总结 前言 本文提供的所有文件不支持arm架构的linux系统。 一、安装 LiberOffice 下载https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz 安装 tar -zxvf LibreOffice_7.1.4…
阅读更多...
推荐文章

Copyright @ 2022~2023