如何使用Hexo搭建静态博客

介绍如何使用Hexo和Github搭建静态博客
使用的主题为Bootstrap
搭建的环境是ubuntu 14.04 LTS

<1>什么是Hexo

Hexo 是一款基于node 的静态博客网站生成器，作者：tommy351是一个台湾的在校大学生。 相比其他的静态网页生成器而言有着，生成静态网页最快，插件丰富（已经移植了大量Octopress插件）。 同其他很多轻量级博客如jekyll、octopress、jekyllbootstrap等一样，也是使用Markdown语法进行编辑博文，即编辑.md后缀的文件。

hexo的github主页地址: Hexo_Github
Markdown的中文语法: Hexo_Docs

<2>注册Github并创建个人站点

Git是一个分布式的版本控制系统，功能强大而且免费 要想在Github上搭建一个基于Hexo的博客，首先要注册一个Github帐号，并在上面创建个人站点 这里我参考的是博客园一篇博文的前几个步骤，即创建Github Pages

Github主页: Github
参考的博客园博文地址: 创建Github Pages参考

<3>安装Node.js和Git

要想使用Hexo，必须安装Node.js和Git

安装Git

由于用的是ubuntu，安装git直接在终端下运行命令apt-get就行了
 
$ sudo apt-get install git-core

安装Node.js

参考网上一篇CSDN文章安装的Node.js，使用的是源码进行编译安装 安装的版本是v0.10.29
 
cd /usr/local/src
wget http://nodejs.org/dist/v0.10.29/node-v0.10.29.tar.gz
tar zxvf node-v0.10.29.tar.gz
cd node-v0.10.29
./configure
make
make install

node -v
v0.10.29

参考CSDN文章地址: ubuntu下安装Node.js参考

安装NPM

NPM的全称是Node Package Manager，是Nodejs的包管理器，要安装Hexo的话，就是通过NPM来进行的 安装NPM的命令 这里详解一下这句命令的意思，curl http://npmjs.org/install.sh 是通过curl命令获取这个安装shell脚本，按后通过管道符| 将获取的脚本交由sh命令来执行。这里如果没有权限会安装不成功，需要加上sudo来确保权限
 
curl http://npmjs.org/install.sh | sudo sh
上面的网址不行的话换成www.npmjs.com,安装成功后执行npm命令，会得到一下的提示:
 
Usage: npm <command>
where <command> is one of:
adduser, apihelp, author, bin, bugs, c, cache, completion,
config, deprecate, docs, edit, explore, faq, find, get,
help, help-search, home, i, info, init, install, la, link,
list, ll, ln, ls, outdated, owner, pack, prefix, prune,
publish, r, rb, rebuild, remove, restart, rm, root,
run-script, s, se, search, set, show, star, start, stop,
submodule, tag, test, un, uninstall, unlink, unpublish,
unstar, up, update, version, view, whoami
另外，由于某些原因，国内npm速度比较慢，甚至打不开，建议使用淘宝源：http://npm.taobao.org/ (本条有可能导致出错)
 
npm install -g cnpm --registry=https://registry.npm.taobao.org

其他文章地址: ubuntu下安装NPM参考
可能出现错误的解决方法: npm ERR!

<4>安装Hexo

Node, npm和Git都安装成功, 开始安装Hexo,要求安装G++和Python
 
npm install hexo -g  #-g表示全局安装, npm默认为当前项目安装
Hexo使用命令:
 
hexo init <folder>  #执行init命令初始化hexo到你指定的目录
hexo g       #自动根据当前目录下文件,生成静态网页
hexo s         #运行本地服务
浏览器输入http://localhost:4000 就可以看到效果

设置Hexo全局配置

打开站点配置文件_config.yml，只需要修改部分配置，大部分保持默认即可 也可以下载Bootstrap主题，然后把Hexo的_config.yml的theme里面改成Bootstrap
 
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Common的个人主页
subtitle:
description:
author: Common
language: zh-CN
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://lintong-common.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# 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: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: bootstrap-blog

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git #部署工具的类型
  repository: git@github.com:Lintong-common/lintong-common.github.com.git  #SSH链接
  branch: master #分支

参考的博客地址: Hexo(一)：在GitHub上搭建静态博客

<5>下载Bootstrap主题

在下面给的网址中下载主题，放在hexo/themes/目录下，然后修改Hexo目录下的._config.yml文件中的theme参数

Hexo主题库: Hexo主题库

以下是我修改后的themes/bootstrap-blog目录下的._config.yml文件
 
# Header
navbar_brand: false
menu:
  主页: index.html
  所有文章: archives/
  其他页面: page/Hello.html
rss: /atom.xml

# Content
excerpt_link: 全文 >>
fancybox: true

# Sidebar
widgets:
- about         # See also: `about_content`
- category
- tag
- tagcloud
- archive
- recent_posts

about_widget_content:
  <div style="text-align:center;"><img src="/images/he.jpg" width="150" height="150" style="vertical-align:middle;"/></div>    #About 关于我

# widget behavior
archive_type: 'monthly'
show_count: true

# Miscellaneous
google_analytics:
favicon: http://o6g92sjqd.bkt.clouddn.com/3232.ico
twitter_id:
google_plus:
fb_admins:
fb_app_id:

<6>部署到Github上

在下面给的网址中下载主题，放在hexo/themes/目录下，然后修改Hexo目录下的._config.yml文件中的theme参数

参考该博客的博文的如何部署到Github: 如何部署到Github

添加可跳转的目录，参考： Hexo 博客踩坑

写在之后：搭建的过程中遇到了各种问题，也是google各种解决方法，参考了很多博文，总结的难免有披露，同时也感谢网上大神们的分享

posted @ 2015-07-04 20:33  tonglin0325  阅读(204)  评论(0)  编辑  收藏  举报