搭建hexo博客

配置本地环境

1、下载安装这两个软件 Git-2.21.0-64-bit.exe    node-v10.15.3-x64.msi  如下图

2、在自己电脑某个盘里新建一个文件夹(自定义名称)  我的文件夹名称为 czjblog

3、然后在文件夹里，右键—>选择Git Bash Here  就打开另一个窗口了，如下图

 

4、安装hexo  用命令 npm install hexo –g  如果网络好的话很快就行了

5、检查一下是否安装成功   用命令 hexo –v  出现以下图说明成功了

 

6、初始化自己创建的文件夹  用命令 hexo  init

 

7、生成静态页面  用命令  hexo  g

8、启动项目 用命令  hexo  s   出现如下图说明启动成功  去浏览器输入 http://localhost:4000 来访问了.

 

配置github环境

1、首先得去github官网上面去注册一个账号

2、然后新建一个仓库依赖，如下图

3、然后来到这页面，如下图

https://github.com/caozhongjue/caozhongjue.github.io.git

[email protected]:caozhongjue/caozhongjue.github.io.git

4、然后修改本地博客目录的配置：

修改本次博客根目录下的_config.yml文件，修改deploy下的配置如下：

type: git

repository:  [email protected]:caozhongjue/caozhongjue.github.io.git  //caozhongjue换为自己的

branch: master

5、控制台命令：npm install --save hexo-deployer-git    //安装部署插件

6、由于我是用ssh 与github关联的，所以得操作这步，输入命令 ssh-****** -t rsa -C “[email protected]”  连续回车三下生成**，最后得到了两个文件：id_rsa和id_rsa.pub（默认存储路径是：C:\Users\Administrator\.ssh）

如下图 

7、经过上面的步骤，在C:\Users\Administrator\.ssh下面生成了一个id_rsa.pub文件，把里面的内容复制到 github ssh安全那里，如下面

标题随便填，键是id_rsa.pub文件里面的内容。

8、可以使用hexo d 发布项目到github上面去了  如下图

更改默认主题样式

Next主题的使用说明

http://theme-next.iissnan.com/getting-started.html

 

1、使用命令  git clone https://github.com/iissnan/hexo-theme-next

2、修改项目目录下_config.yml文件内容，把theme：后面的内容换为hexo-theme-next

theme:  hexo-theme-next  #修改网站主题样式

title: czj'blog  #

author:  czj  #修改作者

language:  zh-Hans  #修改网站的显示语言，这里是中文

3、修改项目目录下hexo-theme-next 主题下的_config.yml文件内容，

menu:

        home: / || home

        about: /about/ || user

        tags: /tags/ || tags

        categories: /categories/ || th

        archives: /archives/ || archive

上面这几个就是下面的

1、添加分类模块 命令如下

hexo new page categories

 

你会发现你的source文件夹下有了categorcies/index.md，打开index.md文件将title设置为title: 分类

3、打开 主题配置文件 找到menu，将categorcies取消注释

4、把文章归入分类只需在文章的顶部标题下方添加categories字段，即可自动创建分类名并加入对应的分类中

举个栗子：

title: 分类测试文章标题

categories: 分类名

 

添加标签模块  命令hexo new page tags

同上

添加关于模块   命令hexo new page about

同上

highlight_theme: night bright  #代码的样式

avatar: https://s2.ax1x.com/2019/05/23/VPZiAe.png   #设置头像

4、添加搜索功能

4.1、安装 hexo-generator-searchdb 插件

npm install hexo-generator-searchdb --save

4.2、打开 站点配置文件 找到Extensions在下面添加

search:

         path: search.xml

         field: post

         format: html

         limit: 10000

4.3、打开 主题配置文件 找到Local search，将enable设置为true

5、修改文章内链接文本样式

打开文件 themes/next/source/css/_common/components/post/post.styl，在末尾添加

6、首页的文章只显示一半

用文本编辑器打开 themes/next 目录下的 _config.yml 文件，找到这段代码：

auto_excerpt:

  enable: false

  length: 150

把 enable 的 false 改成 true 就行了，然后 length 是设定文章预览的文本长度。

修改后重启 hexo 就ok了。

最后博客样式

项目的目录结构

source 文件夹存放着用markdown编辑器写的文章    每次添加文章都是用markdown编辑器写好保存，放到source下面的_post文件夹下面去

themes 这里存放着样式

_config.yml 主站点配置文件 ，themes样式文件夹下面的文件夹里也有个样式配置文件

可以使用MarkdownPad2编辑器写文章，写完后，把那个.md文章放到source下的_post文件夹下，

然后右键打开窗口， 依次使用命令 hexo clean  , hexo g  ,hexo d