Hexo 博客搭建指南 | 王雨的博客

前端 - 创建博客

发布日期: 2019-08-24

作者: 王雨

文章字数: 1.8k

阅读时长: 8 分

阅读次数:

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

$ hexo new "My New Post"

More info: Writing

Run server

$ hexo server

More info: Server

Generate static files

$ hexo generate

More info: Generating

Deploy to remote sites

$ hexo deploy

More info: Deployment

Hexo的简洁、神秘让我跃跃欲试，在使用过程中遇到了很多问题，整理此文，一是方便其他技术人搭建自己的博客，二是给自己的学习之旅做个总结。

Hexo 有两份主要的配置文件（_config.yml），一份位于站点根目录下，另一份位于主题目录下。为了描述方便，在以下说明中，将前者称为站点配置文件，后者称为主题配置文件。

1 Hexo介绍

Hexo是基于NodeJs的静态博客框架，简单、轻量，其生成的静态网页可以托管在Github和Heroku上。

超快速度
支持MarkDown
一键部署
丰富的插件

下面以我的博客为例，xiaoming.github.io

2 环境准备

2.0 安装git

Git for Windows, 这里提供一个国内的下载站，方便网友下载，然后选择安装目录后，一直next就可以。https://github.com/waylau/git-for-win

2.1 安装node.js

去nodejs官网下载对应系统的安装包，然后一直一直next安装。

检验安装成功：

$ node -v

2.2 安装hexo

$ npm install hexo-cli -g

注意：Mac系统，则需要

$ sudo npm install hexo-cli -g

3 利用Hexo搭建一个博客

3.1 创建博客目录`xiaoming.github.io`

$ hexo init xiaoming.github.io
$ cd xiaoming.github.io
$ npm install

3.2 生成静态页面

$ hexo clean
$ hexo g

g 即generate

3.3 运行

$ hexo s

s 即server

然后打开浏览器，输入地址 localhost:4000 即可看到效果

4 发一篇文章试试

4.1 命令方式

$ hexo new test

此时会在source/_posts目录下生成test.md文件，输入些许内容，然后保存.

生成下，看看效果

$ hexo clean
$ hexo g
$ hexo s

访问 localhost:4000 即可

4.2 直接方式

在 source/_posts/下新建一个.md文件也可

5 配置

网站的设置大部分都在_config.yml文件中，详细配置可以查看官方文档

下面只列出简单常用配置

title -> 网站标题
subtitle -> 网站副标题
description -> 网站描述
author -> 您的名字
language -> 网站使用的语言

坑：进行配置时，需要在冒号:后加一个英文空格

title: xiaoming

6 换一个好看的主题

Hexo 中有很多主题，可以在官网查看。
这里我推荐hexo-theme-next，下面列举更换主题的一般套路：

6.1 下载主题资源

$ git clone https://github.com/iissnan/hexo-theme-next themes/next
克隆新地址：
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

6.2 应用下载的主题

在网站配置文件_config.yml中，配置theme

theme: next

next是主题名称，具体的可查看主题的文档

6.3 主题其他配置

可在/theme/{theme}/_config.yml 主题的配置文件下进行主题的配置。

接下来，可以执行万能的调试命令看看效果

$ hexo clean
$ hexo g     #g 是 generate 缩写:生成，d 是 deploy 缩写:部署
$ hexo s     #s 是 serverce 缩写:启动服务预览

7 部署到Github

7.1 有个github账号xiaoming

7.2 创建一个xiaoming.github.io的public仓库

如果您的账户名是xiaoming,则需要创建一个xiaoming.github.io的public仓库.

7.3 安装 hexo-deployer-git

$ npm install hexo-deployer-git --save

7.4 网站配置git

在网站的_config.yml中配置deploy

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

branch为分支，默认为master,可以不配置
repo为仓库地址，在github上新建仓库后，可复制此地址

7.5 部署

$ hexo d

d 即deploy

8 贴标签，方便搜索

8.1 两个确认

确认站点配置文件有

tag_dir: tags

确认主题配置文件有

tags: tags

8.2 新建tags页面

1>运行以下命令

