Hexo的学习、搭建、整理

独立博客搭建教程,介绍域名注册、DNS设置、github和Hexo设置!

为什么要开博客?

可以看看我的这篇《为什么你要写博客?》

也可以看看这篇《我的博客时代》

前言

一直纠结于哪里写博客,曾用过新浪博客点点tumblr,QQ空间,LOFTER,weeblyscriptogr.amfarboxroon,自搭WordPress,都不满意。再后来也弄过Jekyll和Octopress,觉累不爱。

直到hexo,这个风格极高的程序猿写作方式,我喜欢。就连hexo的发音都像是黑客哦!如果你跟我一样纠结哪里写博,那就来到GitHub吧,让我们一起hexo!希绝对不会让你失望,相信很快hexo就会流行起来。

hexo出自台湾大学生tommy351之手,是一个基于Node.js的静态博客程序,其编译上百篇文字只需要几秒。hexo生成的静态网页可以直接放到GitHub Pages,BAE,SAE等平台上。

作为技术小白,没有技术基础,看网上的教程也云里雾里,看程序员的教程相当不容易,稍微有些细节描述得不清楚自己就要绕弯路去找答案(善用搜索引擎),所以,在自己的博客搭建完成之后,把过程全记录下来,供后期和我一样的小白参考(是的,我坚信还有很多一样和我一样的人),所以尽可能详细的整理,其中的资料大多摘录其他人的教程,在这里感谢这些作者们。

搭建过程你或许觉得有那么点小繁琐,但一旦搭建完成,写文章是极简单,极舒服的。

只需要几个简单命令,你就可以完成一切。

hexo n #写文章

hexo g #生成

hexo d #部署 # 可与hexo g合并为 hexo d -g

下面逐步介绍,进入正题。

安装前准备

依次下载安装:

1、Node.js

2、Git

注册GitHub

访问:http://www.github.com/

alt textalt text

可以看:一步步在GitHub上创建博客主页 全系列 by pchou(推荐)

配置和使用Github

教程主要参考beiyuu的《使用Github Pages建独立博客》写成。

小白白请看

2014年5月15日更新:发现一个更简单的方法:用静态页面生成静态博客 byisnowfy

配置SSH keys

我们如何让本地git项目与远程的github建立联系呢?用SSH keys。

检查SSH keys的设置

首先我们需要检查你电脑上现有的ssh key:

首先设置你的用户名密码:

git config --global user.email "邮箱地址@youremail.com"

git config --global user.name "用户名"


cd ~/. ssh 检查本机的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

生成新的SSH Key:

ssh-keygen -t rsa -C "邮件地址@youremail.com"

Generating public/private rsa key pair.

Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

最后可以验证一下:

ssh -T git@github.com

若有问题,请重新设置。常见错误请参考:

GitHub Help - Generating SSH Keys

GitHub Help - Error Permission denied (publickey)

安装Hexo

Node和Git都安装好后,可执行如下命令安装hexo:

npm install -g hexo

部署Hexo

然后,执行init命令初始化hexo到你指定的目录:(也可以cd到目标目录,执行hexo init。)

hexo init <folder>

生成静态页面

cd 到你的init目录,执行如下命令:

hexo generate

本地启动

执行如下命令,启动本地服务,进行文章预览调试。

hexo server

浏览器输入http://localhost:4000就可以看到效果。

主题安装

各有所爱,博客换主题是必不可少的,hexo的主题列表Hexo Themes
我比较喜欢RagingCat简洁大方。

安装主题的方法就是一句git命令:

git clone https://github.com/RagingCat/hexo-theme-ragingcat.git themes/RagingCat

安装完成后,打开hexo_config.yml,修改主题为RagingCat

Menu #配置页头显示哪些菜单

  Home: /

  Archives: /archives

  # Reading: /reading

  Albums: /albums

  Music: /music

  About: /about

widgets:  #配置页脚显示哪些小挂件

- category

- tag

- links

- rss

rss: ## RSS address.

favicon: img/favicon.ico   ## size:32px*32px,`.ico` is recommended

ShowCustomFont: true

toc:

  article: true   ## show contents in article.

  aside: false     ## show contents in aside.

fancybox: true  #是否开启fancybox效果

author:  #配置页底显示

  intro_line2: "A lamp, a Walkman, a book..."

  intro_line1: "This is 洛桑扎巴's personal blog."

  weibo: doctor666777     ## e.g. 436062867 for http://weibo.com/436062867

  twitter: ztd811    ## e.g. yangjiansky for https://twitter.com/yangjiansky

  github: mba811    ## e.g. A-limon for https://github.com/A-limon

  email: ztd811@gmail.com    ##email

