使用 github 仓库搭建 Hexo教程，Hexo配置文件解读，Hexo安装next主题及主题配置，美化

原创

已于 2023-09-08 12:46:45 修改 · 6.3k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#hexo #github

于 2021-02-22 16:44:39 首次发布

本文详述了如何从零开始搭建Hexo博客，包括安装Node.js和Git，初始化博客，配置Hexo，部署到GitHub，并提供了一些常见问题的解决方案。此外，还介绍了如何安装和配置Next主题，以及一些高级设置，如自定义菜单、语言切换、社交链接、文章样式等，帮助读者打造个性化的博客平台。

这是之前写的文章了，重新补一补，把另外写的都和在一起了，出问题方便找

搭建 Hexo

准备

安装 nodejs
安装 git

可以看我之前的博客，好像有写安装方法

安装 hexo-cli

中文官网
安装是安装在本地，首先在本地创建一个目录，使用命令行打开到此目录，运行以下命令

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

在这里插入图片描述
最终会得到一个这个，可以打开看一下，是测试的博客

对了，报这个错误的话，把这个目录下的这个文件删掉就行了

推送到 github

用编辑器打开目录中的 _config.yml 文件
先上面的 url 和 root 补充完整，不然会没有 css 样式和 js 脚本
在这里插入图片描述
然后把后面的补充完整,也可以加上 branch:[自定义分支名称] 和 massage:[自定义提交消息]

保存后执行 hexo generate 更新本地代码或执行 hexo clean 删除本地代码
执行 hexo deploy 生成本地代码并推送到 github 库

部署的步骤基本就是写完之后执行以下命令

hexo clean # 清除已生成文件及缓存
hexo generate # 生成静态页面，简写做 hexo g
hexo deploy #推送到 github 库，简写做 hexo d
hexo server # 启动本地 WEB 服务器，简写做 hexo s

过程报错

如果报 ERROR Deployer not found: git 错误
运行 npm install --save hexo-deployer-git 即可

博客配置文件解读

# Site
title: 奇特  #博客标题
subtitle: ''  #博客副标题
description: '一个在github上搭建的hexo博客'  #博客描述
keywords:  #博客关键字
author: sywdebug  #作者
language: zh_CN  #语言
timezone: 'Asia/Shanghai'  #时区

# URL
## 在此处设置您的网站网址。 例如，如果您使用GitHub Page，则将url设置为“ https://username.github.io/project”
url: https://sywdebug.github.io/blog  #网址
root:/blog/  #根目录
permalink: :year/:month/:day/:title/  #文章的 永久链接 格式
permalink_defaults:  #永久链接中各部分的默认值
pretty_urls:  #改写 permalink 的值来美化 URL
  trailing_index: true  #是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: true  #是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效)

网站存放在子目录
如果您的网站存放在子目录中，例如 http://example.com/blog，则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/。

# Directory
source_dir: source  #资源文件夹，这个文件夹用来存放内容。
public_dir: public  #公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags  #标签文件夹
archive_dir: archives  #归档文件夹
category_dir: categories  #分类文件夹
code_dir: downloads/code  #Include code 文件夹，source_dir 下的子目录
i18n_dir: :lang  #国际化（i18n）文件夹
skip_render:  #跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md  #新文章的文件名称
default_layout: post  #预设布局
auto_spacing:false  #在中文和英文之间加入空格
titlecase: false  #把标题转换为 title case
external_link:  #在新标签中打开链接
  enable: true  #在新标签中打开链接
  field: site  #对整个网站（site）生效或仅对文章（post）生效
  exclude: ''  #需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0  #把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false  #显示草稿
post_asset_folder: false  #启动 [Asset 文件夹](https://hexo.io/zh-cn/docs/asset-folders)
relative_link: false  #把链接改为与根目录的相对位址
future: true  #显示未来的文章
highlight:  #代码块的设置, see [Highlight.js](https://hexo.io/docs/syntax-highlight#Highlight-js) section for usage guide
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:  #代码块的设置, see [PrismJS](https://hexo.io/docs/syntax-highlight#PrismJS) section for usage guide
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape  #主题

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/sywdebug/blog.git
  branch: master

安装 next 主题

官网
 github
终端进入到博客目录，使用以下命令克隆 next 主题到 themes/next 目录下
git clone https://github.com/next-theme/hexo-theme-next.git themes/next
在这里插入图片描述
安装成功

更改博客目录下的 _config.yml 里的 theme 为 next 即可启用
使用 hexo s 查看

next 主题配置

官方配置文档
主题的配置文件就是刚刚安装的 next 目录下的 _config.yml 文件
参阅Hexo 配置 NexT 主题教程

2022.1.6 来补坑了，完善一下，好多啊，真心不想弄，此处版本 7.8.0
在这里插入图片描述
从上往下挑一些用得到的说说，我写的时候也是跟着一点点设置的，博客就把无用的说明注释去掉了
文章中所说的图标可点击此处查看

网站信息设置

图标

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

最低0.47元/天解锁文章