记本博客搭建过程(一):博客系统搭建

因为个人喜欢简洁的风格(懒), 我选择了 Hexo 搭配 NexT 主题作为博客系统.

配置环境

在使用 Hexo 前,需要先配置好所需环境.

Node.js

Windows

Node.js 下载安装包,安装完毕即可使用.

正常情况下安装程序会为你配置好环境变量,如果你发现无法调用 nodenpm 命令,请检查你的系统环境变量.

Linux

Linux 平台,我更喜欢使用 Node Version Manager, nvm 来管理 Node.js,它能方便的安装多个版本的 Node.js 并能在其中自由切换.

首先使用 wgetcurl 下载 nvm 的安装脚本:

wget

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

curl

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

安装完毕后即可使用 nvm 来安装并管理 Node.js 环境了.

nvm ls-remote # 查看可使用的版本
nvm install 6.2.0 # 安装 Node.js ,我这里使用的是当前最新的 V6.2.0
nvm alias default 6.2.0 # 指定 default 为 V6.2.0
nvm use default # 使用 default 作为环境变量

在终端输入 nodenpm ,有输出的话说明 Node.js 环境已配置好了.

Git

Windows

安装 GitHub 客户端msysgit .

Linux

使用 yum , apt-getpacman 等包管理器安装.
各系统参考链接

部署

其实 Hexo 配置是很简单的,我在这里就大概说下步骤吧.

  1. 在终端下输入 npm install -g hexo-cli 安装 Hexo.
  2. 在终端下输入 hexo init <你想存放的目录>
  3. 终端定位到存放目录,输入 npm install 开始部署 Hexo .
  4. 按需选择 Hexo [参数] 命令.

常用参数说明

g (generate) [-d (–deploy)] [-w (–watch)]
生成静态文件. [生成后立刻部署] [监视文件变动(实时生成)]

s (server) [-p (–port)]
启动本地服务器,默认端口为 4000 . [使用指定端口启动]

d (deploy) [-g (–generate)]
部署网站. [部署前先生成静态文件]

clean
清除缓存文件和生成的静态文件.

详细步骤请查看 Hexo 文档Hexo 中文文档 .

Hexo 配置

项目配置

打开项目根目录下的 _config.yml 来进行修改.

Site

1
2
3
4
5
6
7
8
# Site
title: YooooEX
subtitle: Yoooo
description: YooooEX的小站
author: YooooEX
avatar: https://avatars1.githubusercontent.com/u/4946838?v=3&s=460
language: zh-Hans
timezone: Asia/Shanghai
参数解释
tltle网站标题
subtitle网站副标题
description网站描述
author作者名
language网站使用的语言
timezone网站时区

URL

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://www.yooooex.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
参数解释
url网址
root网站根目录
permalink文章放置方式,请查看 Permalinks
permalink_default同上

Directory

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
i18n_dir: :lang
skip_render:
参数解释
source_dir资源存放位置
public_dir生成文件存放位置
tag_dir标签
archive_dir归档
category_dir分类
code_dirInclude code 文件夹
i18n_dir国际化(i18n)文件夹
skip_render指定文件跳过渲染

Deploy

1
2
3
4
5
6
# Deployment
deploy:
type: git
message: update
repo:
s1:
参数解释
type部署方式
message提交信息
repo部署源

详细请查看 Deployment .

\有空的时候再补充一个部署在VPS上的方式吧.*

主题配置
  • 前往 NexT 的官网下载你喜欢的版本(我使用的是 5.0.1 ),将其放置在项目的 themes 文件夹中.
  • 修改在项目根目录下的 _config.yml 文件,将主题更换为 NexT .
1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-next-5.0.1

由于 NexT 主题的可定制选项较多,我就只挑一些我有用的来说吧.

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
# 网站图标
favicon: /favicon.ico
# 关键字
keywords: "Android, 开发, YooooEX"
# RSS订阅
rss: false
# 主题,在 Muse | Mist | Pisces 中选择
scheme: Mist
# 字体
font:
enable: true
# 自定义源,我使用的是中科大的
host: //fonts.lug.ustc.edu.cn
# 个人社交链接
social:
Github: https://github.com/YooooEX
# 代码主题,在normal | night | night eighties | night blue | night bright 中选择
highlight_theme: night
# 使用 <!-- more --> 来创建阅读更多链接
scroll_to_more: true
# disqus ID
disqus_shortname:

vendors:
# 替换了默认的 jQuery 源
jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js

博客的配置就到此结束了.