duoshuo:  #多说账号

  enable: true  ## duoshuo.com

  short_name: lszb811   ## duoshuo short name.

jiathis:

  enable: false ## if you use jiathis as your share tool,the built-in share tool won't be display.

  id:    ## e.g.  your jiathis ID.

google_analytics:

  enable: true

  id:    ## e.g. UA-xxxxxx-2 your google analytics ID.

更新主题

cd themes/RagingCat

git pull

自定义页面

执行new page命令

hexo new page "about"

在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。
上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。

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存储系统

七牛除了作为图床还可以作为其他静态文件存储空间,如果非要说不足的话,就是文件管理界面不是很友好,不支持CNAME到分配的永久链接,也不能绑定未备案的自有域名,必须备案才可以。

购买域名

只推荐上godaddy购买,安全,而且可以使用支付宝。

教程可以参照这:《2013年10月新版godaddy域名注册图文教程》

DNSPod

GoDaddy的NameServers有时会被墙,因此墙裂推荐国内的DNSPod解析域名,免费服务真心不错。支持微信/邮件提醒,监控与报警,访问统计,健康诊断,搜索引擎推送,速度哇哇的,对于我来说足够。
两步设置就可以搞定,怎么操作参考Godaddy注册商域名修改DNS地址

命令

常用命令:

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

至此,基本操作介绍完毕。

进阶篇:Hexo设置

目录介绍

默认目录结构:

├── .deploy

├── public

├── scaffolds

├── scripts

├── source

|   ├── _drafts

|   └── _posts

├── themes

├── _config.yml

└── package.json

deploy:执行hexo deploy命令部署到GitHub上的内容目录

public:执行hexo generate命令,输出的静态网页内容目录

scaffolds:layout模板文件目录,其中的md文件可以添加编辑

scripts:扩展脚本目录,这里可以自定义一些javascript脚本

source:文章源码目录,该目录下的markdown和html文件均会被hexo处理。该页面对应repo的根目录,404文件、favicon.ico文件,CNAME文件等都应该放这里,该目录下可新建页面目录。

_drafts:草稿文章

_posts:发布文章

themes:主题文件目录

_config.yml:全局配置文件,大多数的设置都在这里

package.json:应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

重头戏_config.yml,做个简单说明:

# Hexo Configuration

## Docs: http://hexo.io/docs/configuration.html

## Source: https://github.com/tommy351/hexo/

# Site  #整站的基本信息

title: 见性 随心 自在  #网站标题

subtitle: 一盏灯、一个随身听、一本书  #网站副标题

description: 洛桑扎巴's blog | music | apple | buddhism | Thang-ga | life  #网站描述,给搜索引擎用的,在生成html中的head->meta中可看到

author: 洛桑扎巴  #网站作者,在下方显示

email: ztd811@gmail.com  #联系邮箱

language: zh-CN #语言

# URL  #域名和文件结构

## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: http://lszb811.com  #你的域名

root: /

permalink: :year/:month/:day/:title/

tag_dir: tags

archive_dir: archives

category_dir: categories

code_dir: downloads/code

# Directory

source_dir: source

public_dir: public

# Writing  #写文章选项

new_post_name: :title.md # File name of new posts

default_layout: post  #默认layout方式

auto_spacing: false # Add spaces between asian characters and western characters

titlecase: false # Transform title into titlecase

external_link: true # Open external links in new tab

max_open_file: 100

multi_thread: true

filename_case: 0

render_drafts: false

post_asset_folder: false

relative_link: false

highlight:  #代码高亮

  enable: true   #是否启用

  line_number: true  #是否显示行号

  tab_replace:

# Category & Tag   #分类与标签

default_category: uncategorized

category_map:

tag_map:

# Archives  #存档,这里的说明好像不对。全部选择1,这个选项与主题中的选项有时候会有冲突

## 2: Enable pagination

## 1: Disable pagination

## 0: Fully Disable

archive: 1

category: 1

tag: 1

# Server  #本地服务参数

## Hexo uses Connect as a server

## You can customize the logger format as defined in

## http://www.senchalabs.org/connect/logger.html

port: 4000

server_ip: 0.0.0.0

logger: false

logger_format:

# Date / Time format  #日期显示格式

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

## http://momentjs.com/docs/#/displaying/format/

date_format: MMM D YYYY

time_format: H:mm:ss

