基于Github托管的Hexo博客

前言

如你所见,这就是我的小破站了。以后有新的文章就会在这里进行更新。 稍等一下,先听会儿小曲...♩ˊ♪¨♫¨ˊ♬~

1
{% meting "446156870" "netease" "playlist" "theme:#FF4081" "mode:circulation" "mutex:true" "listmaxheight:340px" "preload:auto" %}

需要搭建一个这样的博客?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1.安装node.js | node-v18.16.0-x64.exe
https://nodejs.org/en/

2.安装Git | Git-2.40.1-64-bit.exe
https://git-scm.com/

3.重启电脑,然后运行 Git Bash

4.使用 node -v和 npm -v 检查是否安装成功

5.安装 hexo
npm install -g hexo-cli

6.新建博客项目:Blog
npx hexo init Blog

7.进入 Blog 文件夹
cd Blog

8.安装依赖
npm install

9.本地启动
npx hexo server

10.如果安装依赖出现问题,则运行
npm install -g npm

11.重新运行
hexo s

12.在浏览器地址栏输入localhost:4000,即可进入 Hexo 博客的主界面!
localhost:4000



# 旧的说明
# 因为github在2021年8月后,repositories请使用ssh的地址
# 为了不要踩那么多坑,建议看这个文章,比较详细
https://blog.csdn.net/guoxiaorui666/article/details/99623023

# 如果有一些代码不懂的话,配合这篇文章
https://www.jianshu.com/p/346acc6d6987

# 然后是视频教程(这是旧版的,需要配合上面的文章看,不然很多地方都不行了)
https://www.bilibili.com/video/av44544186

# 或者参考此文章
https://blog.csdn.net/Colincoin/article/details/102594799
https://blog.csdn.net/wenxingchen/article/details/131489468

博客用什么编辑器?

文章使用的编辑器是:typora

启动本地博客

1
2
3
4
5
6
7
8
9
10
11
# 本地博客一般是用来调试和先前发布内容的地方;
# 在git Bash中定位到博客的目录
cd D:\blog

# 或者直接找到博客目录,右键Git Bash

# hexo server 初始化本地服务器
hexo s 初始化本地服务器

# 正常流程后进入本地服务器
http://localhost:4000

写一篇文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 新建一篇博客
hexo new "需要新建的名称"

# 以下是一篇文章的引用信息
title: 文章标题..................### 文章标题
index_img: /img/example.jpg..................### 文章缩略图
date: 2019-10-10 10:00:00..................### 文章日期
categories:..................### 文章分类
- 站点新闻..................### 文章分类名称
tags:..................### 文章标签
- Hello Word..................### 标签名称


参考fluid文章写法演示:https://hexo.fluid-dev.com/posts/hello-fluid/
搭配 Fluid 如何优雅的写一篇文章:https://hexo.fluid-dev.com/posts/fluid-write/


#调用卡片链接方法,要把上下的 --- 杠杠杠 加上,然后将连接名称和链接加上
---
演示名称:卡片式链接
演示地址:https://github.com/OrangeX4/hexo-link-card
---

引用嵌入式网页

1
2
# 引用嵌入式网页
<iframe src="https://hexo.fluid-dev.com/posts/hello-fluid/" width="100%" height="600" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>

媒体内容

1
2
3
4
5
6
7
8
9
10
11
12
在Markdown文件中使用以下代码来插入视频
<video width="100%" controls>
<source src="/videos/sword_dolly_v1.mp4" type="video/mp4">
</video>


第三方插件 DPlayer
{% dplayer "url=/videos/sword_dolly_v1.mp4" %}
# 这是指向本地的方法

{% dplayer "url=https://tencent-xpc13.xpccdn.com/5e57b9cec7f1f.mp4" %}
# 这是指向网络流媒体的方法

推送博客内容到 Pages

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# hexo clean命令清除public目录中的所有文件和缓存。
hexo clean

#hexo g是hexo generate的简写,用于生成静态网站文件。当你更新博客内容后,需要使用该命令重新生成网站文件,然后才能查看最新的更改。执行hexo g命令后,Hexo会根据你在_config.yml中设置的配置信息,将博客源文件(Markdown、HTML、CSS等)转换成静态网页并存储在public目录中。
hexo g

#通过执行hexo d命令,可以将本地生成的静态文件部署到指定的远程服务器上,从而使其他人可以通过访问该服务器来浏览你的博客内容。
hexo d

# 更快捷的流程
hexo clean
hexo g -d
# 输入秘钥
# 完成上传

此博客的维护支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# hexo中插入PDF
# 1.安装hexo-pdf
npm install --save hexo-pdf

# 本地PDF引用(需要在source文件夹下创建一个叫pdf的文件夹)
{% pdf /pdf/xxx.pdf %}

# PDF技术支持:https://zhuanlan.zhihu.com/p/550626417?utm_id=0

博客aplayer
https://blog.csdn.net/hushhw/article/details/88092728
#fluid主题对此方法行不通,得用hexo注入才行。

更新命令
npm update --save hexo-theme-fluid

调试模式:清除缓存,生成静态文件,运行博客
hexo clean && hexo g && hexo s

获取网站图标

通过网址获取

通过官网链接加上/favicon.ico,可以快速获得一个网站的图标,比如:

1、获取百度图标:https://www.baidu.com/favicon.ico

2、获取谷歌图标:https://www.google.com/favicon.ico

2、获取知乎图标:https://static.zhihu.com/heifetz/favicon.ico

通过接口获取

1、开放接口:https://api.iowen.cn/favicon

获取百度图标:https://api.iowen.cn/favicon/www.baidu.com.png

获取谷歌图标:https://api.iowen.cn/favicon/www.google.com.png

通过上面的开放接口可以获取一个网站的图标,其使用方式就是在接口链接后加上需要获取图标的URL地址,同时要注意确保URL能够正常打开,而且不需要 http(s):// 前缀,且结尾必须填 .png

2、开放接口:https://www.google.com/s2/favicons?sz=64&domain=

获取知乎图标:https://www.google.com/s2/favicons?sz=64&domain=zhihu.com

获取百度图标:https://www.google.com/s2/favicons?sz=64&domain=baidu.com

通过上面的开放接口可以获取一个网站的图标,其使用方式就是在接口链接后加上需要获取图标的URL地址,同时要注意确保URL能够正常打开,而且不需要 http(s)://www. 前缀。

通过图标网站

1、FontAwesome图标网站:https://fontawesome.com/

2、爱给素材图标网站:https://www.aigei.com/

3、IconFont图标网站:https://www.iconfont.cn/

不在此博客列表主动显示的文章

1
2
3
4
5
#被主动隐藏的文章不会在首页显示,如需使用,请在网页尾部添加引用链接,
/2024/02/07/26-逆战专题页/
/2023/12/03/25-ChatGLM3/
/2023/12/02/24-PS神经网络滤镜离线插件/
/2024/03/09/28-PC实用工具/

喜欢这款主题吗?

此博客是用的是:Hexo Fluid

有关此主题的技术支持:Fluid技术文档


基于Github托管的Hexo博客
https://fxy5750.github.io/2020/03/20/01-hello-world/
作者
fxy5750
发布于
2020年3月20日
更新于
2023年5月1日
许可协议