Hexo+Github搭建个人博客教程

前言

• 完全免费的搭建个人博客，没有任何收费，零基础小白也能上手，不需要编程基础，跟着操作来即可。
• 首先要了解一下我们搭建博客要用到的框架。Hexo是高效的静态站点生成框架，它基于Node.js。通过Hexo，你可以直接使用Markdown语法来撰写博客。相信很多小伙伴写工程都写过README.md文件吧，对，就是这个格式的！写完后只需两三条命令即可将生成的网页上传到你的github上，然后别人就可以看到你的网页啦。是不是很简单？你无需关心网页源代码的具体细节，你只需要用心写好你的博客内容就行。

比较不错的教程

我也是看他们的

Hexo+Github搭建个人博客教程 · 语雀

使用Hexo搭建个人博客手摸手教学(4.5)|快速创建hexo基础模板_哔哩哔哩_bilibili

第3期：Butterfly主题的基础配置_哔哩哔哩_bilibili

hexo官网：Hexo

butterfly 主题设置：Butterfly - A Simple and Card UI Design theme for Hexo

GitHub地址：https://github.com/jerryc127/hexo-theme-butterfly

基础命令

• 初始化博客命令：hexo init "文件名"
• 开启本地服务（本地运行）的命令：hexo s
• 生成页面（生成博客）： hexo g
• 创建文章（md形式）：hexo n "文章名字"
• 清理缓存：hexo clean
• 依赖安装：npm install
• 新建文章：hexo n "文章名"

发布顺序

1. 先清理缓存：hexo clean
2. 再重新生成博客页面：hexo g
3. 预览：hexo s
4. 上传到GitHub创库：hexo d

butterfly主题

下载依赖

npm install hexo-butterfly-cli -g

初始化

butterfly-cli init 名字

环境准备

这里就不讲了：可以直接b站搜索，也可以直接看我上面发的教程

使用：

主题配置文件：_config.butterfly.yml，之后的配置大部分都是在这里改

我的_config.butterfly.yml配置：

# 导航栏配置
menu:
  首頁: / || fas fa-home
  时间轴: /archives/ || fas fa-archive
  标签: /tags/ || fas fa-tags
  分类: /categories/ || fas fa-folder-open
  清单||fa fa-heartbeat:
    音乐: /music/ || fas fa-music
    照片: /Gallery/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link
  关于: /about/ || fas fa-heart

之后在终端创建对应目录，这里可以看官方文档

hexo new page 名字（如link，tags）

Favicon（網站圖標）

favicon: https://www.fomal.cc/favicon.ico

Avatar (頭像)

avatar:
img: https://www.fomal.cc/assets/head.jpg
effect: false

主页背景图片

index_img: 'https://source.fomal.cc/img/dm4.webp'

设置每一篇文章的背景图片

default_cover:

• https://source.fomal.cc/img/default_cover_1.webp
• https://source.fomal.cc/img/default_cover_2.webp
• https://source.fomal.cc/img/default_cover_3.webp
• https://source.fomal.cc/img/default_cover_4.webp
• https://source.fomal.cc/img/default_cover_5.webp
• https://source.fomal.cc/img/default_cover_6.webp
• https://source.fomal.cc/img/default_cover_7.webp

404页面

error_404:
enable: true
subtitle: '页面没有找到'
background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png

wordcount (字數統計)

wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true

这个要实现要先安装字数统计的依赖包

npm install hexo-wordcount --save

主页文件查询：

安装依赖

npm install hexo-generator-search --save

在_config.yml配置

search:
path: search.xml
field: all
content: true

主题颜色

打开注释就可以了

theme_color:
enable: true
main: "#49B1F5"
paginator: "#00c4b6"
button_hover: "#FF7242"
text_selection: "#00c4b6"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#00c4b6"
blockquote_padding_color: "#49b1f5"
blockquote_background_color: "#49b1f5"
scrollbar_color: "#49b1f5"
meta_theme_color_light: "ffffff"
meta_theme_color_dark: "#0d0d0d"

设置网站背景

background: url(https://source.fomal.cc/img/dm3.webp)

放置音乐

hexo new page music

iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=480579393&auto=1&height=66"></iframe>

-----

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=2063514557&auto=1&height=66"></iframe>