$ hexo new page tags

此时会在source/下生成tags/index.md文件

2>修改/source/tags目录下的index.md文件

title: tags
date: 2015-10-20 06:49:50
type: "tags"
comments: false

date 可保持系统生成的时间，

type: "tags"
comments: false

很重要

3>修改主题配置文件
去掉tags的注释

menu:
  home: /                       #主页
  categories: /categories    #分类页（需手动创建）
  #about: /about        #关于页面（需手动创建）
  archives: /archives        #归档页
  tags: /tags            #标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

8.3 在文章中添加tags

在文章xx.md中添加：

tags: 
    - Tag1
    - Tag2
    - Tag3

多个Tag可按上面的格式添加。

其文件头部类似：

title: TagEditText
date: 2016-11-19 10:44:25
tags: 
    - Tag1
    - Tag2
    - Tag3

9 分类，给文章归档

9.1 两个确认

确认站点配置文件打开了

category_dir: categories

确认主题配置文件打开了

categories: /categories

9.2 新建categories文件

1>运行以下命令

$ hexo new page categories

此时会在source目录下生成categories/index.md文件

2>修改/source/categories目录下的index.md文件

title: categories
date: 2015-10-20 06:49:50
type: "categories"
comments: false

date 可保持系统生成的时间，

type: "categories"
comments: false

很重要

3>修改主题配置文件
去掉categories的注释

menu:
  home: /                       #主页
  categories: /categories    #分类页（需手动创建）
  #about: /about        #关于页面（需手动创建）
  archives: /archives        #归档页
  tags: /tags            #标签页（需手动创建）
  #commonweal: /404.html        #公益 404 （需手动创建）

9.3 在文章中添加categories

在文章xx.md中添加：

categories: 
    - cate

其文件头部类似：

title: TagEditText
date: 2016-11-19 10:44:25
categories: 
    - cate

10 hexo修改文章底部的那个带#号的标签

实现效果图

具体实现方法:

修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag"># 或者 rel="tag">{{ tag_indicate }} {{ tag.name }}，将 # 或者换成<i class="fa fa-tag"></i>

11 Hexo文章置顶的方法

1> 安装插件:

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top即可：

title: 2019
date: 2019-02-14 16:10:03
top: 1

或者在需要置顶的文章的Front-matter中加上top: true亦可。比如下面这样：

title: hexo博客置顶
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true

到目前为止，置顶功能已经可以实现了。

2>设置置顶标志:

打开：/blog/themes/next/layout/_macro 目录下的post.swig文件，定位到<div class="post-meta">标签下，紧接着下一行插入如下代码：

&#123;% if post.top %&#125;
  <i class="fa fa-thumb-tack"></i>
  <font color="7D26CD">置顶</font>
  <span class="post-meta-divider">|</span>
&#123;% endif %&#125;

Hexo常用命令

$ hexo n "博客名称"  => hexo new "博客名称"   #这两个都是创建新文章，前者是简写模式
$ hexo p  => hexo publish
$ hexo g  => hexo generate  #生成
$ hexo s  => hexo server  #启动服务预览
$ hexo d  => hexo deploy  #部署

关于hexo的服务器命令:
$ hexo server   #Hexo 会监视文件变动并自动更新，无须重启服务器。
$ hexo server -s   #静态模式
$ hexo server -p 5000   #更改端口
$ hexo server -i 192.168.1.1   #自定义IP
$ hexo clean   #清除缓存，网页正常情况下可以忽略此条命令
$ hexo g   #生成静态网页
$ hexo d   #开始部署

hexo资料网站:
https://hexo.io/zh-cn/

转载规则

《Hexo 博客搭建指南》由王雨采用知识共享署名 4.0 国际许可协议进行许可。

深度学习GPU环境搭建-上篇

为了加速神经网络的训练，所以使用CUDA和cuDNN对神经网络进行加速，在配置的过程中你会遇到很多坑，经过多次实验做如下超全总结.

2019-08-26 深度学习环境搭建

深度学习环境搭建

本篇

Hexo 博客搭建指南

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hex

2019-08-24 前端 - 创建博客

搭建博客