Hexo 基础操作

字数统计: 2.5k   |   阅读时长≈ 10 分钟

Quick Start

配置环境

  1. 安装node，下载的是node v-14.19.0版本

  2. 安装hexo-cli，cmd中使用npm install hexo-cli -g进行全局安装，需要注意的是现在hexo是v6.0.0版本，需要node 的v12以上版本，初始化一个hexo的博客配置

    1
    2
    3
    1. 在要建博客的文件夹下，cmd敲入hexo init myBlog,这里的myBlog是一个文件夹名字
    2. 继续cmd敲入 cd myBlog ，这里是进入myBlog文件目录
    3. npm install 安装了环境

  3. 安装git，官网下载安装即可

本地开启博客服务–新建一篇博客

新建我的一篇博客，博客名为“第一篇博客”hexo new 第一篇博客

生成博客内容 hexo generate

启动服务预览hexo server -p 7099这里默认是4000，但是我的4000端口被占用了，改成了7099端口

所有命令都可以简写

1
2
3
4
5
hexo new === hexo n “博客名” 创建博客
hexo generate === hexo g 生成
hexo server === hexo s 启动服务
hexo clean  清除缓存--这里尝试了不能用hexo c
hexo deploy ===hexo d 部署

创建后的博客模板是这样的

1
2
3
4
5
---
title: 第一篇博客
date: 2022-02-15 11:21:17
tags:
---

上面的title 、date、tags 在post.md中进行，渲染
不写的话会出现没有标题名的问题

image-20220215112309564

用markdown语言（我用的是typora编辑器）书写博客内容，然后用hexo s 发布出来就可以本地浏览了

Git托管服务发布博客

GitHub配置

  1. 需要先在github上创建一个pulic仓库，名字为.github.io,这也是以后发布的博客地址c

hexo的配置

  1. 因为是发布首先需要配置基本文件
1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/ouStanz/ouStanz.github.io.git
  branch: master
  1. 需要下载hexo联合git发布的插件npm install hexo-deployer-git --save
  2. 配置好后就可以通过指令发布了，一般需要晴空下缓存，然后生成发布
1
2
3
hexo clean
hexo g
hexo d

这样之后就可以在浏览器输入.github.io产看博客了

绑定个人域名

现在的域名是git提供的，可以自己申请一个绑定，比如绑定在xxxx.cn

阿里云域名

我的是阿里云买的域名，所以在阿里云控制台，进行解析，把github的服务器地址添加进去，是192.30.252.153 和 192.30.252.154 ，解析路线选默认，主机记录时@，记录类型是A类即可

1
2
3
4
5
1. 首先要有一个自己的域名，比如我的是xxxx.cn
2. 但是我这个域名是主域名，不想作为博客的域名使用，而是要将其作为其他的网站域名，但是又不想重新买个域名，所以就想办法建立一个二级域名，把git域名绑定到这个二级域名上
3. 步骤来了，在阿里云的域名dns解析那里添加一个新的记录，就设置为blog.xxx.cn,记录类型是CNAME，记录值是我的git域名，
4. 在git上的settings中，左边找到pages，右边下滑找到cutom domain，把刚刚添加的二级域名地址填进去，save就可以了
`注意· 这里我本来想在云主机用nginx设置一个域名跳转，但是域名绑定只能绑定80端口，所以没有实现用次级域名直接完成nginx代理跳转，最后找到阿里云方式跳转`

git域名操作

登录github建的那个博客仓库，点击settings，设置custom domain，输入域名，如xxx.top

然后再再博客文件夹myBlog下的source文件夹下创建CNAME文件（不写后缀），里面写入域名egs365.top,最后在发布一遍就可以了

详细配置

基本配置

在_config.yml下可以实现网站的个性化配置很有意思

Site

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述–主要用于百度SEO推广，包含网站关键字
author 您的名字–网站的作者
language 网站使用的语言
timezone 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

url

参数 描述
url 网址–自己的网站域名如ouStanz.github.io
root 网站根目录
permalink 文章的 永久链接 格式
permalink_defaults 永久链接中各部分的默认值

permalink一般不用更换，也可以根据官网描述换成自己喜欢的，示例为

参数 描述
:year/:month/:day/:title/ 2013/07/14/hello-world
:year-:month-:day-:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

Front-matter

就是最开始说的---分割的部分，存放title、date、tag的，也可以配置更多内容

参数 描述
layout 布局
title 标题
date 建立日期
updated 更新日期
comments 开启文章的评论功能
tags 标签（不适用于分页）—不具有顺序性
categories 分类（不适用于分页）–具有顺序性
permalink 覆盖文章网址
top 文章置顶–数字越大越靠前

layout

到目前为止，我们可以看看博客地址的目录结构了，scaffolds是存放模板的文件夹，默认提供了三个模板，咱这里可以根据自己的需求新建模板

post

新建的博客文章内容给都是在_posts文件夹下，而_posts文件夹下所有内容的构建布局模板其实是在scaffolds文件夹下的post.md中，也就是通过命令hexo n 新内容新建的博客最开头都有设置好的title、date、tags这三部分模板内容，如post.md中的模板改成这样

1
2
3
4
5
6
7
8
9
10
11
---
title: {{ title }}
date: {{ date }}
tags:{{tags}}
---
#quick start

##content
there is sth
#end

执行hexo n newpage1后得到的结果就是这样的

image-20220215142552526

其实还有很多其他的方式。hexo提供了三种布局方式

布局 布局文件路径 内容文件路径路径
post scaffolds/post.md source/_posts
page scaffolds/page.md source
draft scaffolds/draft.md source/_drafts

而当使用hexo n newpage时，其实完整命令是hexo new [layout]<title>，只不过layout默认为post而已

page

如果想另起一页用page的模板，可以使用命令hexo n page board，这样就建立了以page为模板的board文件夹，对应的内容就可以在board文件夹下写，如果想访问就可以用链接http://127.0.0.1:7099/board去访问，外网链接格式一致

draft

是草稿文件模板，即以该模板写的文章不会被别人看到，内容会放在source\_draft文件夹下，如果想要预览则可以通过hexo server --draft预览，最后想post的话可以使用 hexo publish draft newpage把想要post的部分内容pulish出去

网页图片不现实问题

1
2
3
1. post_asset_folder: true 这一步之后再source/post 下新建md的时候会生成一个同名的文件夹
2. 执行 npm install https://github.com/CodeFalling/hexo-asset-image --save
3. {% asset_img img.png 图片说明 %}

主题的

可以更换主题啦啦啦~~，原主题实在是太丑了，这是更换主题地址，看好哪个下载下来（简约风格又NexT、hueman）等，从github下载后在_config.yml的theme部分换成主题文件夹的名字就行了

然后进入主题文件夹下，找到—config.xml.example，复制一份，重命名为_config.xml就好了

我这用的是Ayer，看着不错

customize

在主题文件夹下的source/css/images中放入需要的图片，然后配置主题的_config.yml文件中先对应的路径就可以了

1
2
1. 这里有一个问题在theme文件夹下有个ayer主题文件，因为是直接clone的别人的主题，所以这个文件夹clone下来后要把.git删了
2. 如果要把ayer下的文件放到私有云，必须把ayer/source里面的内容同步提交，我就是没有删除.git，然后source文件没提交，在其他电脑clone下来后发布出来的博客没有主题

插件(必需)

  • hexo-generator-searchdb 用于搜索

    1
    COPYnpm install hexo-generator-searchdb --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是 ayer 目录下的）:

    1
    2
    3
    4
    5
    COPY# hexo-generator-searchdb
    search:
      path: search.xml
      field: post
      format: html

  • hexo-generator-feed 用于生成 RSS 订阅

    1
    COPYnpm install hexo-generator-feed --save

    然后将以下配置复制到你博客根目录下的 _config.yml 里（注意不是 ayer 目录下的）:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    COPY
    # Extensions
    ## Plugins:https://hexo.io/plugins
    # RSS订阅
    Plugin:
    - hexo-generator-feed
    # Feed Atom
    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: " "
      order_by: -date

插件(可选)

1
2
3
4
5
6
npm install --save hexo-blog-encrypt

然后再文章title加入password
title: Hello World
date: 2016-03-30 21:18:02
password: hello

更多插件请见 hexo 插件市场

分类

1
COPYhexo new page categories

然后将以下复制到 /source/categories/index.md 文件

1
2
3
4
5
6
COPY
---
title: categories
type: "categories"
layout: "categories"
---

标签

1
COPYhexo new page tags

配置同分类一样

友情链接

1
COPY hexo new page friends

然后将以下复制到 /source/friends/index.md 文件

1
2
3
4
5
COPY---
title: friends
type: friends
layout: "friends"
---

然后在 ayer 主题目录下的 _config.yml 中自定义 friends_link 配置项即可

相册

1
COPYhexo new page photos

然后将以下复制到 /source/photos/index.md 文件，img_url 替换成图片路径，caption 替换成图片名称

1
2
3
4
5
COPY---
title: Gallery

albums: [["img_url", "img_caption"], ["img_url", "img_caption"]]
---

文章目录

用 Tocbot 解析文章标题并生成目录

  • 将以下配置复制到你 ayer 主题目录下的 _config.yml 里：
1
2
COPY# Toc
toc: true
  • 当然你可能并不想所有文章都生成悬浮目录，你可以在文章顶部的配置中加一行来进行关闭：
1
2
3
COPY---
no_toc: true
---

相关学习链接

  1. hexo史上最全搭建教程_Fangzh的技术博客-CSDN博客_hexo
  2. 基于 Hexo 的全自动博客构建部署系统 - KChen’s Blog
  3. ayer文档

结语

Hexo还是很好用的。

打赏
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2015-2022 tanz
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~