xyzblog

hexo在github上搭建个人博客

如果你想拥有一个高逼格的个人免费博客 github+hexo 是个不错的选择。
 2015/11/12
github hexo

介绍

先介绍一下什么是静态博客吧。静态博客一个静态网页组成的博客,而且更轻更快,更适合程序猿使用。网页访问不经过php/asp.net/java等编译,也不会对数据库有I/O操作。所以对环境要求没什么限制，只需要一个存放这些静态页面的空间就可以运行。

hexo 就是几个静态博客生成工具。hexo 是基于node.js 开发的一个静态博客框架。你只需要把你写的博客放在指定的目录下,再执行hexo 的生成文章命令就会自动生成静态页面。我们只需要把静态页面放在空间上就可以在线访问你的博客了。

github 是一个在线免费代码托管仓库，而且我们可以对我们的代码进行版本管理。而 github page 就是一个免费的空间。如果你用github page 建一个网站那你就可以出去吹牛了。

通过以上结论 我用hexo生成我的静态博客页面 把这些页面上传到 github。 我的网站就可以访问了。 再也不用买服务器。或虚拟主机就能拥有一个属于自己的博客页面了

安装node.js

推荐安装: 官网下载源码包安装 (高版本的node.js 自带npm 包管理工具)

  • mac 电脑 （不推荐）

    brew install node

  • linux Ubuntu系统 （不推荐）

    sudo apt-get install nodejs

sudo apt-get install npm

安装hexo框架

  • 进入一个空目录下执行下面的命令

    mkdir blog

  • window

    npm install hexo -g

  • linux /mac (全局安装需要sudo)

    sudo npm install hexo -g

使用hexo

  • 初始化

    hexo init

  • 文件结构如下

  • scaffolds 工具模板

  • scripts hexo的功能js
  • source 博客资源文件夹
  • source/_drafts 草稿文件夹
  • source/_posts 文章文件夹
  • themes 存放皮肤的文件夹
  • themes/landscape 默认皮肤文件夹
  • _config.yml 全局配置文件
  • db.json json格式的静态常量数据库
  • _posts目录：Hexo存放博客文章的文件夹

themes目录：存放皮肤的文件夹，默认使用官方的主题 你也可以参考 官方手册 制作属于主题样式

配置Hexo

用文本编辑器修改_config.yml这个文件 大致如下 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# Hexo Configuration
# Site
title: Hexo #博客标题
subtitle: #博客副标题
description: #博客描述
author: 小宇宙 #作者名字
email: #邮箱地址
language: #语言 中国大陆简体中文的标准语系地区码是zh-CN 台灣是正體中文zh-TW 

# URL
url: http://yoursite.com #博客地址
root: / #博客根目录
permalink: :year/:month/:day/:title/ #博客url地址结构  
tag_dir: tags 
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# 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
highlight:
enable: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
archive: 1 #设置为1 是全部展示
category: 2
tag: 2

# Server
port: 4000 #本地服务器端口是4000
server_ip: localhost #本地服务器地址
logger: false
logger_format: dev

# Date / Time 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_shortname: #disqus的用户名称

# Extensions
theme: landscape #主题设置
exclude_generator:

# Deployment
deploy:
  type:

同样编辑主题文件夹的 theme/主题文件夹/_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# Header
menu:    #导航栏连接
   Home: /
   Archives: /archives
rss: /atom.xml  #rss地址  默认即可

# Content
excerpt_link: Read More #阅读更多的文字显示
fancybox: true #开启fancybox效果

# Sidebar  #侧边栏设置
sidebar: right
widgets:
  - category
  - tag
  - tagcloud
  - archive
  - recent_posts

# Miscellaneous #社交网络和统计连接地址
google_analytics: #google analytics ID
favicon: /favicon.png #网站的favicon
twitter:
google_plus:
fb_admins:
fb_app_id:

hexo 的几个常用命令

hexo new post <title>   //生成一个文章文件

hexo new page <title>   //生成一个页面

hexo server             // 开启服务

hexo generate           // 生成静态页面

hexo deploy             // 部署到服务器上

部署在github上

github 创建一个版本库 版本库的名称必须按照 name.github.io 的方式命名。 因为github 会分配一个 github page 的空间 域名则是 name.github.io 域名去访问你的空间。

用文本编辑器修改_config.yml

1
2
3
4
# 设置部署方式为git 在配置文件的最下面
type: git
repository: ssh://git@github.com:xyzphp/xyzphp.github.io.git
branch: master

接下来输入以下命令

npm install hexo-deployer-git --save   //安装git发布器

hexo g        //生成静态页面

hexo d      // 部署到服务器上

访问你的 username.github.io 域名 。 你会发现你的博客已经上线了。

你可以用 markdown 的语法去写文章感觉会更爽。 markdown 的使用以后再说。嘿嘿。