搭建个人博客

发表于 2015-06-20   |  

动机

一直想拥有一个自己的个人博客，用来记录工作总结和生活感悟。之前使用过第三方的博客系统，比如csdn。不太喜欢这类博客系统固定的主题，以及令人讨厌的广告。也尝试过使用wordpress搭建自己的博客系统，但懒于主机的维护。所以就选用免费的github来搭建自己的博客。
最初想使用jekyll作为博客框架，但感觉安装繁琐，配置麻烦。所以就选用了hexo，把主要精力放在写文章上面。
下面就把搭建博客的过程记录下来，方便自己以后使用，也希望能给他人一些帮助。

博客搭建

注：这里主要记录hexo的安装和使用。git的注册和使用不在这里细述。

安装hexo

1
$ npm install hexo-cli -g

创建一个博客

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

启动本地博客

1
$ hexo server

然后在浏览器中输入http://127.0.0.1:4000/就可以看到博客的内容了。

博客配置

博客配置大部分在_config.yml中。

网站配置

1
2
3
4
5
6
7
# Site
title: "wangzhilong's blog"     # 网址标题
subtitle: "路漫漫其修远兮"      # 网站副标题
description:                    # 网站表述
author: wangzhilong             # 网站作者
language: zh_CN                 # 语言
timezone:                       # 时区

网址

1
2
3
4
5
6
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com            # 网址
root: /                             # 根目录
permalink: :year/:month/:day/:title/    # 文章永久连接格式
permalink_defaults:                 # 永久连接中各部分的默认值

如果您的网站存放在子目录中，例如 http://yoursite.com/blog，则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。

文件目录

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source          # 资源文件夹，这个文件夹用来存放内容
public_dir: public          # 公共文件夹，这个文件夹用于存放生成的站点文件
tag_dir: tags               # 标签文件夹
archive_dir: archives       # 归档文件夹
category_dir: categories    # 分类文件夹
code_dir: downloads/code    # Include code 文件夹
i18n_dir: :lang             # 国际化（i18n）文件夹
skip_render:                # 跳过指定文件的渲染，您可使用 glob 来配置路径

写文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Writing
new_post_name: :title.md    # 新文章的文件名称
default_layout: post        # 预设布局
titlecase: false            # 把标题转换为 title case
external_link: true         # 在新标签中打开链接
filename_case: 0            # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false        # 显示草稿
post_asset_folder: false    # 启动 Asset 文件夹
relative_link: false        # 把链接改为与根目录的相对位址
future: true                # 显示未来的文章
highlight:                  # 代码块的设置
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

时间标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 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            # 分页目录

博客部署

部署配置

1
2
3
4
deploy:
  type: git
  repository: https://github.com/wangzhilong/wangzhilong.github.io.git
  branch: master

其中respository就是github上创建的仓库。banch是该仓库的分支。（把用户改成自己的用户）

生成静态文件

1
$ hexo generate

部署

1
$ hexo deploy

如果在部署过程中，遇到下面错误：

ERROR Deployer not found: git

执行下面语句后，再部署.

1
$ npm install hexo-deployer-git --save

部署完后在浏览器中输入:http://wangzhilong.github.io/ .就可以看到博客了。

写新文章

1
hexo new make_blog

make_blog是文章的标题。写完新文章后，生成部署，就可以在浏览器中看到了。
注:推荐一个在线用markdown写文章：https://www.zybuluo.com/

参考文章

【1】 https://hexo.io/zh-cn/docs/
【2】 https://github.com/iissnan/hexo-theme-next