【教程】这个Blog网站是怎么完成的呢(hexo+github+jsdelivr+md)

本人已更换主题，之后会出新教程（2022.5.27）

【教程】拯救blog一记

【教程】这个Blog网站是怎么完成的呢(hexo+github+jsdelivr+md)

花了两三天时间 自己的blog总算成了形 这一路摸爬滚打下来 没有诸位的优秀教程 与前辈的debug经历 恐怕我也是无能为力

时间有限 不是很想做出一整个教程 就列下链接以及大致的步骤吧

  • 总体大纲参照的是llt学长的blog搭建教程

  • 拥有自己的GitHub账号 并配置SSH-key

  • 首先是hexo的安装与使用 可以参考官方教程 也可以参考这个

    似乎发完这个我就不用写了..算了再写写吧..

    1
    hexo -v

    显示版本号即为成功

  • 在GitHub上建立__username.github.io__的repository 其中__username__表示你的用户名

  • 选择合适路径 输入

    1
    hexo init

    开始修改_config.yml中的配置 参照官方文档

  • 配置主题

    在Themes|Hexo上搜索喜欢的主题 并下载 按照主题里的doc进行一步步修改 这一步上可能障碍较多 需要经常Google 并且认真学习

    我选择的是Sakura主题 此处附上一个非常高级的Sakura主题美化方案

  • cdn加速

    由于blog采用GitHub+hexo 因此不科学上网的话 图片加载会比较缓慢 放在本地也并非一个安全的选择 因而此处采用jsdelivr进行cdn加速 从而提升访问体验 当然又拍云也是不错

    此处提示一点：

    jsdelivr的缓存机制目前未知 可能存在一定的时间差 所以release某个版本后 可能存在24h内的缓存时间 简单说便是

  • 绑定域名

    此时你已可以直接访问__username.github.io__来查看blog 当然亦可尝试在腾讯云等网站上进行购买域名 由于怕我三分钟热度 还是先不购买了（逃

  • GitHub+jsdelivr+PicGo实现图床 提升写作体验
    （2022.5.24更新：jsdelivr目前貌似是在国内挂了..不挂梯子根本访问不了，还不如不带加速。博主本人时间有限，只能用py写脚本，把https://cdn.jsdelivr.net/gh/..../....jpg换成了https://raw.githubusercontent.com/..../main/....jpg（图床是在GitHub的main分支上），暂且先这么处理了）

    值得一提的是 在GitHub中建立项目时 默认branch名称为main 而在PicGo中branch名称则提示为master 本人因为这个问题一开始一直提示error404 找不到服务器……将二者名称统一即可

  • Aplayer 尝试中.. 不知道为什么一直是戴佩妮的歌单..

配置完成后 日常写作便轻松不少：

  • 创建：

    1
    hexo new title

  • 进入source/_posts/找到对应的md 进行修改

  • 先清理本地缓存

    1
    hexo clean

  • 产生对应文件

    1
    hexo g

  • 布置到远端

    1
    hexo d

  • （2021.11.15更新）学会了使用草稿功能：

    1
    2
    3
    4
    5
    hexo new draft <draftTitle> // stored in sources/_drafts/draftTitle.md
    // write it
    hexo publish draftTitle // move it to sources/_posts
    hexo g
    hexo d // follow the post style

只消掌握MarkDown 便可配合Typora拥有极佳的写作体验

以下是原作者关于此主题的介绍 包括如何配置等

hexo-theme-sakura主题 English document

基于WordPress主题Sakura修改成Hexo的主题。

demo预览

正在开发中……

交流群

若你是使用者，加群QQ: 801511924

若你是创作者，加群QQ: 194472590

主题特性

  • 首页大屏视频
  • 首页随机封面
  • 图片懒加载
  • valine评论
  • fancy-box相册
  • pjax支持，音乐不间断
  • aplayer音乐播放器
  • 多级导航菜单（按现在大部分hexo主题来说，这也算是个特性了）

赞赏作者

如果喜欢hexo-theme-sakura主题，可以考虑资助一下哦~非常感激！

paypal | Alipay 支付宝 | WeChat Pay 微信支付

未完善的使用教程

那啥？老实说我目前也不是很有条理233333333~

1、主题下载安装

hexo-theme-sakura建议下载压缩包格式，因为除了主题内容还有些source的配置对新手来说比较太麻烦，直接下载解压就省去这些麻烦咯。

下载好后解压到博客根目录（不是主题目录哦，重复的选择替换）。接着在命令行（cmd、bash）运行npm i安装依赖。

2、主题配置

博客根目录下的_config配置

站点

1
2
3
4
5
6
7
8
# Site
title: 你的站点名
subtitle:
excerpt: 站点简介
keywords:
author: 作者名
language: zh-cn
timezone:

部署

1
2
3
4
5
6
deploy:
  type: git
  repo: 
    github: 你的github仓库地址
    # coding: 你的coding仓库地址
  branch: master

备份 （使用hexo b发布备份到远程仓库）

1
2
3
4
5
6
7
8
backup:
  type: git
  message: backup my blog of https://honjun.github.io/
  repository:
    # 你的github仓库地址,备份分支名  （建议新建backup分支）
    github: https://github.com/honjun/honjun.github.io.git,backup
    # coding: https://git.coding.net/hojun/hojun.git,backup

主题目录下的_config配置

其中标明【改】的是需要修改部门，标明【选】是可改可不改，标明【非】是不用改的部分

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
# site name
# 站点名 【改】
prefixName: さくら荘その
siteName: hojun

# favicon and site master avatar
# 站点的favicon和头像 输入图片路径（下面的配置是都是cdn的相对路径，没有cdn请填写完整路径，建议使用jsdeliver搭建一个cdn啦，先去下载我的cdn替换下图片就行了，简单方便~）【改】
favicon: /images/favicon.ico
avatar: /img/custom/avatar.jpg

# 站点url 【改】
url: https://sakura.hojun.cn

# 站点介绍（或者说是个人签名）【改】
excerpt: Live your life with passion! With some drive!

# 站点cdn，没有就为空 【改】  若是cdn为空，一些图片地址就要填完整地址了，比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg
cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6

# 开启pjax 【选】
pjax: 1

# 站点首页的公告信息 【改】
notice: hexo-Sakura主题已经开源，目前正在开发中...

# 懒加载的加载中图片 【选】
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg

# 站点菜单配置 【选】
menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    技术: {path: /categories/技术/, fa: fa-code }, 
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
    转载: {path: /categories/转载/, fa: fa-book }
  } }
  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }
  赞赏: { path: /donate/, fa: fa-heart faa-pulse }
  关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    我？: {path: /about/, fa: fa-meetup}, 
    主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
    Lab: {path: /lab/, fa: fa-cogs },
  } }
  客户端: { path: /client/, fa: fa-android faa-vertical }
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }

# Home page sort type: -1: newer first，1: older first. 【非】
homePageSortType: -1

# Home page article shown number) 【非】
homeArticleShown: 10

# 背景图片 【选】
bgn: 8

# startdash面板 url, title, desc img 【改】
startdash: 
  - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
  - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}
  - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}


# your site build time or founded date
# 你的站点建立日期 【改】
siteBuildingTime: 07/17/2018


# 社交按钮(social)  url, img PC端配置 【改】
social:
  github: {url: http://github.com/honjun, img: /img/social/github.png}
  sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}
  wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}
  zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}
  email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}
  wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}

