之前找工作,经常逛IT面试网站,一次循着一篇文章找到了Jark’s Blog,感觉界面很清爽,访问速度很快,就打算自己也开一个这样的博客。
前奏
本博客用Hexo+Gitcafe搭建,博客内容需要用Markdown编写。总体来说有点麻烦,但是具有高度的自由度。
Hexo的由来参见作业的博文:Hexo 颯爽登場!。其他介绍:从 Octopress 到 Hexo、Hexo 简明入门教程(一)。
如果不想从博客园转过来,但是喜欢Hexo风格主题的,也可以参考:将博客园界面打造成Hexo经典主题Light。Hexo还支持导入其他博客的博文:从博客园迁移到Hexo、抛弃Wordpress正式用Hexo-迁徙之路。
购买并设置域名(可选)
专属域名首先比较个性,从长远来看,当网站访问量比较大时,还可以拿来谋点财富。之所以先谈域名购买,是因为域名购买后有一个生效时间。如果不打算购买,可以跳过。
购买域名
大家都选国外的Godaddy网站(至于原因,自行谷歌去),点此可以找到优惠码或优惠链接,首选com和me域名,年费60元左右,图文购买教程见:2013年10月新版godaddy域名注册图文教程。
更改域名默认的DNS
在Godaddy上购买的域名默认使用的是国外的DNS来解析的,我们在国内,为了解析速度,需要找一个国内的DNS,大家都选DNSPod,免费版就够用了,具体步骤见图文教程:2013年10月新版godaddy更改DNS服务器。DNSPod的免费DNS为f1g1ns1.dnspod.net
和f1g1ns2.dnspod.net
,参见:DNSPod各个套餐的DNS地址。全球DNS服务器同步完成最多需要72个小时。如果运气好,也许不到一天,国内就都可以正常访问了。我的运气比较好,不到一小时就可以用了。
在DNSPod添加域名和记录
具体步骤见图文教程:学会使用DNSPod,仅需三步。
这里说下“添加记录”,Gitcafe的记录值为:117.79.146.98
(参见:如何创建Page和绑定域名),Github的记录值为:192.30.252.153
和192.30.252.154
(参见:Tips for configuring an A record with your DNS provider),如下图所示:
安装Hexo并初始化博客本地文件夹
安装分三个步骤:
- 安装 Git
- 安装 Node.js
- 安装 Hexo
参见官方教程:点击进入
初始化本地博客文件夹:
1 | $ hexo init < folder > |
参见官方教程:点击进入
设置Git以便可以访问Github和Gitcafe
Git会根据用户的名字和邮箱来记录提交。YOUR NAME作为名称凭证,一般用真实姓名;YOUR EMAIL ADDRESS需要与登陆Github(Gitcafe)的邮箱名相同。1
2$ git config --global user.name "YOUR NAME"
$ git config --global user.email "YOUR EMAIL ADDRESS"
参见:Set Up Git
生成SSH公钥
生成与计算机对应的SSH公钥,用于将Hexo生成的静态本地博客数据远程上传到Github或Gitcafe上。详见Github教程:Generating SSH keys
添加公钥到ssh-agent出错:1
2$ ssh-add ~/.ssh/id_rsa.pub
Could not open a connection to your authentication agent.
解决方法:1
eval `ssh-agent`;ssh-add ~/.ssh/id_rsa
参考:Could not open a connection to your authentication agent
注册Github或Gitcafe、建立pages、绑定域名
该类型的博客是借助Github和Gitcafe的pages功能来将Markdown显示为网页的,而pages功能的出发点用于建立托管项目主页。
Github设置:
详情参考:hexo你的博客、使用Github Pages建独立博客、Setting up a custom domain with GitHub Pages
Gitcafe设置:
详情参考:托管博客到gitcafe、部署Hexo静态blog到gitcafe,还有Gitcafe官方帮助:如何创建Page和绑定域名
还有其他一些教程:
使用hexo搭建博客、如何搭建一个独立博客——简明Github Pages与Hexo教程、GitCafe国内在线托管软件项目平台申请试用:附与Github简单比较
同时使用GitHub和GitCafe
配置使得国外访问Github、国内访问Gitcafe。
在DNSPod上的域名解析设置参考:同时使用 GitHub 和 GitCafe 托管 octopress
Hexo参数配置参考:官方文档,下面是我的部署配置(_config.yml):
1 | deploy: |
Github与Gitcafe比较
- Github项目多、大牛多,但是国内访问速度稍逊;Gitcafe国内访问速度很快,域名绑定方便。
- Github单个项目最大空间限制为1GB、单个文件不得大于100MB,而且好像不支持付费购买,等博客内容累计到大于1GB就不好办了,参考:What is my disk quota?、Plans and pricing;Gitcafe每个账户免费赠送 512 MB 托管空间,在超出免费使用空间后后,超出部分每 512 MB 每天需支付 4 GitCoin,参见:GitCafe 账户权限与收费规则。
附件存储
Github和Gitcafe空间有限,较大的附件和图片需要放到其他地方,首选七牛云,对于个人博客免费版足够了,而且身份认证后可以升级为标准版(具有更大的空间、更多的流量)。这是我的邀请链接:https://portal.qiniu.com/signup?code=3llqzksdajln6
Markdown编辑器
在线的
离线应用程序
我选用的是MarkdownPad,MarkdownPad 2 Pro 注册码。初始使用发现代码块显示有问题,设置见:终于搞定了 markdown编辑器的语法高亮
参考:Markdown编辑器之比较、实用的 Markdown 编辑器和工具、用 Markdown 写作用什么文本编辑器?
个人的一些配置(写给没搞过前端的人)
安装Jacman主题:
请参考:https://github.com/wuchong/jacman
以下说明基于Jacman主题(详情参考该主题的配置说明:点击)
添加“关于”(用于介绍自己和博客)
1 | $ hexo new page "about" |
在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了。
启用标签和分类
menu 默认没有启用 /tags 和 /categories 页面,如果需要启用请在博客目录下的source文件夹中分别建立tags 和 categories文件夹每个文件夹中分别包含一个index.md文件。内容为:1
2layout: tags (或categories)
title: tags (或categories)
因为主题中已经内置了这两个页面的模板,所以他们会被正确的解析出来。
在博文布局scaffolds\post.md(hexo new 默认使用该布局)里添加:1
2categories:
tags:
生成博文之后,就可以在博文里添加分类和标签了:1
2categories: 经验教程
tags: [博客搭建, Hexo, Github, Gitcafe]
添加微博挂件
到这里生成微博秀改名,然后替换jacman\layout_widget\weibo.ejs中的相应代码。
博客主页下面的作者图片、介绍、微博、Email
图片直接替换themes\jacman\source\img中的author.jpg。
介绍在主题配置文件themes\jacman_config.yml中修改:1
2
3
4
5
6
7#### Author information
author:
intro_line1: "Hello, I'm Juke Zhang." ## eg: "Hello ,I'm Larry Page in Google."
intro_line2: "This is my blog." ## eg: "This is my blog,believe it or not."
weibo: keke2014 ## e.g. wuchong1014 or 2176287895 for http://weibo.com/2176287895,注意,只需要填微博名,而不是完整的网址
---
email: zhangjuke@qq.com ## e.g. wuchong1014@gmail.com
主题上面淡蓝色留白高度调节
themes\jacman\source\css_partial\header.styl1
2
3header nav
---
margin-top 0.1em
添加多说评论
注册多说,将设置的后台管理网址的用户名添加到主题配置文件themes\jacman_config.yml中:1
2
3
4#### Comment
duoshuo:
enable: true ## duoshuo.com
short_name: jukezhang ##e.g. wuchong for duoshuo short name.
如果想自定义多说评论显示,请参考:为Hexo添加多说评论功能(正文评论和列表评论数)
右侧友情链接
在 themes\jacman\layout_widget\links.ejs 中添加。
添加RSS和Sitemap
Jacman主题已经配置好,只需要安装在hexo的配置文件中加入1
2
3plugins:
- hexo-generator-feed
- hexo-generator-sitemap
并利用node.js在本地安装这两个插件:1
2npm install hexo-generator-feed
npm install hexo-generator-sitemap
Markdown图片居中
在图片文本之前添加一行代码:1
2<div style="text-align:center" markdown="1">
![image description](image url)
Markdown在文本之前输入空格(段落缩进)
将输入法切换到全角模式(shift+space)输入即可,或者使用代码:
半方大的空白
&ensp
;或 
;
全方大的空白&emsp
;或 
;
不断行的空白格 
;或 
;
参考:在 Markdown 语言中,如何实现段首空格的显示 ?
hexo使用
- 初始化新的Hexo项目:
hexo init
- 创建一篇新文章:
hexo new article_name
- 构建静态文件:
hexo generate
,简写为hexo g
- 开启本地server进行预览:
hexo server
, 简写为hexo s
。 执行后可以访问localhost:4000
进行效果预览。- 部署到远程服务器:
hexo depoly
,简写为hexo d
- 也可把
hexo g
和hexo d
合起来:hexo d -g
Markdown参考
Markdown 语法速查表
Markdown Basics
Mastering Markdown
Markdown 语法说明 (简体中文版)
流程图
序列图
图标