hexo博客搭建详述

搭建hexo博客

个人博客 http://gongzhijia.cn

安装gitbash

（相似于cmd，只不过我偏爱这个）

• 下载地址：https://git-for-windows.github.io/

• 安装步骤：傻瓜式下一步

• 完成之后，检验打开gitbash。输入命令git version查看版本

安装nodeJs

hexo是基于nodeJs环境下的静态博客

• 下载地址：https://nodejs.org/en/（LTS为长期维护版本，Current为最新版）
• 也是一路next ， 过在Custom Setup这一步记得选 Add to PATH ,这样你就不用自己去配置电脑上环境变量了 ， 装完在按 win + r 快捷键调出运行，然后输入cmd确定，在cmd中输入node。检查环境，如果指令有反应。显示如图：
  成功

安装hexo

创建一个文件夹用来存放blog的相关东西

安装hexo，命令：nmp i -g hexo

安装完成之后，用于检测是否安装成功。可查看其版本。命令hexo -v

初始化，命令：hexo init （稍作等待） 初始化完成之后打开文件可有如下

搭桥到github

• 没有账号创建一个即可

• 获得账号，创建一个repo，名称规则 yourname.github.io。其中yourname是你的github名称

• 回到gitbash中，配置github的账户信息。命令 git config --global user.name "YourName" 回车，接着再输入命令 git config --global user.email "YourEmail"。（其中引号中均是你的信息）

创建SSH

在gitbash中输入：`ssh-keygen -t rsa -C "[email protected]"`，生成ssh 。回车回车即可

紧接着，输入命令cd ~/.ssh回车。cat id_rsa.pub回车。

如图：

​ 将上所得放置github的SSH keys中。title随便，key即为上所得

打开你的blog项目，找到_config.yml文件。修改：

deploy: 
type: git  
repo:https://github.com/YourgithubName/YourgithubName.github.io.git 
branch: master

回到gitbash中，进入blog目录。分别执行以下命令：hexo clean,hexo generate,hexo server.

打开浏览器输入本地网址 http://localhost:4000/

修改主题及主题优化

修改主题

我比较喜欢next主题，所以在这里以他为例：

下载主题：

gitbash命令cd到blog文件下，（推荐小白直接到blog文件夹下打开gitbash）。输入命令git clone https://github.com/iissnan/hexo-theme-next themes/next。过程有些慢，稍等片刻即可。完成之后你将会在blog的theme文件夹下发现多出的next主题文件

配置

打开blog的_config.yml文件，找到theme。将其默认的landscape改为next。

—_config.yml文件详解

1. site

# Site
title: 宫家小屋    网站标题
subtitle: ''    网站副标题
description: ''			网站描述
keywords:				网站关键字
author: gong		网站作者
language: en			网站语言，默认为en，中文写zh-Hans
timezone: ''		网站时区

2. URL（一般不用修改）

 URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com   网站的地址
root: /		网站的根目录，存放文章
permalink: :year/:month/:day/:title/		文章的链接格式
permalink_defaults:				永久链接中每个段的默认值
pretty_urls:
  trailing_index: true # Set to false to remove trailing index.html from permalinks

3. Directory(关于文件夹的一些设置，一般也不用修改)

 Directory
source_dir: source   资源文件夹 ，存放用户的资源文件，默认为 source
public_dir: public   公用文件夹 ，存放生成的静态文件，默认为 public
tag_dir: tags       标签目录 ，默认为 tags
archive_dir: archives   档案目录 ，默认为 archives
category_dir: categories   分类目录 ，默认为 categories
code_dir: downloads/code   代码目录 ，默认为 downloads/code
i18n_dir: :lang   i18n目录 ，默认为 :lang
skip_render:     储存站长验证文件，跳过指定文件的渲染

参考资料 https://blog.csdn.net/wsmrzx/article/details/81477926

查看

经过上述修改完毕时候，gitbash命令：hexo clean,hexo gen,hexo s（这里可简写）

发表自己第一篇博文

命令$ hexo new "hexo-github博客搭建"，打开文件如图：

可以看到刚创建的文档，均是md格式。打开即可进行编辑。

最后发到远端

• 先安装插件，gitbash命令npm install hexo-deployer-git --save
• 执行命令

hexo clean
hexo generate
hexo deploy

接下来你就可以通过https：//yourname.github.io 进行访问了

使得博文支持图片

• 设置站点配置文件_config.yml中 post_asset_folder:true。 （ Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder当您设置post_asset_folder为true参数后，在建立文件时，Hexo会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹。 ）

• 安装插件：blog目录下gitbash命令npm install https://github.com/CodeFalling/hexo-asset-image --save

• 安装完成之后，新建博文。打开博文文件。发现如图：
  

• 文章插入图片格式推荐

![](hexo-github博客搭建/10.png)  括号内为其相对地址，小白可直接写文件名字+图片名字

设置背景图

在 themes/*/source/css/_custom/custom.styl 中添加如下代码：

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

同时找一张图片放入images文件内，记得与上述url对应名字

设置评论功能

因为多个 论系统已经下线或者是外国网站，容易被墙，所有这里选择valine

操作

• 打开next文件夹的_config.yml文件，找到valine字段 。设置enable字段值为true
• 然后前往leancloud注册账号，随意注册一个应用 。根据下图，打开设置.复制Appid和APPkey

• 到主题下的valine字段配置文件中

• 完成效果图：