# Pagination  #分页设置

## Set per_page to 0 to disable pagination

per_page: 10

pagination_dir: page

# Disqus  #社会化评论disqus,我使用多说,在主题中配置

disqus_shortname:

# Extensions  #插件,暂时未安装插件

## Plugins: https://github.com/tommy351/hexo/wiki/Plugins

## Themes: https://github.com/tommy351/hexo/wiki/Themes

theme: RagingCat  #主题

exclude_generator:

# Deployment  #部署

## Docs: http://hexo.io/docs/deployment.html

deploy:

  type: github

  repository: git@gitcafe.com:mba811/mba811.git  #你的GitHub Pages仓库,这里我用的是gitcafe

  branch: gitcafe-pages

修改局部页面

页面展现的全部逻辑都在每个主题中控制,源代码在hexo\themes\jacman\中:

.

├── languages          #多语言

|   ├── default.yml    #默认语言

|   └── zh-CN.yml      #中文语言

├── layout             #布局,根目录下的*.ejs文件是对主页,分页,存档等的控制

|   ├── _partial       #局部的布局,此目录下的*.ejs是对头尾等局部的控制

|   └── _widget        #小挂件的布局,页面下方小挂件的控制

├── source             #源码

|   ├── css            #css源码

|   |   ├── _base      #*.styl基础css

|   |   ├── _partial   #*.styl局部css

|   |   ├── fonts      #字体

|   |   ├── images     #图片

|   |   └── style.styl #*.styl引入需要的css源码

|   ├── fancybox       #fancybox效果源码

|   └── js             #javascript源代码

├── _config.yml        #主题配置文件

└── README.md          #用GitHub的都知道

用Hexo发表文章的Markdown语法

title: postName #文章页面上的显示名称,可以任意修改,不会出现在URL

date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改

categories: example #分类

tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格

---

以下正文

插件

安装插件:

npm install <plugin-name> --save

启用插件:在*hexo_config.yml文件添加:

plugins:

- <plugin-name>  #插件名

升级插件:

npm update

卸载插件:

npm uninstall <plugin-name>

实例:

添加sitemap和feed插件

npm install hexo-generator-sitemap --save

npm install hexo-generator-feed --save

修改_config.yml,增加以下内容

# Extensions

Plugins:

- hexo-generator-feed

- hexo-generator-sitemap

#Feed Atom

feed:

  type: atom

  path: atom.xml

  limit: 20

#sitemap

sitemap:

  path: sitemap.xml

更新

更新hexo:

npm update -g hexo

更新主题:

cd themes/你的主题

git pull

更新插件:

npm update

换机器

你要保留好自己的博客源码。换机器写博客,就只能使用各种网盘的同步功能,或者你把你的站点源文件提交到某代码托管服务器。另外,貌似这篇很牛逼,Hexo 服务器端布署及 Dropbox 同步

统计功能

为hexo博客添加访问次数统计功能

网站加速

Webluker-CDN 网站加速 免费CDN DNS解析

Webluker-FAQ索引

站长工具

谷歌站长工具

百度站长工具

SEO

谷歌搜索引擎优化初学者指南.PDF

数据统计

Google Analytics

百度统计

徽章生成

Logo Creatr

Web 2.0 Logo Creator (可能需翻墙)

不足

  1. 配置文件缺少空格会报错
  2. 报错不能得到精确定位,只能靠经验
  3. 换台机器写文章不好处理
  4. 如何统计总来访数和单页文章阅读次数,请参考为hexo博客添加访问次数统计功能

参考文献

Hexo

一步步在GitHub上创建博客主页 全系列 by pchou

使用Hexo在Github上搭建个人博客

hexo你的博客 by ibruce

折腾了个新主题

使用hexo搭建博客

从Octopress到Hexo

搞定Hexo

Hello World by Hexo
hexo的代码高亮

用Hexo快速打造静态博客

使用Sublime Text 2 编辑Markdown

搭建一个免费的,无限流量的Blog — github Pages和Jekyll入门

Pacman主题介绍 by yangjian

使用hexo搭建博客 by yangjian

hexo搭建静态博客以及优化 by Joanna Wu

使用Hexo搭建个人博客 by c4fun

Github Pages与Hexo建个人博客流程 by Kesco

hexo文件结构及网站优化 by kevin chen

GotGitHub

Git push时重复输入用户名密码的问题

hexo系列教程:hexo博客的优化技巧 by zippera

如何搭建一个独立博客——简明Github Pages与Hexo教程