搭建个人博客

动机

一直想拥有一个自己的个人博客,用来记录工作总结和生活感悟。之前使用过第三方的博客系统,比如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