Hexo 博客指南

whlll-建站指南

说是指南也谈不上，因为作为一个菜鸟，也都是在网络上搜罗搜罗，东拼西凑，搭好了这个小破站，看到那些维护了5、6年的个人博客网站，顿时心生敬佩

概述：

• 网站框架：Hexo

  • 选择理由：
    • 机缘巧合，一眼就被它简明大气的风格吸引了(Next)，难怪拥戴的人这么多
    • 对我这种初出茅庐的小菜鸡比较友好
    • 学生党福音，白嫖属性Max

• 部署：GitHub Pages

  • 选择理由：
    • 免费方便，可能之后如果要让更多的人看到，要迁移，好像是跟搜索优先级和服务器访问速度有关(不知道是不是给自己挖了一个坑)
    • 上新一下Github,让自己的仓库充实一下 ，就当成一个开端吧

• 图床：PicGo + gitHub图床

  • 选择理由：
    • 免费！！！操作相对简单，虽然我也没有怎么体验过其他图床

• 环境版本：

  • Node.js:14.18.0 -> npm:6.14.15(他俩现在是一起的绑定在一起的，就是防止出现版本不适配的问题)
  • git：2.31.1

---

当你也想搭建一个小破站玩一玩

我推荐你阅读官方的文档和作者的指南 当然 如果你是一个和我一样的freshman 你可以将这篇文章当做一个入门，一个new beginning

• 博主搭建时 参考的文档

  • 你把Hexo下下来以后 Hexo init 以后 在博客文件的根目录里的 _config.yml里里面每一个功能模块 上方的注释里都有网址 复制到浏览器查看 然后将网站的语言设置为中文 就可以开启你奇妙的探索之旅了 (反正我是这么做的)

• 跟着我这篇博客 走一遍流程

1.环境搭建

1.1、nodejs下载

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！(官网cv的，目前不太能理解，感觉有点像jre？)

坑:如果你之前下载了node.js，是beta版(最、较新的版本) 请务必删了 然后重新下载LTS版本(稳定并且长期维护的版本)，不然你就会像我一样，在npm和node版本适配和vs C++环境的问题上兜兜转转十个小时，一筹莫展。记住一句话，遇到问题超过一小时还没办法解决 就删干净重装稳定版，remake

一路next：最后这里一定要选择 它会检测当前环境是否完整，然后下载确实的环境 (Attention!)

然后在PowerShell(windows)里 node -v 和 npm -v 一下 看看装好了没

1.2、Git下载和使用

• 这教程就比较多了 百度第一条 附一下

https://www.cnblogs.com/ximiaomiao/p/7140456.html

• Git的原理和相关操作的熟练 来这个网站学习一下吧 比较有趣 动手性还强

https://oschina.gitee.io/learn-git-branching/

1.3、Hexo安装

步骤：

• 就安一个内核，至于其他的第三方插件，需要再装(注意这里推荐使用GIt bash 命令行总会出一下莫名其妙的错误)

npm install hexo --save

• 查看一下hexo版本 看看安装是否成功了

hexo -v

出现如下这种 证明安装好了

hexo-cli: 4.3.0
os: win32 10.0.19042
node: 14.18.0
v8: 8.4.371.23-node.84
uv: 1.42.0
zlib: 1.2.11
brotli: 1.0.9
ares: 1.17.2
modules: 83
nghttp2: 1.42.0
napi: 8
llhttp: 2.1.3
openssl: 1.1.1l
cldr: 39.0
icu: 69.1
tz: 2021a
unicode: 13.0

• 自己找一个喜欢的位置，创建一个空的文件夹，右键git bash一下,输入

hexo init

初始化，其实就是将GitHub上的核心库clone下来，如果没有科学上网，网速较慢的话，多试几次，总有一次会成功，或者按照网上说的，去查ip，设置本地的Host，不过博主自己实践过，效果真心一般，最快的ip 延时都是 100ms+

博客文件结构如下

OK! 搞定了 简简单单~~~

1.4、Hexo测试 Hello World

• 同样在博客根目录下 git bash 一下(就是你之前创建的那个文件夹下)，输入
• 清楚本地缓存

hexo clean

• 编译渲染(general)

hexo g

• 将博客网站运行在本地(server) 加上–debug本地的改动可以实时的动态在本地的4000端口查看(推荐)

hexo s --debug

• 在浏览器上输入 localhost:4000查看界面如下

• Congratulation! Everything well down~~~

2.个性化博客和deploy(发布)

在个性化博客之前，首先你需要选一个主题 可以在官网去逛一逛，如果你是被我这篇博客的风格吸引的 又或者 你不知道该怎么选择

那就选nexT 一定没错的 要相信大家的选择

• 下载主题(theme)

npm install hexo-theme-next --save

• 查看博客文件夹下的node_modules里有没有hexo-theme-next 有就下载成功了

• 进入这个文件夹 以后我们对next主题的配置都是对这里的_config.yml文件配置了

在hexo-theme-next文件夹下 有一个_config.yml 这个主要是个性化主题的

在博客根目录我这里的Blog下，也有一个_config.yml这个主要是配置全局的一些东西

(由于主题配置的_config.yml里的东西太多，这篇博客就引一两个重要的说，然后根目录下的配置文件枚举说明)

• Blog/_config.yml

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: whlll-blog  # 网站标题
subtitle: ''
description: 'whlll的小破站❥' # 网站描述
keywords:
author: whlll # 网站作者
language: zh-CN # 网站语言
timezone: 'Asia/Shanghai' # 网站时区

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project' # 设置GitHub pages 这个也可以在博客根目录下的_config.yml下配置
url: http://example.com
permalink: :year/:month/:day/:title/
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

# 下面都是一些规则设置 可以不用管

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: