利用GithubPage和Hexo搭建个人博客

news2025/1/11 2:44:42

title: 利用Github搭建个人博客
date: 2022-11-28 20:55:30
tags: [blogs]
categories: Hexo

建立Git远程仓库

固定格式为：name.github.io

![]](https://img-blog.csdnimg.cn/fa9d7320d1cc422a8a79f2b41dd8458e.png)

开启Github Pages

在这里插入图片描述

设置github的token登陆

在这里插入图片描述

连接不上？：

$ git push -u origin master
fatal: unable to access 'xxx': Failed to connect to github.com port 443: Timed out

git config --unset https.proxy 试试

设置主分支

git branch -M main

git push -u origin main

安装Hexo

在npm环境下：npm install hexo-cli -g安装Hexo插件。检查版本号：hexo -v

D:\>cd D:\OpenSourceProject\myblog

D:\OpenSourceProject\myblog>npm install hexo-cli -g

在这里插入图片描述

在博客项目目录下输入hexo init blog 初始化博客项目生成存储博客的文件夹blog文件夹

在这里插入图片描述

在blog目录下进行安装：npm install ：

在这里插入图片描述

生成如下package-lock.json：

在这里插入图片描述

使用

在blog目录下输入hexo g生成静态网页，然后输入hexo s打开本地服务器来预览网页

在这里插入图片描述

修改配置信息

title: # 标题
subtitle: # 副标题
description: # 站点描述
keywords: # 搜索关键词
author: # 作者
language: zh-Hans # 语言
timezone: # 时区

修改主题

https://hexo.io/zh-cn/

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

https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

在这里插入图片描述

将其解压到你的HEXO下的Themes目录下即可（这里可以看到默认的landscape）：

在这里插入图片描述

切换主题

修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery-master

_config.yml 文件的其它修改建议:

请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
如果你是中文用户，则建议修改 language 的值为 zh-CN。

在这里插入图片描述

略

发表博文文章标头

title: 利用Github搭建个人博客
date: 2022-11-28 20:55:30
tags:[blogs]
categories:Hexo

# 开启服务
hexo server

# 新建文章
hexo new a

# 新建草稿
hexo new draft b

# 发布草稿成为文章
hexo publish b

# 发布关于
hexo new page c

# 生成静态文章
hexo generate 或者是 hexo g
# 部署文章
hexo deploy 或者是 hexo d

图片无法加载问题

引用：blog\source\images\a ，文件在：D:\OpenSourceProject\myblog\blog\source_posts\a.md

使用hexo生成静态资源后,由于url的问题会出现图片加载的问题,现在网上的文章及官方的解决方案大概分为三种:

将图片放入source/images目录下,每次generate都会生成图片,在使用相对或绝对路径进行引用
npm install https://github.com/CodeFalling/hexo-asset-image --save , 配置hexo的_config.yml文件, 将 post_asset_folder 设置为true, 这样每次new 生成一个文章时都会同步生成一个同名的文件夹,然后设置相对或绝对路径.
使用hexo官方的解决方案,使用模版变量, {% asset_img slug [title] %}

MarkDown编写优化

修改Typora： …/images/ ${filename} 为 ./$ {filename}

同时配置有限相对路径。

当按照官网的第三种方案来，会有markdown编写无预览。

参考博文及其修改地方：https://blog.csdn.net/Xupixel/article/details/120405501 修改文件：https://github.com/Xu-pixel/hexo-renderer-marked/blob/master/lib/renderer.js

分析可以看出image部分函数代码，如果是/ \ 开头的直接解析为了绝对路径，对应现象：

文件路径：

/b/xxx.png

在这里插入图片描述

文件路径（官方第三种解决方案）：

xx.png

在这里插入图片描述

解决方案

参考链接：https://www.jianshu.com/p/bbbcbb7c4911

在这里插入图片描述

修改组件路径：node_modules\hexo-renderer-marked\lib

// Prepend root to image path
  image(href, title, text) {
	  console.log('cbry change:' + href);
	  //cbry添加
	  if(href.indexOf('/')>-1){
		  href = href.split('/')[1];
	  }
	  //cbry添加