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

评论框

静态博客要使用第三方评论系统,hexo默认集成的是Disqus,因为你懂的,所以国内的话还是建议用多说

直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。如果使用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大大的文章跟着做的,整理了下来,备忘!

最后由 不一样的少年 编辑于2016年12月08日 22:36