建立个人博客

如何利用hexo建立一个博客系统

作者 Fandy 日期 2016-09-29
Node.js Hexo Anisina
建立个人博客

first start

this is the first time I write a blog, well My English is not good,but I have Baidu Translate Service,haha.

How do I start

I want to start a blog a long time ago, but I did’t find a good blog tool that I like.
someone had suggest me the WordPress,well ,the new wordpress.com was rewrite by node.js,it’s faster and lighter,but in China you have to accept the net wall.

Recently I found a good blog tool,whick is supported by node.js, and I don’t have to warried about the webserver.

Now let me introduce you the Hexo,you can start your blog with this tool,you can wirte your blog with Markdown,and he can anylysis what you writed ,then translate your blog into html,you can upload your html to Github Pages.

new step

this is the new step in my life,I will wirte something in my blog and share with you .Stay tuned for more pages.

教程开始

上面拽了一下英文，很久不写，确实是手生，还是写中文更快，为了更流畅的装逼，我还是用中文写教程吧，哈哈。

安装hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

​ 安装hexo依赖于node.js和Git，所以如果你的电脑上未安装，请先自行Google解决。什么？你告诉我上不了Google？那就请百度，和谐上网方法，如果还是不行，在下面写评论，我带你装逼带你翻。

以上安装好之后，使用如下命令即可安装， -g 参数是用于在系统中生成软链接，从而生成全局使用的命令。例如 hexo server

1
$ npm install -g hexo-cli

​ 安装完成之后，使用如下命令，生成blog所需目录和文件

1
2
3
$ hexo init blog
$ cd blog
$ npm install

此目录下有一个_config.yml文件，这个文件就是全局的配置文件，基础信息配置好之后，可以执行如下命令启动一个简单的web服务器，预览博客效果

1
$ hexo server

选择主题

作为一个可变主题的博客系统，不选个自己喜欢的主题怎么行，去看看hexo官方收录的精品主题吧—>主题

选好主题之后，将主题放入blog/themes目录下，修改_config.yml下面的theme字段为新的主题名称，再针对主题，修改相应的配置，即可更换主题。

我选择的是Anisina,这个主题还有很多配置选项，并且使用七牛的cdn服务。这个主题的教程可以参考作者的博客所写的教程，我折腾的过程有点曲折，花了不少时间，现在提供我的配置文件给你们参考。

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Fandy
subtitle: Fandy的个人博客
author: Fandy Peng
language: 中文
timezone: Asia/Shanghai

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

# custom Site settings
# more detail check out docs
SEOTitle: Fandy
header-img: //cdn.fandypeng.com/banner.jpg
email: fandypeng@163.com
description: "Fandy的个人博客，随笔记录生活"
keyword: Fandy Peng, 个人博客

favicon: # your favicon png
# custom end

# SNS settings
# RSS:
weibo_username: fandypeng
zhihu_username: fandypeng
github_username: fandypeng

# Build settings
anchorjs: false                        # if you want to customize anchor. check out line:181 of `post.html`


# Disqus settings 
disqus_username: 

# Duoshuo settings
duoshuo_username: fandypeng # 你的多说帐号
# Share component is depend on Comment so we can NOT use share only.
duoshuo_share: true                     # set to false if you want to use Comment without Sharing


# Analytics settings
# Baidu Analytics
ba_track_id:
# Google Analytics
ga_track_id:             # Format: UA-xxxxxx-xx
ga_domain:

# Sidebar settings
sidebar-about-description: Stay hungry, Stay foolish # 个人描述
sidebar-avatar: "https://www.fandypeng.com/images/fandy.jpg?imageView2/2/w/300/h/300/interlace/1/q/90"    # use absolute URL


# Featured Tags
featured-tags: true                     # whether or not using Feature-Tags
featured-condition-size: 1              # A tag will be featured if the size of it is more than this condition value

# friends 友链
friends: [
  {
    title: "Anisina",
    href: "http://haojen.github.io"
  },
  {
    title: "程小涵",
    href: "http://chenghan.me"
  },
  {
    title: "虎哥",
    href: "http://huangh.me"
  }
] 
 
# 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: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: true
  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: 8
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/

markdown:
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-emoji

## Themes: https://hexo.io/themes/
theme: Anisina

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ftpsync
  host: ftp-host
  user: ftp-user
  pass: ftp-password
  remote: ftp-dir
  port: 21
  ignore: 
  connections: 1
  verbose: true


# img CDN path
cdn-url: "https://www.fandypeng.com/"  # 你的CDN地址

# Qiniu imageView2 API
# More info http://developer.qiniu.com/code/v6/api/kodo-api/image/imageview2.html
clip-content: "?imageView2/2/w/1400/h/370/interlace/1/q/90"
clip-avatar: "?imageView2/2/w/300/h/300/interlace/1/q/90"
clip-home-post-bg: "?imageView2/2/w/1400/h/370/interlace/1/q/90"

# post default images
post-default-img: "https://www.fandypeng.com/images/banner.jpg" #博文默认的图片
post-default-img-mobile: "https://www.fandypeng.com/images/welcome.jpg?imageView2/2/w/1000/h/300/interlace/1/q/90" #移动端显示的图片

# search api , set your custom key
swiftype_key:

致谢：hexo、 Anisina




FEATURED TAGS
Node.js Hexo Anisina
FRIENDS