Hexo + GitPages开启markdown之旅

    TOOLS     git·hexo

转来转去最后发现,自己维护空间神马的真心费力,我只是想专心的写个文字,记录一下,吐个槽而已,由此开启我的Hexo + GitPages + Git 之旅。

吐槽

大学时期就在写博,内个时候的互联网跟现在没法比(2005年),从最早的网易免费虚拟空间开始,到后来的QQ空间,百度hi/新浪博客,再到后来自己搭建技术博客,最早使用各种荒野虚拟空间,价格贵,而且不稳定,再后面用了几年的MediaTemplate(这在当时可是很多特别爱写博客的人才舍得购买的),最后直到近两年开始使用阿里云。

使用的CMS更不必说,从最早的自己asp原创,到后来使用WordPress,然后自己也编写或修改了至少3个wp主题(然而没有一个令自己满意的),改来改去,最后发现耗费了很大的精力在这些造轮子的事情上面,反而没能坚持把博客写下去,并且WordPress在很多低配主机上面特别耗内存,又转战php版的z-blog等等,最后发现这些真心都有点笨重,而且总是在不停的折腾。

转来转去最后发现,自己维护空间神马的真心费力,我只是想专心的写个文字,记录一下,吐个槽而已,由此开启我的Hexo + GitPages + Git 之旅。

OK,吐槽结束,作为一个“资深”博主(手动嘲讽一下我自己),写了很多水文,有些内容甚至自己都没有吃透,其实写的时候就是为了记录,希望从这里开始,可以post一些高质量的好文吧。

先说一下为什么选择这套组合

基于nodejs

无论是Windows下还是Mac下,部署起来都很简单(看个别的Jekyll基于Ruby,不是太方便),当然这不是重点,因为作为一个前端,用Sass的话还是必然要装Ruby的

插件支持和主题

当然,作为前端狗,这不是重点,毕竟咱可以自己想怎么玩就怎么玩。 但是,我懒,还是用现成的吧。

跟其他选择比较

跟WordPress对比,我靠~ 无论是主题还是插件被WP秒了N条街,然并卵,我只是想简单的写写博客,敲敲代码而已,用它足够了。

跟自己搭建服务器对比,我靠~ 自己搭建的服务器,起码服务端的数据是私有的,而github上发表的东西人家分分钟可以给你clone走。再次然并卵,隐私数据我只需要用evernote之类的即可,干嘛发到博客上,发上来就是给人看的呀,还巴不得大家都来抄呢。

速度对比,github自带cdn,完全免费,几乎不存在宕机或者被DDOS的可能。

暂时就想到这些,后面可以再补充,废话好多呀,下面进入正题吧

搭建步骤

并不详细,只是做个记录,把一些容易忘记的写一下,需要详细教程的可以自行搜索

安装nodejs

如何安装? 好吧,我只丢个nodejs下载地址,剩下的自己弄
nodeJs下载地址

安装git

还是只丢一个地址,剩下的自己弄
Git下载地址

注册并登陆GitHub

GitHub

为hexo新建项目地址

在github网站新建项目,命名为 yourname.github.io

注意,此处的yourname必须是你github上的username。 然后点击该项目中的settings(是网页上该项目的settings哦,不是用户头像的settings),然后在GitHub Pages 处的 Source后面选择master分支,并保存。

好了,这一步将该项目的git地址复制备用。

生成git公钥

在你的电脑中,新建想要保存网站项目的文件夹,右键——GitBash Here
在打开的命令窗口中,输入如下命令

1
2
git config --global user.name "yourname" #配置你的github用户名
git config --global user.email "[email protected]" #配置你的github邮箱

说明:这里地用户名和邮箱跟你的github上的用户名并没有任何关系,此处仅仅是为了区分当前电脑使用者的身份(笔者的理解)。
好的,到此,你已经向git标识了你的身份,然后根据身份生成一个公钥用来与服务端配对

1
ssh-keygen -t rsa -C "[email protected]"

默认,会在你的系统用户目录(windows用户通常为C:\Users\Administrator,linux用户通常为/usr/或/etc/)下生成一个.ssh的文件,打开后找到.pub扩展名的文件,用文本编辑器打开,即可看到一堆代码,全选复制。

