使用hexo搭建个人博客 在Github上一键部署

2023-11-03

文章目录

一、初步搭建本地Hexo博客

1.安装

安装前提

搭建环境:Windows 10

  • Node.js (Node.js 版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本)
  • Git

验证成功安装Node.js跟Git,通过查看版本号即可

node -v
npm-v

安装 Hexo

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm install -g hexo-cli

2.建站

生成项目

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

hexo init <项目名称>

通过VScode软件打开初始化的博客(我这里命名为了test)

运行项目

运行服务:(hexo默认使用4000端口)

hexo s

通过 http://localhost:4000 访问本地hexo服务

二、更换博客主题(hexo-theme-matery)

hexo-theme-matery中文文档

1.下载

当你看到这里的时候,应该已经有一个自己的 Hexo 博客了。如果还没有的话,不妨使用 Hexo 和 Markdown 来写博客和文章。

点击 这里 下载 master 分支的最新稳定版的代码,解压缩后,将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以在你的 themes 文件夹下使用 Git clone 命令来下载:

git clone https://github.com/blinkfox/hexo-theme-matery.git

2.更换主题

将博客文件夹下的配置文件_config.yml的主题theme改成:hexo-theme-matery

更换完成重新运行服务:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DhUkNg97-1595943602566)(https://cdn.jsdelivr.net/gh/pancilyo/pancilyo.github.io@myblog/source/_posts/MdPicture/image-20200725140922499.png)]

主题已成功修改

3.更换中文

将博客文件夹下的配置文件_config.yml的语言language改为zh-CN

4.修改主题项中的配置

根据hexo-theme-matery中文文档可自行添加功能项

新建分类 categories 页

categories 页是用来展示所有分类的页面,如果在你的博客 source 目录下还没有 categories/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md,至少需要以下内容:

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

新建标签 tags 页

tags 页是用来展示所有标签的页面,如果在你的博客 source 目录下还没有 tags/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md,至少需要以下内容:

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面,如果在你的博客 source 目录下还没有 about/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md,至少需要以下内容:

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建友情链接 friends 页(可选的)

friends 页是用来展示友情链接信息的页面,如果在你的博客 source 目录下还没有 friends/index.md 文件,那么你就需要新建一个,命令如下:

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md,至少需要以下内容:

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时,在你的博客 source 目录下新建 _data 目录,在 _data 目录中新建 friends.json 文件,文件内容如下所示:

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬,只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

新建 404 页

如果在你的博客 source 目录下还没有 404.md 文件,那么你就需要新建一个

编辑你刚刚新建的页面文件 /source/404.md,至少需要以下内容:

---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops~,我崩溃了!找不到你想要的页面 :("
---

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看,所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮,安装命令如下:

npm i -S hexo-prism-plugin

然后,修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false,并新增 prism 插件相关的配置,主要配置如下:

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索,安装命令如下:

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

中文链接转拼音(建议安装)

如果你的文章名称是中文的,那么 Hexo 默认生成的永久链接也会有中文,这样不利于 SEO,且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下:

npm i hexo-permalink-pinyin --save

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

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

:除了此插件外,hexo-abbrlink 插件也可以生成非中文的链接。

文章字数统计插件(建议安装)

如果你想要在文章中显示文章字数、阅读时长信息,可以安装 hexo-wordcount插件。

安装命令如下:

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中,将各个文章字数相关的配置激活即可:

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

添加emoji表情支持(可选的)

本主题新增了对emoji表情的支持,使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成,把对应的markdown emoji语法(::,例如::smile:)转变成会跳跃的emoji表情,安装命令如下:

npm install hexo-filter-github-emojis --save

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

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

添加 RSS 订阅支持(可选的)

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS,安装命令如下:

npm install hexo-generator-feed --save

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

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件,然后在 public 文件夹中即可看到 atom.xml 文件,说明你已经安装成功了。

三、Github上搭建博客

1.新建仓库

2.初始化仓库

①初始化本地仓库
git init
②添加一个远程git地址
git remote add origin <远程仓库地址>

3.安装hexo-depoyler-git依赖

yarn add hexo-deployer-git

4.修改部署相关的配置:

修改 Hexo 根目录下 _config.yml 文件中deploy的相关属性:

deploy:
  type: git
  repo: <仓库地址>
  branch: master

5.部署代码

npm run deploy

查看站点是否已被部署成功打开github仓库中setting选项,拉下去找到GitHub Pages

显示此页面即部署成功

打开站点查看

站点已成功部署,并且可以访问

四、实现Github自动化部署

由于上面操作中master分支已被占用,我们要把源代码提交到另外一个分支上

1.首先commit本地代码

git add .
git commit -m 'feat:blog init'

2.切换分支 myblog

3.将myblog分支push到github中

git push --set-upstream origin myblog

4.配置github actions

在hexo根目录下创建文件deploy.yml,文件路径为:.github/workflows/deploy.yml

文件内容
name: Build and Deploy
on: [push]
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout 									
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用hexo搭建个人博客 在Github上一键部署 的相关文章

  • 给Hexo搭建的博客绑定域名

    前言 前几天利用闲置时间 xff0c 利用hexo在GitHub上搭建了一个静态博客 xff0c 那么既然是个人博客 xff0c 当然要上自己的域名了 step 1 首先你得你得搭建 XXX github io 这样的博客 xff0c he
  • 使用云服务器搭建Hexo个人博客

    彻底搞懂如何使用Hexo 43 GitHubPages搭建个人博客 讲解了如何使用Hexo 43 GitHubPages来搭建一款属于自己的个人博客 使用了一段时间后 xff0c 发现访问速度偏慢 xff0c 而且自己也在前段时间腾讯云做活
  • Gitee Pages Pro + Hexo自定义域名

    前景摘要 xff1a 最近 xff0c 本菜鸡打算把hexo的博客站点搬到gitee xff0c 毕竟gitee pages pro有一个月的免费自定义域名的机会 xff01 xff01 其实最主要的原因还是coding pages的延迟有
  • Hexo 最常用的几个命令

    Hexo 约有二十个命令 xff0c 但普通用户经常使用的大概只有下列几个 hexo s hexo s 启动本地服务器 xff0c 用于预览主题 默认地址 xff1a http localhost 4000 hexo s 是 hexo se
  • Hexo/Github.io 配置腾讯云CDN

    前言 使用Github io搭建自己的博客时可能会遇到访问速度不理想的情况 xff0c 可以采用如下几种方案解决 xff1a 将Hexo部署到阿里云 xff08 点击查看 xff09 xff0c 直接访问阿里云 xff0c 但这种方式会暴露
  • 利用Github和Hexo搭建自己的博客

    之前的自己搭的服务器gg了 xff0c 一直也没动手继续去恢复一下 xff0c 前段时间看操作系统教程的时候被NEXT这个主题吸引了 xff0c 再次萌生了整个博客的想法 之前就有听说过Github可以搭博客 xff0c 所以这次也打算试一
  • hexo stellar博客设置Twikoo评论(使用Zeabur 部署)

    2023年7月24日更新 需要绑定一下支付宝 每个月大约4块钱 还算对学生党划算 否则可能无法使用免费的服务 说是免费额度结果还是要钱鸭 这里按要求开通就好了 主要参考 stellar 评论插件配置 Twikoo 这里使用的是Twikoo
  • 在GitHub上搭建Hexo个人博客

    文章目录 概述 准备工作 安装Git 安装Node js 安装Hexo 执行安装命令 初始化网站 生成默认网页 启动本地预览服务 修改主题 部署到GitHub 配置免密SSH登陆 创建个人主页仓库 绑定个人域名 可选 上传Hexo生成的博客
  • Hexo搭建博客教程-基于Butterfly主题

    title Hexo搭建博客教程 tags Hexo 博客教程 categories Hexo keywords Hexo 博客教程 description Hexo搭建博客 以及主题butterfly中一些常规配置 cover https
  • Hexo 完整使用教程

    官网 官网地址 https hexo io zh cn 环境 1 node hexo 基于 node 所以首先要安装node环境 2 npm 包管理工具 环境配置请参考本站对应安装教程 快速开始 安装 hexo npm install g
  • hexo博客优化之文章置顶+置顶标签

    本文首发于wangwlj com 博文置顶 一种方法是手动对相关文件进行修改 具体可参考这篇文章 另一种方法就是 目前已经有修改后支持置顶的仓库 可以直接用以下命令安装 npm uninstall hexo generator index
  • 搭建Hexo博客中遇到的那些“坑”

    目录 前言 那些 坑 1 运行后网页显示代码 2 部署后提示 ERROR Deployer not found git 3 提示hexo INFO Validating config 4 提示什么我忘记记录下来了 总之是因为版本过低 5 B
  • 怎么建立一个自己的博客

    怎么建立一个自己的博客 1 写在开头 其实我自己写的文章也不多 只是看到有些东西会做一下记录 所以部署一个自己的博客来记录这些东西也就会方便很多 而Hexo框架的博客使用方便对电脑要求也不高 并且有很多可以使用的主题 所以就用它把 先来看看
  • hexo主题的github地址(clone)

    文章目录 主题地址 indigo next yelee clexy clean blog cyanstyle freemind icarus lite 切换主题 主题地址 主题示例演示 主题非常多 仅列一些自己比较喜欢也常用的几个地址 in
  • 【Hexo themes】【闪烁之狐 Matery】【简】

    文章目录 1 Down 2 修改Hexo配置文件 3 预览 4 部署更新 Summary Reference 个性化 PS 上午在 Hexo themes找了一些主题 有的太简单 可以配置的功能少 有些太复杂 以up现有能力要调一会才能开通
  • Hexo个人博客主题配置

    系列文章目录 1 Hexo Github Gitee 搭建个人博客 2 Hexo个人博客主题配置 目录 系列文章目录 配置站点信息 修改主题 Next主题配置 样式 favicon avatar rss 代码块 回到页面顶部 阅读进度条 G
  • 使用Hexo 配置自己的博客

    安装前提 在Windows下可以到git官网 推荐使用代理 或者对应的镜像网站进行下载 安装git客户端 安装node js 使用git bash 安装 cURL curl https raw github com creationix n
  • hexo(sakura)给博客增添侧边栏(回到顶部,跳转评论,深色模式,播放音乐)&&Valine-1.4.4新版本尝鲜+个性制定(表情包、qq头像、UI样式)

    文章目录 hexo sakura 给博客增添侧边栏 回到顶部 跳转评论 深色模式 播放音乐 原理 直接使用 Valine 1 4 4新版本尝鲜 个性制定 表情包 qq头像 UI样式 总结 本文全是参考大佬博客 顺着步骤写的记录 hexo s
  • 如何为 Hexo 实现选项卡式代码块标签

    我正在尝试在 hexo 中创建选项卡式代码块 作为标签插件 但我不知道在哪里放置我的 js 函数 我想我可以使用加载该函数js 助手 https hexo io api helper html但我不知道在哪里包含助手 我尝试将其添加到标签插
  • 如何将README.md文件添加到HEXO生成的博客的根目录中?

    我的博客是基于Github Pages我正在使用的程序是HEXO 生成的文件HEXO不包含 README md 文件 因此我无法在 Github 存储库页面上声明我的博客 所以我想将 README md 文件添加到该文件夹 中HEXO生成

随机推荐

  • 最全的雅思8000词汇pdf_雅思剑桥1-14同义词汇总,屠鸭必备!(含剑14)

    剑14真题出来之后很多烤鸭私聊哥说什么时候有剑14的同义词替换啊 这不 哥这就来分享了 一个合格的雅思考生的词汇量要在7000左右 而在雅思考试中关于词汇的运用最重要的一部分是 同义词替换 同义词的考察贯穿了雅思考试听说读写的每一项 Lis
  • 【unity笔记】OnCollision和OnTrigger方法使用的一个误区【2D】

    最近在做2D游戏 所以经常使用到两个检测碰撞的方法 OnCollisionXX 方法或OnTriggerXX方法 两个方法的使用大致相同 传入的参数略有差别 void OnCollisionEnter2D Collision2D colli
  • 博弈论【算法】

    目录 定义 巴什博弈 减法博弈 威佐夫博弈 定义 博弈论主要研究公式化了的激励结构间的相互作用 是研究具有斗争或竞争性质现象的数学理论和方法 博弈论考虑游戏中的个体的预测行为和实际行为 并研究它们的优化策略 如囚徒困境 链接 在算法竞赛中出
  • 设计模式—单例模式

    文章目录 为什么使用单例模式 实现 预加载 懒加载 懒加载 线程安全 synchronized synchronized volatile 为什么使用单例模式 单例最有代表就是我们耳熟能详的 windows 任务管理器 无论我们创建多少次
  • 记录一下项目踩到的一些坑(不断更新)

    1 HTTPS 问题排查 相信大家PHP在做第三接口或者一些接口调用的时候都会用到curl 在本地部署开发没问题 但是部署到正式服务器的时候就会导致返回一些无知错误 解决方案排查 可以考虑一下是否在curl 的时候做了HTTPS的校验 2
  • Java中为什么要引入泛型

    优点1 没有使用泛型 向list集合中添加非字符串 运行时会报错 类型不匹配 ObjectList java package cn nxl2018 import java util ArrayList import java util Li
  • 解决 : ValidationError: Invalid options object. PostCSS Loader ......

    问题背景 使用 vue cli 5 x 脚手架工具搭建一个初始化项目架子 在 vue config js 里面 配置 移动端 的 适配性插件 postcss pxtorem 的代码时 运行启动项目时报错如下图 Compiled with p
  • openfeign get请求的正确写法

    openfeign 请求get自动变成post 这里试过很多方法都不行 比如 SpringQueryMap 使用如下方法可以方便解决 记录一下方便后人 RequestLine GET api daily param1 param1 para
  • 如何从技术岗位转为管理岗位呢?

    很多做技术的人 做多了几年总是担心自己的职业生涯发展道路 对自己的职业生涯发展缺乏方向和清晰的目标 而且 不少技术岗位的人员都认为技术不能干一辈子 总是希望有更好的机会 然而如何从技术岗位转型为管理岗位呢 这难倒了不少技术岗位的人 毕竟技术
  • X2000 SDK 开发笔记

    SDK编译 1 设置环境变量 在工程目录下执行命令 source build envsetup sh 2 选择 device 在工程目录下执行命令 lunch 根据硬件底板版本选择v10 v20 v30 根据开发板flash默认选择nand
  • 谷歌云平台及其产品介绍

    谷歌云平台 Google Cloud Platform 是谷歌所提供的一套公有云计算服务 该平台包括一系列在 Google 硬件上运行的用于计算 存储和应用程序开发的托管服务 软件开发人员 云管理员和其他企业 IT 专业人员可以通过公共互联
  • 每节课都是一个项目 手把手用STM32打造联网气象站-1-安装开发环境

    工欲善其事必先利其器 我们为了打造一个可以联网的智能气象站 先得把集成开发环境IDE整利索 亮点在最后 读完有惊喜 我们这个教程的集成开发环境包括了2部分 第一部分是常见的KEIL 本文会讲解KEIL的安装和使用 第二部分是更加常见的vsc
  • Apollo配置中心热加载mysql_一种Apollo配置中心的搭建方法与流程

    本发明涉及一种信息技术处理领域 特别涉及一种apollo配置中心的搭建方法 背景技术 随着分布式系统中程序功能的日益复杂 程序的配置日益增多 各种功能的开关 参数的配置 服务器的地址等的配置错综复杂 对程序配置的期望值也越来越高 配置修改后
  • Odoo服务器搭建——保姆级教程

    文章目录 一 工具准备 二 更新系统 三 添加系统工具 四 安装Postgresql数据库 1 下载Postgresql 2 启动Postgresql 3 创建数据库用户 4 在新用户中创建数据库 五 上传Odoo源码 1 创建目录 2 上
  • ESP32 LVGL使用外部FLASH字体BIN文件

    ESP32 LVGL使用外部FLASH字体BIN文件 生成字体文件 使用LvglFontTool 这个工具 生成类型勾选XBF字体 外部BIN文件 会生成两个文件 一个myFont c 和一个bin文件 然后把bin文件放到spiffs分区
  • nginx 代理 portainer 报 Unable to retrieve server settings and status

    一 nginx配置 location portainer proxy pass http localhost 19000 proxy set header Via nginx proxy set header Host host proxy
  • 鸿蒙设备开发之Hello World

    引言 每当学习一门新的编程语言或者上手一款新的开发板 我们经常写的第一个程序要么是在终端窗口中打印输出 Hello World 要么就是驱动GPIO点亮开发板上的LED灯 本文是在学习鸿蒙设备开发过程中 带大家写的第一个程序 通过这个程序
  • go mod tidy报错 unknown revision

    或者是如下报错 fatal could not read Username for https xxx terminal prompts disabled Confirm the import path was entered correc
  • 数学建模写作指导20篇(二)-数学建模论文写作通用模板

    一 摘要 内容 1 用 1 2 句话说明原问题中要解决的问题 2 建立了什么模型 在数学上属于什么类型 建模的思想 思路 模型特点 3 算法思想 求解思路 特色 4 主要结果 数值结果 结论 回答题目的全部 问题 5 模型优点 结果检验 模
  • 使用hexo搭建个人博客 在Github上一键部署

    文章目录 一 初步搭建本地Hexo博客 1 安装 安装前提 安装 Hexo 2 建站 生成项目 运行项目 二 更换博客主题 hexo theme matery 1 下载 2 更换主题 3 更换中文 4 修改主题项中的配置 新建分类 cate
Powered by Hwhale