Hexo:独立博客新玩法
Hexo,这个逼格极高的程序猿写作方式,我喜欢。就连 Hexo 的发音都像是黑客哦!如果你跟我一样纠结哪里写博,那就来到GitHub吧,让我们一起hexo!H人希绝对不会让你失望,相信很快hexo就会流行起来。 Hexo出自台湾大学生 tommy351 之手,是一个基于 Node.js 的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。先看看tommy是如何吐槽Octopress的——《Hexo颯爽登場》。 搭建过程你或许觉得有那么点小繁琐,但一旦搭建完成,写文章是极简单,极舒服的。 只需要几个简单命令,你就可以完成一切。 hexo n #写文章 hexo g #生成 hexo d #部署# 可与hexo g合并为 hexo d -g 下面逐步介绍,进入正题。 环境准备 安装Node 到Node.js官网下载相应平台的最新版本,一路安装即可。我用的是node-v0.10.22-x86.msi 安装Git Git的客户端很多,详细的可以看一些这篇文章的安装教程:《使用 Github Pages 建独立博客》 安装Sublime(可选) Sublime Text 2在这里仅仅作为一个文本编辑器使用,支持各种编程语言和文件格式,当然也支持Markdown语法,实在是个不可多得的练码奇才。喜欢追鲜的也可以尝试处于beta版本的Sublime Text 3。 Github 首先注册一个『GitHub』帐号,已有的默认默认请忽略 建立与你用户名对应的仓库,仓库名必须为『your_user_name.github.com』 添加SSH公钥到『Account settings -> SSH Keys -> Add SSH Key』 前两步忽略,只说第三步,添加SSH-Key。 首先设置你的用户名密码: [cce] git config --global user.email "你的邮箱" git config --global user.name "你的用户名" [/cce] 生成密钥: [cce]ssh-keygen -t rsa -C "你的邮箱"[/cce] 输入文件路径: [cce] H:\hexo\blog>ssh-keygen -t rsa -C "xiaowu@aips.me(你的邮箱)" Generating public/private rsa key pair. Enter file in which to save the key (//.ssh/id_rsa): H:\git\myssh\ssh Enter passphrase (empty for no passphrase): Enter same passphrase again: Your identification has been saved in H:\git\myssh\ssh. Your public key has been saved in H:\git\myssh\ssh.pub. The key fingerprint is: b0:0c:2e:67:33:ab:c1:50:10:40:0a:ba:c1:80:59:22 xiaowu@aips.me [/cce] 上面有个bug,文件路径中的盘符H必须大写,否则会报错。 上述命令若执行成功,会在H:\git\myssh目录下生成两个文件id_rsa和id_rsa.pub,最后两步: 用文本编辑器打开ssh.pub文件,拷贝其中的内容,将其添加到Add SSH Key 将id_rsa和id_rsa.pub拷贝至你Git安装目录下的.ssh目录,如H:\PortableGit-1.8.4\.ssh 可以验证一下: [cce]ssh -T git@github.com[/cce] 若有问题,请重新设置。常见错误请参考: GitHub Help - Generating SSH Keys GitHub Help - Error Permission denied (publickey) 安装 Node和Git都安装好后,可执行如下命令安装hexo: [cce]npm install -g hexo[/cce] 初始化 然后,执行init命令初始化hexo到你指定的目录: [cce]hexo init [/cce] 也可以cd到目标目录,执行hexo init。 好啦,至此,全部安装工作已经完成! 生成静态页面 cd 到你的init目录,执行如下命令,生成静态页面至hexo\public\目录。 [cce]hexo generate[/cce] 【注】命令必须在init目录下执行,否则不成功,但是也不报错。 当你修改文章Tag或内容,不能正确重新生成内容,可以删除hexo\db.json后重试,还不行就到public目录删除对应的文件,重新生成。 本地启动 执行如下命令,启动本地服务,进行文章预览调试。 [cce]hexo server[/cce] 浏览器输入 http://localhost:4000 就可以看到效果。 请使用高级浏览器,否则可能…你懂的! 写文章 执行new命令,生成指定名称的文章至hexo\source\_posts\postName.md。 [cce]hexo new [layout] "postName" #新建文章[/cce] 其中layout是可选参数,默认值为post。有哪些layout呢,请到scaffolds目录下查看,这些文件名称就是layout名称。当然你可以添加自己的layout,方法就是添加一个文件即可,同时你也可以编辑现有的layout,比如post的layout默认是hexo\scaffolds\post.md [cce] title: {{ title }} date: {{ date }} tags: --- [/cce] 我想添加categories,以免每次手工输入,只需要修改这个文件添加一行,如下: [cce] title: {{ title }} date: {{ date }} categories: tags: --- [/cce] postName是md文件的名字,同时也出现在你文章的URL中,postName如果包含空格,必须用"将其包围,postName可以为中文。 【注】所有文件:后面都必须有个空格,不然会报错。 看一下刚才生成的文件hexo\source\_posts\postName.md,内容如下: [cce_cs] title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL中 date: 2014-05-16 15:30:16 #文章生成时间,一般不改,当然也可以任意修改 categories: #文章分类目录,可以为空,注意:后面有个空格 tags: #文章标签,可空,多标签请用格式[tag1,tag2,tag3],注意:后面有个空格 --- 这里开始使用markdown格式输入你的正文。[/cce_cs] 接下来,你就可以用喜爱的编辑器尽情书写你的文章。关于markdown语法,可以参考《Markdown 语法说明》 fancybox 可能有人对这个 Reading 页面中图片的 fancybox 效果感兴趣,这个是怎么做的呢。 很简单,只需要在你的文章*.md文件的头上添加photos项即可,然后一行行添加你要展示的照片: [cce_cs] layout: photo title: 我的阅历 date: 2085-01-16 07:33:44 tags: [hexo] photos: - http://aipsme.qiniudn.com/2013/11/27/reading/photos-0.jpg - http://aipsme.qiniudn.com/2013/11/27/reading/photos-1.jpg [/cce_cs] 【注】经过测试,文件头上的layout: photo可以省略。 不想每次都手动添加怎么办?同样的,打开您的hexo\scaffolds\photo.md [cce_cs] layout: { { layout } } title: { { title } } date: { { date } } tags: photos: - --- [/cce_cs] 然后每次可以执行带layout的new命令生成照片文章: [cce_cs]hexo new photo "photoPostName" #新建照片文章[/cce_cs] description markdown文件头中也可以添加description,以覆盖全局配置文件中的description内容,请参考下文_config.yml的介绍。 [cce_cs] title: hexo你的博客 date: 2013-11-22 17:11:54 categories: default tags: [hexo] description: 你对本页的描述 --- [/cce_cs] hexo默认会处理全部markdown和html文件,如果不想让hexo处理你的文件,可以在文件头中加入layout: false。 文章摘要 在需要显示摘要的地方添加如下代码即可: [cce_cs] 以上是摘要 <!--more-->以下是余下全文 [/cce_cs] more以上内容即是文章摘要,在主页显示,more以下内容点击『> Read More』链接打开全文才显示。 【注】hexo中所有文件的编码格式均是UTF-8。 主题安装 萝卜白菜各有所爱,玩博客换主题是必不可少的,hexo的主题列表 Hexo Themes。 我比较喜欢 pacman,modernist、ishgo,raytaylorism。Pacman最为优秀,简洁大方小清新,同时移动版本支持的也很好,但作者并没有把很多参数分离出来给出可配置项,我最终选择了modernist。 安装主题的方法就是一句git命令: [cce_cs]git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist[/cce_cs] 目录是否是modernist无所谓,只要与_config.yml文件一致即可。 安装完成后,打开hexo\_config.yml,修改主题为modernist [cce_cs]theme: modernist[/cce_cs] 打开hexo\themes\modernist目录,编辑主题配置文件_config.yml: [cce_cs] 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: #友情链接 - bruce sha's duapp wordpress: http://ibruce.duapp.com - bruce sha's javaeye: http://buru.iteye.com - bruce sha's oschina blog: http://my.oschina.net/buru - bruce sha's baidu space: http://hi.baidu.com/iburu fancybox: true #是否开启fancybox效果 duoshuo_shortname: buru #多说账号 google_analytics: rss: [/cce_cs] 更新主题 [cce_cs] cd themes/modernist git pull [/cce_cs] 评论框 静态博客要使用第三方评论系统,hexo默认集成的是Disqus,因为你懂的,所以国内的话还是建议用多说。 直接用你的微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。如果使用modernist主题,在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可。你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置,对于css设置,可以参考这里,我是在 HeroicYang 的基础上修改的。 如果你是有的其他第三方评论系统,将通用代码粘贴到 hexo\themes\modernist\layout\_partial\comment.ejs 里面,如下: [cce_cs] <% if (config.disqus_shortname && page.comments){ %> #你的通用代码 <% } %> [/cce_cs] 自定义页面 执行new page命令 [cce_cs] hexo new page "about" [/cce_cs] 在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。 上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。 因为markdown对table的支持不好,我是在about中直接建立index.html,里面书写页面内容,hexo会帮你加上头和尾。 404页面 GitHub Pages 自定义404页面非常容易,直接在根目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。 其实,404页面可以做更多有意义的事,来做个404公益项目吧。 目前有如下几个公益404接入地址,我选择了腾讯的。404页面,每个人可以做的更多。 腾讯公益404 404公益_益云(公益互联网)社会创新中心 失蹤兒童少年資料管理中心404 图床 考虑到博客的速度,同时也为了便于博客的迁移,图床是必须的。我强烈推荐七牛云存储,访问速度极快,支持日志、防盗链和水印。 免费用户有每月10GB流量+总空间10GB+PUT/DELETE 10万次请求+GET 100万次请求,这对个人博客来说足够,不够的话点这个活动页面,也可通过邀请好友获得奖励,我也求一下七牛邀请。有一点要说明的是,七牛没有目录的概念,但是文件名可以包含/,比如2013/11/27/reading/photos-0.jpg,参考这里关于key-value存储系统。 如果你对七牛web版的文件管理界面不满意,可以用官方的七牛云存储工具。 申请域名(可选) GitHubPages 默认为每个用户分配了一个二级域名『your_user_name.github.com』或『your_user_name.github.io』(具体可以看这里)。 如果你对上述域名不满意,可以自己去申请一个自己的域名(周良常年代理注册,价格比官网便宜许多),然后绑定到GitHub Pages。绑定方法很简单,在repo根目录下建立一个CNAME文件,里面写上域名即可。 命令 常用命令: [cce_cs] hexo new "postName" #新建文章 hexo new page "pageName" #新建页面 hexo generate #生成静态页面至public目录 hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server) hexo deploy #将.deploy目录部署到GitHub [/cce_cs] 常用复合命令: [cce_cs] hexo deploy -g hexo server -g [/cce_cs] 简写: [cce_cs] hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy [/cce_cs] 至此,基本操作介绍完毕,如果你对Hexo这种博客方式有兴趣,可以移步到我的代码博客查看相关的教程:https://zlbk.net/category/hexo 原文地址:https://zlbk.net/hexo-independent-blog-new-ways.html