用hexo在github上搭建个人博客笔记！

一、前提需要Git 和 node.js的支持！

Windows10 x64位 , github page 部署 hexo

nodejs官网下载地址：https://nodejs.org/en/

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

Hexo 中文文档：https://hexo.io/zh-cn/docs/commands.html

Hexo Themes列表：https://hexo.io/themes/

next 主題风格配置：http://theme-next.iissnan.com/

Paste_Image.png

安装完成后通过查看版本看是否安装成功，git鼠标点击右键会有菜单显示。

Paste_Image.png Paste_Image.png

安装 hexo：

1.输入命令：npm install -g hexo （-g 是指全局安装 hexo）

2.查看安装成功与否，输入命令：hexo -v 查看会有版本等信息列出。

Paste_Image.png

3.新建项目文件（必须为空，否则会失败），右键运行Git Bash，输入命令：hexo init 会生成如下文件：

Paste_Image.png

输入 hexo s 命令，生成本地服务。然后浏览器输入 ：http://localhost:4000/ 如果不出意外就会出现如下图：

Paste_Image.png

Paste_Image.png

如果无法访问，可能是端口号占用，更改服务端口号：hexo s -p 5000

二、

申请注册 gitHub 账号，官网地址：https://github.com/ ，登录创建 仓库 ，仓库名必须为（gitHub账号名）.gitHub.io

例如：我的账号是：DiorsCoder，仓库名创建为： DiorsCoder.gitHub.io

Paste_Image.png

修改站点配置文件 DiorsCoder.github.io\ _config.yml

Paste_Image.png Paste_Image.png Paste_Image.png

安装 hexo-deployer-git 自动部署发布工具： npm instal lhexo-deployer-git --save

发布到 gitHub 输入如下命令：hexo clean && hexo g -d

不出意外浏览器访问： https://DiorsCoder.github.io 就能看的部署到线上的项目。

三、配置 SSH key

1. ssh-keygen -t rsa -C "邮箱地址" 然后连续3次回车，最终会生成一个文件在用户目录下，打开用户目录，找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容，打开你的github主页，进入个人设置 -> SSH and GPG keys -> New SSH key：

//生成 key
 ssh-keygen -t rsa -C "YourEmailAddress"
//检测 github 账号的 ssh 是否设置成功
ssh -T git@github.com

Paste_Image.png Paste_Image.png

配置 git 信息：

git config --global user.name "DiorsCoder" #  github用户名 
git config --global user.email  "YourEmailAddress" #github注册邮箱
git config --list #查看

Paste_Image.png

常用命令和报错处理：

hexo init  #执行站点的初始化
hexo g == hexo generate #生成静态页面。在生成时可以加上-d或--deploy参数在生成后立即部署。生成的静态文件在public文件夹下，没有则会自动建立。
hexo d == hexo deploy #将 .deploy 目录部署到 gitHub,也就是将public目录下生成的静态文件上传到某个特定的位置，部署时可以加上-g或--generate参数，在部署前先生成一遍静态文件。

hexo s == hexo server #开启预览访问端口（默认：4000，'ctr+c'关闭server）,在本地http://localhost:4000启动一个hexo服务器，可以用来预览hexo站点的效果。
hexo n == hexo new  #新建一个markdown文件。
hexo new [layout] <title># [layout]是该文件的类型，取值有post、draft和page三种，分别对应新建文章、草稿、页面。在运行该命令时，会调用scaffolds下的对应模板。
hexo clean #清理Hexo缓存。该操作会强制Hexo清空已生成的全部静态文件以及Hexo自身的数据库，有时候相当有效（更换主题后建议运行）。
hexo publish <title>#发布某篇草稿（即将该markdown文件转移到_post文件夹下）

#命令可以复合使用：
hexo clean && hexo g -d

hexo new page message：生成菜单项:

Paste_Image.png Paste_Image.png

如果部署失败 （报错：Deployer not found: git，输入命令：npm install hexo-deployer-git --save 解决！）

Paste_Image.png

輸入 hexo d 命令部署失敗，綫上報錯404或者還是原來的樣子！解決辦法，刪除項目根目錄 .deploy_git 文件夾！重新執行命令： hexo d

Paste_Image.png
Paste_Image.png Paste_Image.png

如果部署失败,报错（Could not read from remote repository.）

解决办法：删除当前key，然后重新生成key，执行（三、配置 SSH key） ，然后从新生成部署。

Paste_Image.png Paste_Image.png Paste_Image.png

提示如下图则说明部署成功：

Paste_Image.png

浏览器输入：https://dragonersli.github.io/ 就可以看到项目了，然后后面就是各种配置了。

卸载Hexo ：3.0.0版本执行npm uninstall hexo-cli -g，之前版本执行npm uninstall hexo -g。

站点部分配置如下：

# Site #站点信息
title: blog Name #标题
subtitle: Subtitle #副标题
description: my blog desc #描述
author: me #作者
language: zh-CN #语言
timezone: Asia/Shanghai #时区
# URL
url: http://yoururl.com   #用于绑定域名, 其他的不需要配置
root: /
#permalink: :year/:month/:day/:title/
permalink: posts/title.html
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 #国际化
skip_render:

# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认模板(post page photo draft)
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: true
  tab_replace:

# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:

# Date / Time format #日期时间格式
## http://momentjs.com/docs/#/displaying/format/
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: next

# Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
deploy:
- type: git
  repo: git@github.com:DiorsCoder/DiorsCoder.github.io.git,gitcafe-pages
- type: git
  repo: git@github.com:DiorsCoder/DiorsCoder.github.io.git,master
message: '站点更新: {{ now("YYYY-MM-DD HH:mm:ss") }}' 
# Disqus #Disqus评论系统
disqus_shortname: 

plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
    
  

四、主题安装：

git clone https://github.com/iissnan/hexo-theme-next themes/next  #next主题
 
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia  #yilia主题

Paste_Image.png

经常修改主题配置文件之后，执行 hexo clean && hexo g -d 命令部署失败，查看错误信息如下：

Paste_Image.png

主题配置文件问题有可能是空格问题，也有可能是配置问题。

---

next 主题添加网站运行天数和访问量：

运行天数：

 //在最后一个div中追加 
<span>   |   </span>
<span id="showDays"></span>

//修改blog\themes\next\layout\_partials\footer.swig文件，在后面追加 
<script>
    var birthDay = new Date('09/1/2016');
    var now = new Date();
    var duration = now.getTime() - birthDay.getTime();
    var total= Math.floor(duration / (1000 * 60 * 60 * 24));
    document.getElementById('showDays').innerHTML='本站已运行' + total + '天';
</script>

访客量和访客人数：

{# 新增代码 #}
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div style="margin:-20px;position: absolute;right:265px;">
<dl style="float:left">
  <dt style="float:left">
    <dd style="float:left;width:300px">
      <span style="float:right">     |</span>
      <span style="float:right">本站总访问量<span><span style="float:right" id="busuanzi_value_site_pv"></span>
    </dd>
  </dt>
  <dt style="float:left;width:300px">
    <dd>
      <span style="float:left">     </span>
      <span style="float:left">您是第</span>
      <span style="float:left" id="busuanzi_value_site_uv"></span>
      <span style="float:left">个小伙伴</span>
    </dd>
  </dt>
</dl>
</div>
{# 结束 #}
<!--新增代码-->

添加代码示例：

Paste_Image.png

效果如下：

Paste_Image.png