By

Contents
  1. 1. hexo 博客搭建步骤
    1. 1.1. 环境准备
    2. 1.2. 创建仓库
    3. 1.3. 配置SSH key
    4. 1.4. 测试github key添加是否成功
    5. 1.5. Hexo相关操作
    6. 1.6. 修改主题
    7. 1.7. 上传到github
  2. 2. 写博客
    1. 2.1. 创建new post
    2. 2.2. 推送到github
  3. 3. Hexo命令
  4. 4. 常见问题
    1. 4.1. 如何显示博文摘要
    2. 4.2. 如何显示分类、标签
    3. 4.3. 如何建立自我介绍页面（About页面）
    4. 4.4. 如何修改主题的颜色
    5. 4.5. 为什么开启了微博秀后，显示是空白的，没有内容展示？

hexo 博客搭建步骤

环境准备

  • github帐号，以及git bash客户端；
  • 安装了node.js、npm

创建仓库

在你的github中新创建一个仓库，仓库名字必须是username.github.io,例如我的是bolen.github.io

gitrepo

配置SSH key

如果你之前在本机用过github，并且以及产生ssh key则可忽略此步骤。

配置此步骤是在github服务器端记录git bash客户端电脑的公钥，这样就不用每次提交代码都填写用户名和密码了。

gitbash执行如下命令：

1
2
3
$ ls ~/.ssh

id_rsa  id_rsa.pub  known_hosts  themes/

如果之前产生过公钥就会有如上图所示文件，如果提示No such file or directory 说明你是第一次使用git，则产生公钥：

1
ssh-keygen -t rsa -C "邮件地址"

然后查看并复制public key:

360截图17571124393385

在github中添加此公钥：

settings–> SSH and GPG keys –> New SSH key，将上面的公钥粘贴到此处。

360截图167204086410894

测试github key添加是否成功

gitbash中如下命令：

$ ssh -T git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes，然后会看到类似下面的信息：

Hi bolenzhang! You’ve successfully authenticated, but GitHub does not provide shell access.

说明你的SSH key已配置成功。

此时你还需要配置：

$ git config --global user.name "bolenzhang"// 换成你自己的github用户名
$ git config --global user.email "xxx@163.com"// 填写你的github注册邮箱

Hexo相关操作

hexo简介

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具，支持Markdown格式，有众多优秀插件和主题。

官网： http://hexo.io
github: https://github.com/hexojs/hexo

由于github pages存放的都是静态文件，博客存放的不只是文章内容，还有文章列表、分类、标签、翻页等动态内容，hexo将这些md文件都放在本地，每次写完文章后调用写好的命令来批量完成相关页面的生成，然后再将有改动的页面提交到github。

hexo安装

$ npm install -g hexo

初始化

在电脑里新建一个文件夹用以存放博客相关内容，我的是C:\Users\bolen\myblog.

1
2
$ cd C:\Users\bolen\myblog
$ hexo init

hexo会自动下载一些文件到这个目录，包括node_modules.

1
2
$ hexo g # 生成html文件到public目录
$ hexo s # 开启本地预览服务

此时打开浏览器访问 http://localhost:4000 即可看到内容，如果碰到浏览器刷不出来此页面的情况，请坚持4000端口是否被占用。

第一次初始化的时候hexo会呈现一篇名为Hello World的文章，默认主题。

修改主题

默认的主题比较丑，大家可以更换自己喜欢的主题，官方主题，

首先下载这个主题：

1
2
3
$ cd  C:\Users\bolen\myblog\hexo

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

然后将/hexo/themes中的_config.yml中的theme： landscape改为theme：yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

上传到github

  1. 配置_config.yml中有关deploy的部分：
1
2
3
4
deploy:
  type: git
  repository: git@github.com:liuxianan/liuxianan.github.io.git
  branch: master
  1. 安装插件
1
npm install hexo-deployer-git --save

  1. 提交代码

    此时打开git bash 输入hexo d就会将本次有改动的代码全部提交。

