0%

基于hexo+github搭建属于自己的博客

洛阳城东桃李花,飞来飞去落谁家?洛阳女儿惜颜色,坐见落花长叹息。今年花落颜色改,明年花开复谁在?已见松柏摧为薪,更闻桑田变成海。古人无复洛城东,今人还对落花风。年年岁岁花相似,岁岁年年人不同。寄言全盛红颜子,应怜半死白头翁。此翁白头真可怜,伊昔红颜美少年。公子王孙芳树下,清歌妙舞落花前。光禄池台文锦绣,将军楼阁画神仙。一朝卧病无相识,三春行乐在谁边?宛转蛾眉能几时?须臾鹤发乱如丝。但看古来歌舞地,唯有黄昏鸟雀悲。 —— 唐·刘希夷 《代悲白头翁》

一、主要步骤

  1. 安装git
  2. 安装nodejs
  3. 安装hexo
  4. 生成SSH key并添加到github
  5. 初始化项目hexo init blog(名字随便)
  6. 安装所需依赖npm install
  7. 安装发布工具npm install hexo-deployer-git --save
  8. 编辑博客内容(markdown语法自行脑补)
  9. 上传到github hexo g -d
  10. 绑定个人域名(CNAME)
  11. 更换主题、增加搜索、底部增加访问量等都是在配置文件里搞搞

二、修改主题

  1. 进入博客主题目录cd 博客/themes
  2. 克隆主题文件git clone https://github.com/theme-next/hexo-theme-next.git
  3. 修改主配置文件_config.yml
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next
  1. 修改主题配置文件,next主题下有四种风格类型的,根据个人爱好开启
1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

三、修改icon

  1. 将选好的icon图片放到目录博客目录/themes/hexo-theme-next/source/images

  2. 修改对应主题的配置文件_config.yml

1
2
3
4
5
6
7
8
9
favicon:
#small: /images/favicon-16x16-next.png
#medium: /images/favicon-32x32-next.png
small: /images/kid.jpg
medium: /images/kid.jpg
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
#android_manifest: /images/manifest.json
#ms_browserconfig: /images/browserconfig.xml

四、添加标签、分类

  1. 添加分类hexo new page categories
  2. 添加标签hexo new page tags
  3. 新建文章的时候指定分类和标签
1
2
3
4
5
6
categories: 
- 测试分类
- 可以设置多个分类
tags:
- 测试标签
- 同样可以设置多个
  1. 添加关于hexo new page about

五、设置域名访问

  1. 进入source目录cd 博客目录/source

  2. 输出域名到CNAMEecho liusir.me > CNAME

  3. 登录阿里后台,解析域名

    • 记录类型默认选择A-将域名指向一个IPV4地址
    • ping liusirdotme.github.io拿到ip填入记录值

    六、网站地址

  4. npm install hexo-generator-sitemap --save

七、添加algolia搜索后,修改博客名称经常会出现重复的搜索项,点开后会报404错误

  1. 删除本地.deploy_git目录
  2. 登录algolia,清除索引
  3. 重新生成hexo algolia

八、博客插入图片

  1. 修改主配置post_asset_folder: true
  2. 安装插件npm install hexo-asset-image --save
  3. 将图片放入和博客文件同名的文件夹下,使用markdown语法引入即可
    • 推送前先清理下缓存hexo clean

九、Next主题字数统计

  1. 进入博客根目录,安装插件 npm install hexo-symbols-count-time --save
  2. 打开主配置文件
1
2
3
4
5
6
symbols_count_time:
symbols: true # 文章字数统计
time: true # 文章阅读时长
total_symbols: true # 站点总字数统计
total_time: true # 站点总阅读时长
exclude_codeblock: false # 排除代码字数统计
  1. 打开主题配置文件
1
2
3
4
5
6
7
symbols_count_time:
separated_meta: true # 是否另起一行(true的话不和发表时间等同一行)
item_text_post: true # 首页文章统计数量前是否显示文字描述(本文字数、阅读时长)
item_text_total: false # 页面底部统计数量前是否显示文字描述(站点总字数、站点阅读时长)
awl: 4 # Average Word Length
wpm: 275 # Words Per Minute(每分钟阅读词数)
suffix: mins # 后缀
  1. 重新发布下博客,打完收工

十、添加fork me on GitHub

  1. 选取样式
  2. 修改blog\themes\next\layout\_layout.swig
1
2
3
4
 <div class="{{ container_class }} {% block page_class %}{% endblock %} ">
<div class="headband"></div>

<a target="_blank" href="https://github.com/yourname">![Fork me on GitHub](https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67)</a>
  • 位置<div class="headband"></div>下一行
  • github地址改成对应自己的
  1. 小屏幕不显示fork me on github
    • 修改blog\themes\next\layout\_layout.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
{% include '_partials/head.swig' %}
<title>{% block title %}{% endblock %}</title>
<style>
.forkme{
display: none;
}
@media (min-width: 768px) {
.forkme{
display: inline;
}
}
</style>
</head>
  • 去步骤2,嵌套一个div

    1
    2
    3
    <div class="forkme">
    <a target="_blank" href="https://github.com/yourname">![Fork me on GitHub](https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67)</a>
    </div>

十一、动漫

  1. 安装插件npm install --save hexo-helper-live2d
  2. 修稿主题配置文件_config.yml,添加以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-wanko
display:
position: right
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7
  1. 参考

    • https://github.com/EYHN/hexo-helper-live2d
    • https://github.com/xiazeyu/live2d-widget-models
  2. 动漫选择

    • live2d-widget-model-chitose
    • live2d-widget-model-epsilon2_1
    • live2d-widget-model-gf
    • live2d-widget-model-haru_01
    • live2d-widget-model-haru_02
    • live2d-widget-model-haruto
    • live2d-widget-model-hibiki
    • live2d-widget-model-hijiki
    • live2d-widget-model-izumi
    • live2d-widget-model-koharu
    • live2d-widget-model-miku
    • live2d-widget-model-nico
    • live2d-widget-model-nietzsche
    • live2d-widget-model-ni-j
    • live2d-widget-model-nipsilon
    • live2d-widget-model-nito
    • live2d-widget-model-shizuku
    • live2d-widget-model-tororo
    • live2d-widget-model-tsumiki
    • live2d-widget-model-unitychan
    • live2d-widget-model-wanko
    • live2d-widget-model-z16
  3. BZ发现不蒜子统计总是不起作用,偶尔去翻next主题issue的时候,看到作者说是live2d影响了统计,这就尴尬了

    • 卸载live2d npm uninstall hexo-helper-live2d
    • 修改主题配置文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    live2d:
    enable: false # change here to false
    scriptFrom: local
    pluginRootPath: live2dw/
    pluginJsPath: lib/
    pluginModelPath: assets/
    tagMode: false
    log: false
    model:
    use: live2d-widget-model-wanko
    display:
    position: right
    width: 50
    height: 150
    mobile:
    show: false
    react:
    opacity: 0.7
    • 重新生成并发布