用hexo在github上搭建个人博客笔记！
2017-07-05 本文已影响729人
DragonersLi
一、前提需要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
- 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
