hexo+github搭建免费的个人博客

总要有一个理由来说服自己，建一个自己的巢穴，守着心中的浴火、安静自己的希望。

前言

安装环境：Window7 64位

一、安装Git Bash

二、安装Nodejs

以上第一步与第二步，均可傻瓜式安装，在此不表，提二处注意事项

安装git过程中有一项选择“Use Git from the Windows Command Prompt”，其余均默认

三、安装Hexo

访问Hexo的官方文档了解如何安装Hexo，屋主在这里也只大致将之前自己搭建的命令放下给各位看官。

安装hexo

使用git --version、node -v、npm -v查看是否已经安装好git与node，安装好了之后，在指定的文件目录中执行命令：

npm install -g hexo-cli 
# npm镜像 配置文件在：C:\Users\用户名\.npmrc，直接修改它和使用npm config set是一样的效果。
# 如果以上命令等待超时，可以换用淘宝npm安装Hexo，命令如下：
npm config set registry https://registry.npm.taobao.org
npm install -g hexo-cli

可能会看到一个WARN，正常，不用担心，不影响正常使用。然后输入

1	npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字，下面我们来看一看Hexo是不是已经安装好了。在命令行中输入

$ hexo v
hexo-cli: 1.0.3
os: Windows_NT 6.1.7601 win32 x64
http_parser: 2.7.0
node: 8.4.0
v8: 6.0.286.52
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
nghttp2: 1.22.0
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

显示如上，则Hexo安装成功。

初始化hexo

屋主选择在E盘下新建Hexo文件夹，并且cd至该目录，之后提到的Hexo根目录均指该目录

1
2
3

hexo init 	
npm install	#安装生成器
hexo s -g  	#本地运行博客，打开浏览器，输入localhost:4000，就可以在本地查看个人博客啦。

管理博客

有两个配置文件_config.yml，Hexo文件根目录下视为站点配置，另一个themes目录下主题文件夹内的配置文件为主题配置

站点配置文件信息

title: 静美书斋屋主人	#博客名称
subtitle: 心灵驿站	#副标题
#简介，会出现在author下面
description: 总要有一个理由来说服自己，建一个自己的巢穴，守着心中的浴火、安静自己的希望。
author: 静美书斋 	#博客作者
language: zh-Hans	#博客语言，这里选择中文
timezone: Asia/Shanghai	#时区，选择亚洲/上海
url: https://jmszwzr.github.io/		#用于绑定域名，其他的不需要配置
root: /
permalink: :year/:month/:day/:title/
permalink_defaults: 
# Directory
source_dir: source	#源文件
public_dir: public	#生成的网页文件
tag_dir: tags	#标签
archive_dir: archives	#归档
category_dir: categories	#分类
code_dir: downloads/code
i18n_dir: :lang	#国际化
# 此处屋主是在source目录下新建的README文件，hexo生成的时候自动忽略渲染，此README文件会现在github上
# 由于屋主使用阿里云的git版本控制来进行备份，所以，也在Hexo文件根目录下一同新建了README文件
skip_render: README.md
# Writing
new_post_name: :title.md #新文章标题
default_layout: post	#默认模板
titlecase: false #标题转换成大写
external_link: true # 在新标签里打开链接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:	#语法高亮
  enable: true
  line_number: true	#显示行号
  auto_detect: false
  tab_replace:
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
default_category: uncategorized	#默认分类
category_map:
tag_map:
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination 分页
per_page: 10	#每页文章数，设置成0禁用分页
pagination_dir: page
# Extensions #插件和主题
## 插件: http://hexo.io/plugins/
## 主题: http://hexo.io/themes/
# theme: landscape
theme: next		#此处屋主选择了已经安装的NexT主题
deploy:
  type: git
  # 此处的`jmszwzr`换做你的github用户名
  repo: https://github.com/jmszwzr/jmszwzr.github.io.git
  branch: master

重要提示：无论是站点配置还是主题配置文件中的书写，冒号之后一定要有一个空格！切记！

创建博客文章

创建文章命令，生成一个md文件（/source/_posts/）

1	hexo new "我的第一篇博文"

发布博客

首先需要设置git身份信息

1 2	git config --global user.name "你的用户名" git config --global user.email "你的邮箱"

安装hexo git插件

1	npm install hexo-deployer-git --save #此过程稍长，耐心等待

使用git bash客户端是看不到安装的动态过程的，建议使用windows自带的cmd，cd到Hexo目录，执行上述命令，随后会有一行动态执行的安装过程。

发布更新博客

hexo d -g

首次发布时，需要输入github的账号与密码

屋主喜欢在发布更新之前hexo clean一下，再使用上述命令

当出现INFO Deploy done:git时，即发布成功，访问https://yourname.github.io可以查看自己的博客。

四、NexT主题

设置favicon图标

Step 1:

首先要有一个常见格式名(如.jpg, .png等)的图片作为备选favicon，选择一个favicon制作网站完成制作，例如比特虫是一个免费的在线制作ico图标网站。

Step 2:

将favicon.ico文件放在网站根目录下的source文件夹内即可。刷新网站，就可以看到效果了。

设置首页文章显示篇数

Step 1: 安装相关插件

输入如下命令

1
2
3

npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-tag

Step 2:

安装完插件后，在站点配置文件中，添加如下内容

index_generator:
  per_page: 5
archive_generator:
  per_page: 20
  yearly: true
  monthly: true
tag_generator:
  per_page: 10

其中per_page字段是你希望设定的显示篇数。index, archive及tag开头分表代表主页，归档页面和标签页面。

添加站内搜索功能

NexT支持Swiftype插件以实现站内搜索功能。

Step 1: 注册Swiftype

Step 2: 创建一个新的搜索引擎 (点击Create an engine，按要求创建即可)

Step 3: 点击新建的搜索引擎，按如下点击INSTALL SEARCH

然后复制下面蓝色底的字串

Step 4: 编辑站点配置文件，添加如下内容

1 2	# Swiftype Search Key swiftype_key: xxxxxxxxx(粘贴以上复制的内容)

资料来源：

Nodejs安装

node.js学习笔记（一）环境安装

搭建过程

知乎：使用hexo，如果换了电脑怎么更新博客？

Hexo的版本控制与持续集成

主题设置

添加打赏

微信支付宝打赏样式调整 - 求不晃