HEXO 博客折腾
HEXO 博客折腾
前言
最近在思考多端办公写作,文章同步的问题时,发现了一些问题,也就是差不多算是多端备份的问题,之前搭建博客发现有局限性,毕竟不能一直有服务器,一直都用OneDrive,发现不错,但是最近才发现,网页端一直进不去,原来是一直要番强的,一直都想试试HEXO了,没有做,现在就来踩踩坑.
环境准备
HEXO基于Node.js，支持多进程，几百篇文章也可以秒生成。
Node.js
Git
Github SSH Key
配置ssh,省的每次都要输入账户密码了
首先配置用户和邮箱
git config --global user.email "chinasker@qq.com"
git config --global user.name "Freakboy"
生成密钥：
ssh-keygen -t rsa -C "chinasker@qq.com"
输出密钥的路径
Generating public/private rsa key pair.
Enter file in which to save the key (/d/Users/Boy/.ssh/id_rsa): F:\git\myssh\ssh
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in F:\git\myssh\ssh.
Your public key has been saved in F:\git\myssh\ssh.pub.
将生成的ssh.pub添加到github上,Settings->SSH and GPG keys->New SSH key,把ssh.pub内容复制到这里就行.
本地把生成的私钥和公钥ssh和ssh.pub都复制到Git安装目录的~/.ssh目录下,一般在用户目录下
测试
ssh -T git@github.com
输入如下信息则成功!
Hi Freakboy! You've successfully authenticated, but GitHub does not provide shell access.
首次连接会有提示确认指纹信息.
安装HEXO
Node和Git都安装好后，可执行如下命令安装hexo：
npm install -g hexo
创建博客目录
mkdir blog
cd blog
初始化
hexo init
生成静态页面
hexo generate 或者 hexo g
命令必须在init目录下执行，否则不成功，但是也不报错。
当你修改文章Tag或内容，不能正确重新生成内容，可以删除hexo\db.json后重试，还不行就到public目录删除对应的文件，重新生成。
本地启动测试
hexo server
浏览器输入http://localhost:4000就可以看到效果。
配置Github
建立Repository,建立与你用户名对应的仓库，仓库名必须为【your_user_name.github.io】,固定写法 然后建立关联，我的Blog在本地/f/blog，Blog是我之前建的东西也全在这里面，有：
Blog
｜
｜－－ _config.yml
｜－－ node_modules
｜－－ public
｜－－ source
｜－－ db.json
｜－－ package.json
｜－－ scaffolds
｜－－ themes
**现在我们需要_config.yml文件，来建立关联，命令：**
deploy:
type: git
repository: https://github.com/Freakboy/Freakboy.github.io.git
branch: master
执行如下命令才能使用git部署
npm install hexo-deployer-git --save
网上会有很多说法，有的type是github, 还有repository 最后面的后缀也不一样，是github.com.git，我也踩了很多坑，我现在的版本是hexo: 3.1.1，执行命令hexo -vsersion就出来了,貌似3.0后全部改成我上面这种格式了。 忘了说了，我没用SSH Keys如果你用了SSH Keys的话直接在github里复制SSH的就行了，总共就两种协议，相信你懂的。 然后，执行配置命令：
hexo deploy
然后再浏览器中输入https://freakboy.github.io/
部署步骤
每次部署的步骤，可按以下三步来进行。
hexo clean
hexo generate
hexo deploy
写文章
执行new命令，生成指定名称的文章至hexo\source_posts\postName.md
hexo new [layout] "postName" #新建文章
其中layout是可选参数，默认值为post。有哪些layout呢，请到scaffolds目录下查看，这些文件名称就是layout名称。当然你可以添加自己的layout，方法就是添加一个文件即可，同时你也可以编辑现有的layout，比如post的layout默认是hexo\scaffolds\post.md
title: { { title } }
date: { { date } }
tags:
---
请注意，大括号与大括号之间我多加了个空格，否则会被转义，不能正常显示。
看一下刚才生成的文件hexo\source_posts\postName.md，内容如下：
title: postName #文章页面上的显示名称，可以任意修改，不会出现在URL中
date: 2016-12-08 22:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: #文章分类目录，可以为空，注意:后面有个空格
tags: #文章标签，可空，多标签请用格式[tag1,tag2,tag3]，注意:后面有个空格
---
这里开始使用markdown格式输入你的正文。
接下来，你就可以用喜爱的编辑器尽情书写你的文章。享受Markdown吧!
fancybox
**可能有人对这个Reading页面中图片的fancybox效果感兴趣，这个是怎么做的呢。
很简单，只需要在你的文章.md文件的头上添加photos项即可，然后一行行添加你要展示的照片：*
layout: photo
title: 我的阅历
date: 2016-12-08 22:33:44
tags: [hexo]
photos:
- https://img.b521.net/1.jpg
经过测试，文件头上的layout: photo可以省略。
不想每次都手动添加怎么办？同样的，打开您的hexo\scaffolds\photo.md
layout: { { layout } }
title: { { title } }
date: { { date } }
tags:
photos:
-
---
然后每次可以执行带layout的new命令生成照片文章：
description
**markdown文件头中也可以添加description，以覆盖全局配置文件中的description内容，请参考下文_config.yml的介绍。**
title: hexo你的博客
date: 2016-12-08 22:35:54
categories: default
tags: [hexo]
description: 你对本页的描述
---
hexo默认会处理全部markdown和html文件，如果不想让hexo处理你的文件，可以在文件头中加入layout: false。
文章摘要
在需要显示摘要的地方添加如下代码即可：
以上是摘要
<!--more-->
以下是余下全文
more以上内容即是文章摘要，在主页显示，more以下内容点击『> Read More』链接打开全文才显示。
hexo中所有文件的编码格式均是UTF-8。
主题安装
萝卜白菜各有所爱，玩博客换主题是必不可少的，hexo的主题列表Hexo Themes。
安装主题的方法就是一句git命令：
git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist
**目录是否是modernist无所谓，只要与_config.yml文件一致即可。**
**目录是否是modernist无所谓，只要与_config.yml文件一致即可。**
theme: modernist
**打开hexo\themes\modernist目录，编辑主题配置文件_config.yml：**
menu: #配置页头显示哪些菜单
# Home: /
Archives: /archives
Reading: /reading
About: /about
# Guestbook: /about
excerpt_link: Read More #摘要链接文字
archive_yearly: false #按年存档
widgets: #配置页脚显示哪些小挂件
- category
# - tag
- tagcloud
- recent_posts
# - blogroll
blogrolls: #友情链接
- Freakboy's WebSite: https://www.b521.net
fancybox: true #是否开启fancybox效果
duoshuo_shortname: buru #多说账号
google_analytics:
rss:
更新主题
cd themes/modernist
git pull
评论框
直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说，做一下基本设置。如果使用modernist主题，在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可。
如果你是有的其他第三方评论系统，将通用代码粘贴到hexo\themes\modernist\layout_partial\comment.ejs里面，如下：
<% if (config.disqus_shortname && page.comments){ %>
<section id="comment">
#你的通用代码
<% } %>
自定义页面
执行new page命令
hexo new page "about"
**在hexo\source\下会生成about目录，里面有个index.md，直接编辑就可以了，然后在主题的_config.yml中将其配置显示出来。**
上述步骤，也可以手工生成，在hexo\source\下手工新建about和index.md也是完全等价的。
因为markdown对table的支持不好，我是在about中直接建立index.html，里面书写页面内容，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
至此,简单操作已经差不多了,看的@leopard大大的文章跟着做的,整理了下来,备忘!
