如何用 windows+github搭建一个优美的hexo博客

1.Hexo简单介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

风一般的速度
Hexo基于Node.js，支持多进程，几百篇文章也可以秒生成。
流畅的撰写
支持GitHub Flavored Markdown和所有Octopress的插件。
扩展性
Hexo支持EJS、Swig和Stylus。通过插件支持Haml、Jade和Less.

总之有个动态背景图啥特别好管理也非常的优美

展示地址:
Hexo演示地址

2.Hexo安装

2.1 安装准备与环境

Node.js
Git

Git是为了方便管理代码啊 github for windows也可以

2.2 本地搭建

配置github仓库

登陆你的github账号
创建你的github库，注意命名规则：
```
你取的名字.github.io
```

然后克隆到本地地址如下

在你想要放置仓库的文件点击右键 git bash here 前提是安装好了git
或者使用github for windows也行

git clone 你的仓库地址

安装初始化Hexo

安装Hexo
在刚clone完的git bash界面输入命令

npm install -g hexo

cmd也行

安装完毕输入命令

hexo version

查看安装是否成功

初始化 Hexo
输入命令

hexo init

初始化完成hexo的创建

安装hexo相关插件到我们的博客目录下这里是调用的node.js，命令如下

npm start

hexo s #全程是hexo server

下图是完全安装后的文件

3. 运行Hexo

安装好hexo后，通过下面代码可以生成静态页面，生成的静态页面存储在public目录下:

hexo g #全称是hexo generate `

运行服务开启端口
开启预览访问端口（默认端口4000，git bash下 ‘ctrl + c’ 关闭server）输入命令

hexo s #全程是hexo server

下图表示运行成功可以看到地址我们访问http://localhost:4000/
，即可看到hexo自带的hello world 页面

至此，hexo已经在本地搭建完成。

4. 配置主题

hexo默认使用的是landscape主题，下文将采用NexT主题。
Next主题目前是最好看最流行的
想更换主题的可以参考:

有哪些好看的 Hexo 主题？

安装主题

将next的代码clone到项目中，保存在github仓库中的themes/next目录下:

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改配置

修改根目录下的_config.yml配置文件：

新建的hexo文件中使用的是默认的主题landscape，将其修改为next（next为主题安装的目录名themes/next）

修改后运行输入命令

hexo server -g #为hexo generate及hexo server的缩写

然后浏览器访问就可以看到我们变化的主题啦

设置主题

添加我们的个人介绍
修改根目录下配置文件_config.yml
头像的地址也在这儿设置
通过avatar字段设置，站点外头像设置avatar：图片url，站点内头像设置avatar：目录/图片名.图片格式

在根目录下的_config.yml文件中，添加avatar字段：

NexT 通过 Scheme 提供主题中的主题。 Mist 是 NexT 的第一款 Scheme。启用 Mist 仅需在主题配置文件中将 #scheme: Mist 前面的 # 注释去掉即可。

修改themes/next目录下的_config.yml文件：

添加首页的标签栏

添加标签栏

hexo new page tags

修改刚创建的tags文件夹(github仓库目录\source\tags)下的index.md文件：

在themes/next目录下的_config.yml文件中，将 menu关键字中 about 前面的注释去掉即可

添加分类

hexo new page categories

修改刚创建的categories文件夹(github仓库目录\source\categories)下的index.md文件

添加About 界面

hexo new page about

在themes/next目录下的_config.yml文件中，将 menu关键字中 about 前面的注释去掉即可

同类型的操作还有配置 sitmap 和错误的404界面

404界面

腾讯公益404页面使用方法，新建 404.html 页面，放到主题的 source 目录下(themes/next/source)，内容如下

  <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="robots" content="all" />
      <meta name="robots" content="index,follow"/>
    </head>
    <body>

    <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="your site url " homePageName="回到我的主页"></script>

    </body>
    </html>

界面美化

添加github绶带

github绶带

获取源码后，修改arsense.github.io\themes\next\layout目录下的_layout文件：
将绶带的代码，添加在上方即可。

完成以上步骤后，运行效果：

添加RSS

输入命令

npm install --save hexo-generator-feed

修改根目录下配置文件_config.yml
在themes/next目录下的_config.yml文件中，
添加

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

修改底部的#为标签

修改模板

/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，
将 # 换成<i class="fa fa-tag"></i>

文章底部添加本文结束

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后在themes\next打开配置文件（_config.yml),在末尾添加：

上传github

这里我们已经基本大功告成

   hexo clean
    hexo generate  
    hexo deploy

输入命令即可部署hexo到github 上
在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)

看URL访问

番外篇

hexo常用命令

hexo命令

常用命令：
hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
hexo deploy #将.deploy目录部署到GitHub

常用复合命令：
hexo deploy -g
hexo server -g

简写：
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy