使用Coding + Hexo搭建个人博客



生活是一面镜子。你对它笑,它就对你笑;你对它哭,它也对你哭。



hexo

Hexo是一个将开源的静态博客项目

首先安装环境

1 .安装node.js (用于生成静态页面)

前往node.js官网下载对应pc的版本进行安装

2 .安装Git

同理上官网下载对应版本进行安装

3 .注册Coding或者Github账号用来创建仓库

你懂得

接下来进行Hexo的安装

安装Hexo

在磁盘创建文件夹用来存放生成的博客文件

创建好后进入文件夹Shift + 鼠标右键 , 选择在此处打开cmd(此处省略若干cmd代码)

输入如下代码进行Hexo安装

1
2
cd dir
npm install -g hexo

对Hexo进行初始化

1
hexo init

初始化完成后到创建的文件夹中Hexo克隆

编译静态页面

1
hexo g

启动本地服务进行调试,或者进入debug模式

1
2
3
hexo s

hexo s --debug(调试模式)

如果没有报错并且访问http://localhost:4000成功则大功告成了 一半!

Coding创建仓库

注册并登陆Coding后创建仓库存放博客文件

仓库名为:用户名.coding.me

点击创建,现在的仓库创建OK

接下来配置博客推送的仓库位置

在创建的文件夹(博客)根目录使用文本编辑器打开_config.yml配置文件

在文件最下面的部分修改为如下代码并保存

1
2
3
4
5
6
7
deploy:

type: git

repo: 项目地址

branch: master

然后执行命令:

1
npm install hexo-deployer-git --save

然后输入配置命令

1
hexo d

将博客推到仓库中

第一次会弹出登陆git

最后访问 你的用户名.coding.me访问博客

每次有博客更新使用

1
hexo d -g

编译并上传

Hexo的基本使用

创建新的文章

1
2
hexo new "postName"
#文章名不要用中文不然会无法提交

创建新页面

1
2
hexo new page "PageName"
#创建后会在根目录/source/目录下出现所创建的页面的文件夹里面是一个md文档,像编辑Html编辑就可以

需要注意的是创建标签页和分类页面需要进行设置类型

1
2
3
4
5
---
title: 标签
date: 2014-12-22 12:39:04
type: "tags"
---

其他设置可以参考hexo的官方文档

next主题使用

next主题现已经更新到6.x,配置上与5.x略有不同

下载主题:

1
2
cd hexo目录
git clone https://github.com/theme-next/hexo-theme-next themes/next

应用主题:
在站点配置文件中修改

1
theme: next

设置主题的语言

修改站点配置文件

1
2
language: zh-CN
#在6.x之前,简体中文设置为: zh-Hans

设置站点图标

上传图标文件到主题下source\images目录下,并修改主题配置文件

1
2
3
4
favicon:
small: /images/favicon.ico
medium: /images/favicon.ico
将图标路径修改成上传的图标位置

修改站点底部栏内容

修改主题配置文件中的如下部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
footer:
#网站创建日期
since: 2017
#网站创建日期和作者之间的图标可在如下图标库中寻找喜欢的图标
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# 图标名称
name: heart
# 是否开启图标动画
animated: true
# 图标颜色
color: "#e91662"

# 网站作者,不填内容默认为站点配置中的author值.
copyright:
# -------------------------------------------------------------
powered:
# Hexo 链接 (Powered by Hexo).
enable: true
# 是否显示Hexo版本
version: false

theme:
# 是否显示主题名
enable: true
# 是否显示主题版本
version: false