将标识你身份的公钥粘贴到github上实现身份识别配对

然后登陆github网站,点击右上角用户头像——设置(head icon -> Settings),SSH and GPG keys 点击,News SSH key,将上一步中复制的内容粘贴进去即可完成配对。

安装Hexo

1
2
3
#hexo-cli代表 hexo commond line interface
#-g代表全局安装,这样可以直接在windows命令行运行
npm install hexo-cli -g

然后,安装hexo并保存到配置

1
npm install hexo --save

初始化hexo

1
hexo init

然后执行安装操作(init初始化各种依赖包,类似于加载了package.json)

1
npm install

配置hexo

经过上面的步骤,我们已经把hexo默认内容全部拉取到这个文件夹了,下面只需要进行简单的配置就可以开启你的hexo之旅了
配置文件保存在项目根目录下的 _config.yml 文件中。 打开之后根据英文自己对照修改吧。 注意格式。下面说一下如何同步到github

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: [email protected]:yourname/yourname.github.io.git
branch: master

将配置文件中的 repo 地址改为上面从gihub新建项目获得的地址

更多 _config.yml 配置

主题语言配置

语言的配置,说明:这里跟随的zh-CN对应themes/xxx 目录下的languages文件夹下的目录名称,然后在模板中采用sprintf的方式进行调用,详见hexo官方手册的说明

1
language: zh-CN

分类/标签别名设置

按照以下格式设置后即可实现对应的分类或者标签URL以别名的形式显示,注意修改该配置后需要生成并重启server才能生效

1
2
3
4
5
category_map:
我的涂鸦: scrawl
读书笔记: readnote
tag_map:
兼容性: compatibility

设置feed url以及sitemap

要想使用feed订阅功能,需要先安装hexo-generator-feed 以及 hexo-generator-sitemap 两个插件,然后执行hexo generate 即可生成对应的feed文件和sitemap文件

1
2
3
npm install hexo-generator-feed --save
npm install hexo-generator-sitemap --save
hexo generate

安装完成后也是需要生成一下

设置主页/分类页/标签页每页显示的文章数

注意:该功能修改后,需要clean一下,并重新生成重启server,否则无效(此处被坑的很惨)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#设置feed订阅,依赖hexo-generator-feed
feed:
type: atom #feed类型 atom或者rss2
path: atom.xml #feed路径
limit: 20 #feed文章数量
#存档页面显示设置
archive_generator:
per_page: 0 #存档页面每页显示条数,0代表显示全部,无翻页
yearly: true #是否生成按年保存的存档页面
monthly: false #是否生成按月保存的存档页面
daily: false #是否生成按日保存的存档页面
category_generator:
per_page: 0 #分类页面每页显示条数,0代表显示全部,无翻页

添加搜索功能

搜索功能依赖插件hexo-generator-search,安装插件后即可自动在根目录生成search.xml文件,然后配合search.js(某些主题中包含,例如pln主题,大家也可以自行搜索)即可实现搜索功能

1
2
npm install hexo-generator-search
hexo g

运行并部署hexo

最后一步,马上看到曙光啦,哈哈
hexo 3.0版本以后,还需要安装一个插件

1
npm install hexo-deployer-git --save

安装后就可以在本地的gitbash中执行

1
2
3
hexo clean
hexo generate
hexo deploy

然后,如果配置文件你没改错都话,等命令运行完毕,即可通过 yourname.github.io 查看到你的博客啦。

本地浏览器预览,可以通过执行命令

1
hexo server

配置独立域名

当然,Hexo + GitPages 是支持独立域名的。 只需要在项目的sources目录下新建CNAME文件(大写,无扩展名),并输入你要绑定的域名即可。然后进入域名控制面板设置cname解析到 yourname.github.io 即可生效。

购买SSL证书,还可以支持https的哦~

一些高级用法

生成和部署命令支持缩写

1
2
3
hexo g #等价于hexo generate
hexo d #而等价于hexo deploy
hexo d -g #等价于以上两行命令之和

在多台设备之间共同维护hexo

使用git创建一个新的branch,然后提交到github