写博客

到hexo根目录然后执行：

创建new post

hexo new ‘文章名’

hexo会帮我们在_posts下生成相关md文件. 当然你也可以直接自己新建md文件，用这个命令的好处是帮我们自动生成了时间。这里一定要注意新建的时候不要用windows自带的记事本，我曾被这里坑了很久！ 另外MarkDown的编辑器推荐用Atom或Typora。

注意： Hexo对MarkDown文档头有严格的规范，官方称为 Front-matter, 即两个—中间的部分，一般完整格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: postName #文章页面上的显示名称，如果用hexo new的方式会自动生成
date: 2018-2-02 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: #分类 可以直接空格跟在后面，也可以如下这种：
- 札记
tags: [tag1,tag2,tag3] #文章标签，可空，多标签可以用这种也可以用上面- 札记的方式。
toc: true  #是否显示目录，false不显示，true显示，需要主题支持
top:  #填数字，值越大的文章在首页就越置顶，需要主题支持
comments: true  #是否允许评论，需要主题支持
keywords: ''    #文章关键词，需要主题支持
description:  '文章摘要，可以是一大段，
可以换行，用英文引号括起来'  #不填则根据主题设计截取对应字数
---

以下是正文

需要额外注意的是：每个: 一定要有一个空格。更多Front-matter规范参见官方文档：

那么hexo new page 'postName'命令和hexo new 'postName'有什么区别呢？

1
hexo new page "my-second-blog"

生成如下：

img

最终部署时生成：hexo\public\my-second-blog\index.html，但是它不会作为文章出现在博文目录。

推送到github

然后执行hexo d -g命令即可生成博文了，有时需要先执行hexo clean。

Hexo命令

常用命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #将.deploy目录部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo deploy -g  #生成加部署
hexo server -g  #生成加预览

命令的简写
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

部署文件需要三步

1
2
3
hexo c
hexo g
hexo d

有时不需要hexo g

常见问题

如何显示博文摘要

在合适的位置加上<!--more-->即可

如何显示分类、标签

默认没有启用 /tags 和 /categories页面，如果需要启用请在博客目录下的source文件夹中分别建立tags 和 categories文件夹每个文件夹中分别包含一个index.md文件。内容为：

1
2
3
layout: tags (或categories)
title: tags (或categories)
---

​ 因为主题中已经内置了这两个页面的模板，所以他们会被正确的解析出来。

其实上面可以简化位hexo new page indexs/categories，就会在source文件夹下自动生存所需的两个文件夹以及index.md，只是index.md需要用上述的内容格式填写。

如何建立自我介绍页面（About页面）

首先在主目录找到_config.yml，找到url添加about_dir: about到这个板块。然后在/source里面建立about文件夹。在about文件夹里建立index.md。编辑index.md就和发布其他的文章一样，格式都一样。

如何修改主题的颜色

包括颜色在内的很多变量都在jacman/source/css/_base/variable.styl文件中，可以修改成你喜欢的。

为什么开启了微博秀后，显示是空白的，没有内容展示？

每次修改参数都会这样，需要多刷新几次或者上传到服务器上就好了。

Contents
  1. 1. hexo 博客搭建步骤
    1. 1.1. 环境准备
    2. 1.2. 创建仓库
    3. 1.3. 配置SSH key
    4. 1.4. 测试github key添加是否成功
    5. 1.5. Hexo相关操作
    6. 1.6. 修改主题
    7. 1.7. 上传到github
  2. 2. 写博客
    1. 2.1. 创建new post
    2. 2.2. 推送到github
  3. 3. Hexo命令
  4. 4. 常见问题
    1. 4.1. 如何显示博文摘要
    2. 4.2. 如何显示分类、标签
    3. 4.3. 如何建立自我介绍页面（About页面）
    4. 4.4. 如何修改主题的颜色
    5. 4.5. 为什么开启了微博秀后，显示是空白的，没有内容展示？