利用Hexo框架搭建静态博客

前言

有很多开源的动态博客框架,我们为什么要用静态博客框架呢?让我们先看看什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

众所周知,白嫖让我们快乐,利用 Hexo 搭建的博客可以解锁更多的白嫖技巧(后续文章更新)

初始化博客

安装 node.js

windows 安装

  1. 前往 node.js官网下载(推荐下载 LTS 版本)
  2. 按照安装提示进行安装(一定要选“添加到环境变量/ADD TO PATH”,这样会给后期减少很多麻烦)
  3. 安装 Git

Linux 安装

安装源里面的 node 版本(简便方法)

  1. debian/ununtu(需要管理员权限)
1
2
3
4
apt install nodejs
apt install npm
apt-get install git-core
npm config set registry http://registry.npm.taobao.org/(这一步将NPM源切换为国内淘宝源,可以不做)
  1. centos
1
2
3
4
yum install nodejs
yun install npm
yum install git-core
npm config set registry http://registry.npm.taobao.org/
  1. 利用宝塔面板安装

Screenshot_20220123_194530.jpg
安装 node 管理器
Screenshot_20220123_194641.jpg
选择任意一个版本(建议选一个长期支持版本,宝塔面板安装不好处理),可以使用npx hexo使用这样的安装方式需要自己添加环境变量

增加环境变量(需要管理员权限—Linux)

1
echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile

docker 安装

期待后续更新

安装 hexo(推荐使用淘宝源)

1
npm install -g hexo-cli

这样,前期环境搭建就完成了

初始化博客根目录

1
2
3
4
5
//选定一个你要存放博客的目录,在你选定的目录打开终端(windows用户请复制相对路径,在cmd里cd+进入目录)
hexo init <博客目录名> //hexo init myblog
cd <博客目录名> //cd myblog
npm install / cnpm install
hexo s //(在线预览博客,需要放行4000端口)or hexo s -p+端口号

好了,就这样一个静态博客就初始化好了(可以通过 http://localhost:4000/127.0.0.1:4000 访问)
Screenshot_20220123_202223_com.huawei.browser.png
这是成功后的目录结构,期中_config.yml 是前期用的比较多的
对于动态博客看起来会比较麻烦,但后期的备份,白嫖。迁移都有很大的优势。

选择主题

爱美之心人皆有之,谁不会想要一个好看的博客主题呢?本文推荐使用博主同款主题butterfly

什么是主题 butterfly

主题特色
68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f6a65727279633132372f43444e406d322f696d672f627574746572666c792d726561646d652d73637265656e73686f74732d312e6a7067.jpg

获取主题(以下均在刚刚创建的博客根目录进行(/myblog))

通过 git 获取(需要提前配置好 git)

1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

对于没有梯子的,可以采用本站提供的镜像 github(任选一个使用)

1
2
git clone -b master https://git.ypmsk.tk/jerryc127/hexo-theme-butterfly.git themes/butterfly
git clone -b master https://git.ypmsk.top/jerryc127/hexo-theme-butterfly.git themes/butterfly

通过 npm 获取

1
npm i hexo-theme-butterfly

需要手动将 node_modules 下的 hexo-theme-butterfly 复制到 themes 目录下

修改博客主配置,让主题生效

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: butterfly

为博客添加身份(修改基础信息)

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: stars'blog //博客题目
subtitle: '博客副标题'
description: ''
keywords: 分享,技术,教程 //自己博客的关键字
author: 作者
language: zh-CN
timezone: '' //时区,默认不管它就行

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.cnortles.top //博客地址(和版权信息,以及分享有关)
permalink: posts/:abbrlink/ //(此处配置为安装了插件)
abbrlink:
alg: crc32
rep: hex
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

基础信息配置完以后,让我们一键三连

1
2
3
hexo clean // npx hexo clean
hexo g // npx hexo g
hexo s //npx hexo s

通过 localhost:4000 预览博客(关于端口修改上文已提及)

主题更新方法

为了方便主题更新,请将主题目录下的_config.yml(原文件不要删除!!!)复制到博客根目录下并改为_config.butterfly.yml
Screenshot_20220123_204303.jpg
在 hexo5.0 以上,会自动合并两个配置,默认读取“_config.butterfly.yml”后续关于主题的魔改也会在这里修改

主题魔改

创建魔改目录

为方便后续主题更新,我们需要在站点根目录下的 source 目录下创建 custom 目录
主题根目录
创建custom目录

番外

番外 1:利用语雀写文章

本站已有小白版教程(非自动版)

结尾

  • [x] 介绍安装 Nodejs
  • [x] 安装 hexo
  • [ ] docker 安装
  • [x] 选择主题
  • [x] 一键三连
  • [x] 简化后续主题更新
  • [ ] 如何写作
  • [ ] 主题魔改
  • [ ] 白嫖进行时
  • [ ] 安装插件
  • [x] 番外 1:利用语雀写文章(非自动版)
  • [ ] 番外 2:利用 qexo 写文章