1
2
3
4
5
6
7
8
9
10
11
12
#在本地的hexo工作目录(假设已经搭建好了)初始化创建git
git init
#创建并切换到分支,等价于git branch hexo & git checkout hexo
git checkout -b hexo
#将所有文件添加到git缓存区
git add .
#注意,默认的缓存大小比较小,需要更改缓存大小,因此需要执行下面的语句
git config http.postBuffer 524288000
#然后再执行提交操作,将文件提交到待提交区
git commit -m "commit introduction"
#最后push到github远程
git push --set-upstream origin hexo

这样在其他设备上面就可以执行

1
2
3
git clone [email protected]:aleafo/aleafo.github.io.git
git checkout -b hexo
git add remote origin hexo

对hexo编写的环境等进行同步了。

写作

写作支持md文件的变量,可以直接在source/_posts下新建md文件,或者运行

1
hexo n [filename]

来新建一个md文件。
新建完成后,在md文件中可以使用如下方式给文档设置标题

1
2
3
4
5
6
7
8
9
10
---
title: This is your article title, you can use this variable
tags:
- tag1
- tag2
categories:
- catname
date: 2016-08-30 16:27:42
---
And this is some decription about the article <!--more-->

通过上面的形式即可设置标题和摘要,系统将自动提取’—‘上方的部分作为变量,详见官方文档 Front-matter

  • title => 文档标题
  • tags => 文档标签,换行后以短横线+空格+标签名,每行一个
  • categories => 分类名称,目前hexo只支持一个分类,如果填写多个,后面的分类将被当做子分类
  • date => 文档发表日期
  • <!–more–> => 系统变量三横线正文开始到more之前的部分将作为摘要

使用sublime的markdown插件编写md文档

  • 在sublime的包安装管理器中,搜索MarkdownEditing回车即可安装markdown编辑器,系统将自动识别markdown的文档
  • 安装ominiMarkdownPreviewer插件,可以在编写md文档的同时在浏览器中实时查看效果

更多写作技巧待补充。您也可以查看markdown的官方文档,获取更多详细的关于markdown的创始人文档 markdwon语法说明简体中文版,英文好的直接看这里 Markdown

当然你也可以直接使用一些markdown的神器来编写文档,例如windows下的markdownPad, Mac下的Mou等

开启github pages的 SSL加密访问模式 https访问

默认github pages就是支持https的,这里选择最简便的方式,就是使用CloudFlare(以下简称CF)的DNS免费版的HTTPS加密模式。

  • CloudFlare 注册一个账号,然后添加域名,一路Continue(下一步),最后会给你分配两个DNS
  • 到你的域名控制面板,把DNS修改为CF分配给你的DNS
  • 在CF的域名管理界面,设置好CNAME到你的github pages的域名。
  • 在CF顶部的导航点击Page Rules,Create Page Rule,然后URL处输入 http://*.yourblogdomain.com/*,下面的设置选择 Always Use HTTPS,点击Save And Deploy.
  • 将hexo的配置文件_config.yml修改如下:

    1
    2
    url: https://yourblogdomain.com #blog的URL,修改为https前缀
    enforce_ssl: yourblogdomain.com #blog的URL,强制SSL模式访问
  • 然后在生成并部署即可

    1
    hexo d -g

导入wordpress 和 cnblog

因为之前的很多文章大部分都是发表在了wordpress,以及后来记录到了cnblogs,而且数量还不少,所以有必要使用导入的功能。
wordpress使用系统自带的导出功能,导出为xml备份即可,然后使用插件

1
2
3
npm install hexo-migrator-wordpress --save
#web.wordpress.xxx.xml即为导出的文件,放到当前命令行所在目录
hexo migrate wordpress web.wordpress.xxx.xml

这样就可以成功将wordpress导入到hexo了。同样的cnblogs也提供了一款插件,不过从hexo3.0就不再支持了(作者自己说的),其实有一个迂回的方法,就是先下载一个wp的插件,名字叫做博客搬家到wordpress,可以将博客园、OSChina、CSDN、点点、LOFTER搬家到wordpress,然后再同上面的步骤导入即可。

页阅读量:  ・  站访问量:  ・  站访客数: