github博客+hexo

article/2025/10/29 0:35:22

这里基于ubuntu18,win10其实一样的,把sudo去掉就行了

安装

安装git
配置github的ssh

安装Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本
建议换个源

npm install express --registry=https://registry.npm.taobao.org

在github创建一个仓库
xxx.github.io
在这里插入图片描述
然后确认完后是这样的
在这里插入图片描述

把username.github.io改成在github创建的仓库名

mkdir username.github.io
cd username.github.io
sudo npm install -g hexo-cli
hexo init
npm install
npm install hexo-deployer-git --save

接着

hexo g
hexo s

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

用这个来生成新的页面
xxx换成文章标题

hexo new 'xxx'

显示主题

以next主题为例
把主题下到themes文件夹里

git clone https://github.com/theme-next/hexo-theme-next themes/next

在_config.yml里
theme:next
在这里插入图片描述

在这里插入图片描述

显示数学公式

next主题

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

修改node_modules/kramed/lib/rules/inline.js
在这里插入图片描述
修改11行的escape

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,escape: /^\\([`*\[\]()#$+\-.!_>])/,

修改20行的em

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

在这里插入图片描述
修改themes/next/_config.yml

# Math Formulas Render Support
math:# Default (true) will load mathjax / katex script on demand.# That is it only render those page which has `mathjax: true` in Front-matter.# If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.per_page: true# hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.mathjax:enable: true# See: https://mhchem.github.io/MathJax-mhchem/mhchem: true

在这里插入图片描述

在文章的开头加上
mathjax: true
在这里插入图片描述

hexo clean
hexo g
hexo s

注意点:
大括号不要用\left{ \right},要用\lbrace \rbrace
有时候公式没出来,可以多刷新一下

发布github

把这个ssh复制了
在这里插入图片描述
在最外面的_config.yml里
修改

deploy:type: gitrepository: git@github.com:username/username.github.io.gitbranch: master

在这里插入图片描述
每次要发布到github的时候

hexo g
hexo d

显示图片

npm install hexo-asset-image --save

修改node_modules/hexo-asset-image/index.js为

'use strict';
var cheerio = require('cheerio');// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-string
function getPosition(str, m, i) {return str.split(m, i).join(m).length;
}var version = String(hexo.version).split('.');
hexo.extend.filter.register('after_post_render', function(data){var config = hexo.config;if(config.post_asset_folder){var link = data.permalink;if(version.length > 0 && Number(version[0]) == 3)var beginPos = getPosition(link, '/', 1) + 1;elsevar beginPos = getPosition(link, '/', 3) + 1;// In hexo 3.1.1, the permalink of "about" page is like ".../about/index.html".var endPos = link.lastIndexOf('/') + 1;link = link.substring(beginPos, endPos);var toprocess = ['excerpt', 'more', 'content'];for(var i = 0; i < toprocess.length; i++){var key = toprocess[i];var $ = cheerio.load(data[key], {ignoreWhitespace: false,xmlMode: false,lowerCaseTags: false,decodeEntities: false});$('img').each(function(){if ($(this).attr('src')){// For windows style path, we replace '\' to '/'.var src = $(this).attr('src').replace('\\', '/');if(!/http[s]*.*|\/\/.*/.test(src) &&!/^\s*\//.test(src)) {// For "about" page, the first part of "src" can't be removed.// In addition, to support multi-level local directory.var linkArray = link.split('/').filter(function(elem){return elem != '';});var srcArray = src.split('/').filter(function(elem){return elem != '' && elem != '.';});if(srcArray.length > 1)srcArray.shift();src = srcArray.join('/');$(this).attr('src', config.root + link + src);console.info&&console.info("update link as:-->"+config.root + link + src);}}else{console.info&&console.info("no src attr, skipped...");console.info&&console.info($(this));}});data[key] = $.html();}}
});

在这里插入图片描述
修改_config.yml
把post_asset_folder改为true
在这里插入图片描述
然后比如你要引用图片
博客名字叫test.md,就创建一个目录test,图片放进去
用相对路径引用
千万不要在前面加./,不然github上可能看不到
在这里插入图片描述

参考
https://zhuanlan.zhihu.com/p/32957389
https://www.jianshu.com/p/7ab21c7f0674
https://blog.csdn.net/dianling3902/article/details/101267806
https://www.cnblogs.com/iHeling/p/14095986.html
https://blog.eson.org/pub/6aa77778/
https://lanlan2017.github.io/blog/14ee6880/
https://www.jianshu.com/p/f72aaad7b852


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

相关文章

【hexo+gitee/github】博客搭建

文章目录 参考资料1. 使用gitee&#xff08;github&#xff09;与hexo好处2. 安装2.1 安装Nodejs2.2 安装git2.3 安装Hexo 3. 建站4. 启动5. 配置5.1 主题配置 6. 部署到gitee pages6.1 创建一个gitee仓库6.2 配置路径6.3 开启GiteePages服务6.4 github pages部署6.4. 博客源代…

hexo+github部署个人博客

文章目录 hexogithub部署个人博客前期准备hexo搭建个人博客新建GitHub仓库将个人博客部署到Git pages写文章和发布文章Hexo优化修改博客目录下的_config.yml配置 matery主题美化 hexogithub部署个人博客 前期准备 安装git git的下载地址安装node.js node.js注册github账号&am…

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

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

如何搭建github.io博客

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

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

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

搭建hexo+Github博客

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

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搭建博客(超级详细版,精细入微)

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

用github搭建个人(博客网站

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

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

摘要 为什么需要构建自己的博客呢&#xff1f;第一&#xff0c;是为解决平台的可能随意删除自己博文&#xff0c;需要有一个不被其他所左右的分享平台&#xff0c;第二&#xff0c;需要一个载体来记录的自己的学习内容&#xff0c;第三&#xff0c;也是为自己自媒体提前做一个…

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

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

教程:纯小白如何搭建自己的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的repo管理&#xff0c;这意味着咱们对其是有觉得的控制&#xff0c;这个跟放在第三方的平台比&#xff0c;可控性要好太多。下面咱们将详细讲述如何基于github.io打造属于自己的博客网站。 要完成自己的github.io博客网站&…

github个人博客快速搭建教程

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

如何使用Github搭建个人博客

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

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

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

php书写规范

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

SQL书写规范

SQL书写规范可以参考&#xff1a; SQL样式指南 SQL style guide by Simon Holywell

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

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

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…