使用Hexo建立个人博客

个人博客是程序员的名片之一,今天,我们来看怎么使用Hexo快速建立个人博客.

一.完工效果

http://www.lingyv.cn/ 这是本人建立好的个人网站.
有以下特点:
- 使用个人申请的特色域名
- 代码托管在github和coding上

二.需要使用的工具

1. Hexo (Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。) github链接 hexo帮助文档
2. 主题icarus(更多主题)
3. github
4. coding(国内coding访问速度更快)

三.开始

1. github pages, coding pages

- github创建个人站点

- 设置站点主题

进入资源-setting
选择主题并发布,我的已经设置过一次了.所以会跟你的有所不同

- coding pages

coding创建项目

设置pages

2. 安装Hexo博客框架

• 安装git

$ sudo apt-get install git

• 安装Node.js

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
$ nvm install 4

- 安装Hexo

$ npm install -g hexo-cli

- 新建blogs文件夹,克隆项目

git clone git@github.com:lingyv/lingyv.github.io.git

• 执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件

$ hexo init lingyv.github.io
$ cd lingyv.github.io
$ npm install

新建出的各种文件信息查看帮助文档

4. 配置Hexo

查看配置文档
我的配置文件信息

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 网站
title: 漫步太虚
subtitle: lingyv
description: coding
author: lingyv
language: zh-CN
timezone: 

avatar: /images/touxiang.png

# URL 网址
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://www.lingyv.cn
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:

# Archives
archive: 1
category: 1
tag: 1

# 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: icarus

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
    github: git@github.com:lingyv/lingyv.github.io.git
    coding: git@git.coding.net:lingyv/lingyv.git
  branch: master

5. 配置主题

Hexo主题很多,查看主题
- 下载icarus主题到本地

$ git clone https://github.com/ppoffice/hexo-theme-icarus themes/icarus

主题参考文档
- 启用主题
打开 站点配置文件,找到 theme字段，并将其值更改为icarus.
- 配置主题配置文件

menu:
  首页: .
  归档: archives
#  Categories: categories
#  标签: tagcloud
  关于: /about
# Customize
customize:
    logo:
        enabled: true
        width: 40
        height: 40
        url: images/logo.png
    profile:
        enabled: true # Whether to show profile bar
        avatar: css/images/touxiang.png
        gravatar: # Gravatar email address, if you enable Gravatar, your avatar config will be overriden
        author: 凌宇
        author_title: Java & Python
        location: Shanghai, China
        follow: https://github.com/lingyv
    highlight: monokai
    sidebar: right # sidebar position, options: left, right
    thumbnail: true # enable posts thumbnail, options: true, false
    favicon: # path to favicon
    social_links:
        github: https://github.com/lingyv
        weibo: http://weibo.com/5051531692/profile?topnav=1&wvr=6&is_all=1
        linkedin: http://cn.linkedin.com/in/lingyv
#        twitter: /
#        facebook: /
#        dribbble: /
#        rss: /
# Widgets 小工具
widgets:
    - recent_posts
    - category
    - archive
    - tag
    - tagcloud
    - links
# Search
search:
    insight: true # you need to install `hexo-generator-json-content` before using Insight Search
    swiftype: # enter swiftype install key here
    baidu: true # you need to disable other search engines to use Baidu search, options: true, false
# Comment
comment:
#    disqus: hexo-theme-icarus # enter disqus shortname here
    #使用多说评论
    duoshuo: lingyv
#    youyan: # enter youyan uid here
# Share
share: default # options: jiathis, bdshare, addtoany, default
# Plugins
plugins:
    fancybox: true # options: true, false
    google_analytics: # enter the tracking ID for your Google Analytics
    google_site_verification: # enter Google site verification code
    baidu_analytics: # enter Baidu Analytics hash key
# Miscellaneous
miscellaneous:
    open_graph: # see http://ogp.me
        fb_app_id:
        fb_admins:
        twitter_id:
        google_plus:
    links:
#        Hexo: http://hexo.io

6. 购买域名

去万网或相关域名购买网站,挑选一个自己喜欢的域名吧

7. 域名解析

8. Hexo使用指南

操作指令参考文档

hexo n "博客"== hexo new "博客"#新建文章
hexo p == hexo publish
hexo g == hexo generate#生成
hexo s == hexo server #启动服务预览
hexo d == hexo deploy#部署

9. hexo d以后,刷新网站就可以看到部署好的效果了