# 社交按钮(msocial)  url, img 移动端配置 【改】
msocial:
  github: {url: http://github.com/honjun, fa: fa-github, color: 333}
  weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

# 赞赏二维码（其中wechatSQ是赞赏单页面的赞赏码图片）【改】
donate:
  alipay: /img/custom/donate/AliPayQR.jpg
  wechat: /img/custom/donate/WeChanQR.jpg
  wechatSQ: /img/custom/donate/WeChanSQ.jpg

# 首页视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4，配置如下 【改】
movies:
  url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2
  # 多个视频用逗号隔开，随机获取。支持的格式目前已知MP4,Flv。其他的可以试下，不保证有用
  name: Unbroken.mp4

# 左下角aplayer播放器配置 主要改id和server这两项，修改详见[aplayer文档] 【改】
aplayer: 
  id: 2660651585
  server: netease
  type: playlist
  fixed: true
  mini: false
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

# Valine评论配置【改】
valine: true
v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ

分类页和标签页配置

分类页

标签页

配置项在\themes\Sakura\languages\zh-cn.yml里。新增一个分类或标签最好加下哦，当然嫌麻烦可以直接使用一张默认图片（可以改主题或者直接把404图片替换下，征求下意见要不要给这个在配置文件中加个开关，可以issue或群里提出来），现在是没设置的话会使用那种倒立小狗404哦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#category
# 按分类名创建
技术:
    #中文标题
    zh: 野生技术协会 
    # 英文标题
    en: Geek – Only for Love
    # 封面图片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/coding.jpg
生活:
    zh: 生活
    en: live
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/writing.jpg

#tag
# 标签名即是标题
悦读:
    # 封面图片
    img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/banner/reading.jpg

单页面封面配置


如留言板页面页面，位于source下的comment下，打开index.md如下：

1
2
3
4
5
6
7
8
9
10
---
title: comment
date: 2018-12-20 23:13:48
keywords: 留言板
excerpt: 
comments: true
# 在这里配置单页面头部图片，自定义替换哦~
index_img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg
banner_img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/comment.jpg
---

单页面配置

番组计划页 （请直接在下载后的文件中改，下面的添加了注释可能会有些影响）

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
---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
excerpt:
bangumis:
  # 番组图片
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
  # 番组名
    title: 朝花夕誓——于离别之朝束起约定之花
  # 追番状态 （追番ing/已追完）
    status: 已追完
  # 追番进度
    progress: 100
  # 番剧日文名称
    jp: さよならの朝に約束の花をかざろう
  # 放送时间
    time: 放送时间: 2018-02-24 SUN.
  # 番剧介绍
    desc:  住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。
  - img: https://lain.bgm.tv/pic/cover/l/0e/1e/218971_2y351.jpg
    title: 朝花夕誓——于离别之朝束起约定之花
    status: 已追完
    progress: 50
    jp: さよならの朝に約束の花をかざろう
    time: 放送时间: 2018-02-24 SUN.
    desc: 住在远离尘嚣的土地，一边将每天的事情编织成名为希比欧的布，一边静静生活的伊欧夫人民。在15岁左右外表就停止成长，拥有数百年寿命的他们，被称为“离别的一族”，并被视为活着的传说。没有双亲的伊欧夫少女玛奇亚，过着被伙伴包围的平稳日子，却总感觉“孤身一人”。他们的这种日常，一瞬间就崩溃消失。追求伊欧夫的长寿之血，梅萨蒂军乘坐着名为雷纳特的古代兽发动了进攻。在绝望与混乱之中，伊欧夫的第一美女蕾莉亚被梅萨蒂带走，而玛奇亚暗恋的少年克里姆也失踪了。玛奇亚虽然总算逃脱了，却失去了伙伴和归去之地……。
---

友链页 （请直接在下载后的文件中改，下面的添加了注释可能会有些影响）

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
---
layout: links
title: links
# 创建日期，可以改下
date: 2018-12-19 23:11:06 
# 图片上的标题，自定义修改
keywords: 友人帐 
excerpt: 
# true/false 开启/关闭评论
comments: true 
# 页面头部图片，自定义修改
index_img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg 
banner_img: https://cdn.jsdelivr.net/gh/honjun/cdn@1.4/img/banner/links.jpg 
# 友链配置
links: 
  # 类型分组
  - group: 个人项目
    # 类型简介
    desc: 充分说明这家伙是条咸鱼 < (￣︶￣)>
    items:
    # 友链链接
    - url: https://shino.cc/fgvf
    # 友链头像
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
    # 友链站点名
      name: Google
    # 友链介绍  下面雷同
      desc: Google 镜像
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
  # 类型分组...
  - group: 小伙伴们
    desc: 欢迎交换友链 ꉂ(ˊᗜˋ)
    items:
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
    - url: https://shino.cc/fgvf
      img: https://cloud.moezx.cc/Picture/svg/landscape/fields.svg
      name: Google
      desc: Google 镜像
---

写文章配置

主题集成了个人插件hexo-tag-bili和hexo-tag-fancybox_img。其中hexo-tag-bili用来在文章或单页面中插入B站外链视频，使用语法如下：

1
{% bili video_id [page] %}

详细使用教程详见hexo-tag-bili。

hexo-tag-fancybox_img用来在文章或单页面中图片，使用语法如下：

1
{% fb_img src [caption] %}

详细使用教程详见hexo-tag-fancybox_img

还有啥，一时想不起来……

To be continued…

[https://cloud.tencent.com/developer/article/1520557]:

技术
#技术
【教程】这个Blog网站是怎么完成的呢(hexo+github+jsdelivr+md)
http://baokker.github.io/2018/12/12/【教程】这个Blog网站是怎么完成的呢(hexo+github+jsdelivr+md)/
作者
Baokker
发布于
2018年12月12日
更新于
2023年2月5日
许可协议