caozhongjue1的gravatar头像
caozhongjue1 2019-05-23 16:34:46
搭建hexo博客

配置本地环境

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

搭建hexo博客

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

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

搭建hexo博客

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

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

搭建hexo博客

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

搭建hexo博客

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

搭建hexo博客

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

搭建hexo博客

 

配置github环境

  1. 首先得去github官网上面去注册一个账号
  2. 然后新建一个仓库依赖,如下图

搭建hexo博客

搭建hexo博客

 

  1. 然后来到这页面,如下图

搭建hexo博客

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

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

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

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

deploy:

          type: git

          repository:  git@github.com:caozhongjue/caozhongjue.github.io.git  //caozhongjue换为自己的

          branch: master

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

 

6、由于我是用ssh 与github关联的,所以得操作这步,输入命令 ssh-keygen -t rsa -C “2857113935@qq.com”  连续回车三下生成密钥,最后得到了两个文件:id_rsa和id_rsa.pub(默认存储路径是:C:\Users\Administrator\.ssh)

如下图 

搭建hexo博客

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

搭建hexo博客

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

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

搭建hexo博客

Next主题的使用说明

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

使用命令  git clone https://github.com/iissnan/hexo-theme-next  下载next样式

修改项目目录下_config.yml文件内容,把theme:后面的内容换为hexo-theme-next

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

title: czj'blog  #

author:  czj  #修改作者

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

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

menu:

home: / || home

about: /about/ || user

tags: /tags/ || tags

categories: /categories/ || th

archives: /archives/ || archive

上面这几个就是下面的

搭建hexo博客

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.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了。

搭建hexo博客

项目的目录结构

搭建hexo博客

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

themes 这里存放着样式

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

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

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

 


打赏
最近浏览
月之氏族  LV23 2019年5月24日
caozhongjue1  LV13 2019年5月23日
最代码官方  LV167 2019年5月23日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友