个人博客搭建详解（Windows和Mac通用版）

发表于   |   分类于   |     |   阅读

免费个人博客搭建思维导图

免费个人博客搭建思维导图

作者：李旺成
时间：2016年4月27日

个人博客效果图

个人博客最终效果图

一、技术选型

常见个人博客搭建方案

搭建个人博客通常有如下选择：

WorkPress：

WorkPress

WorkPress

GitHubPages + Jekyll：

GitHubPages+Jekyll

GitHubPages+Jekyll

GitHubPages + Hexo：

GitHubPages+Hexo

GitHubPages+Hexo

选择 GitHubPages + Hexo

上面提到的三种个人博客方案，我在做了简单的了解后选择了 GitHubPages + Hexo。主要是出于如下几点考虑：

  • WorkPress：一般需要独立域名（收费），对 MarkDown 不友好
  • GitHubPages + Jekell：免费，稍微有点麻烦
  • GitHubPages + Hexo：免费，使用简单，使用者众多…

Hexo 简介

Hexo 是一个基于 Nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen(https://zespia.tw/)

特点：

  • 不可思议的快速 ─ 只要一眨眼静态文件即生成完成
  • 支持 Markdown
  • 仅需一道指令即可部署到 GitHub Pages 和 Heroku
  • 已移植 Octopress 插件
  • 高扩展性、自订性
  • 兼容于 Windows, Mac & Linux

二、博客搭建

跟着我做，简简单单5-7分钟你即可拥有自己的个人博客。开始吧！

创建 GitHub 仓库

注册/登录

如果没有帐号，前往 GitHub 页面完成注册：

  1. 用户名
  2. 邮箱地址
  3. 密码
  4. Create an account

登录
如果有账号，前往 GitHub 页面登录：

  1. 用户名或邮箱地址
  2. 密码
  3. Sign in

创建仓库

直接看图操作：

创建仓库：步骤一

创建仓库：步骤一

创建仓库：步骤二

创建仓库：步骤二

”步骤二“中，注意 Respository name 中一定要输入：你的用户名.github.io。其他地方不用修改，然后直接点 ”Create repository“ 按钮完成创建即可。

本地环境准备

Git 安装

Windows 中

1、下载 Git
打开 Git 官网，选择 Downloads 下面的 Windows（按照你的系统选择 32 位或者 64 位）。考虑到可能受网络环境影响，我已经把 Git 上传到网盘分享出来了，点这里去网盘。

2、安装 Git
双击安装文件 -> 下一步 -> 下一步…
没有特殊要求的直接下一步即可，不用去修改默认选项。

Mac OS 中

话说 Mac 上的 XCode 自带了 Git。（汗！没装 XCode 怎么破）
1、下载 Git
打开 Git 官网，选择 Downloads 下面的 Mac OS X。Mac版的 Git 也上传到网盘分享出来了，点这里去网盘。
2、安装 Git
直接双击 dmg 文件安装即可。

Nodejs安装

Windows 中

1、下载 Nodejs
打开 Nodejs 下载页面，选择合适你当前系统版本的安装包。这里建议使用 LTS 版本的，当前的是 v4.4.3。我已经把 Windows 32/64 位的安装包都提交到网盘了，你可以直接从网盘下载，点这里去网盘。

2、安装 Nodejs
双击安装文件 -> 下一步 -> 下一步…

Mac OS 中

1、下载 Nodejs
打开 Nodejs 下载页面，选择 Macintosh Installer 即可开始下载。网盘里面也上传了，点这里去网盘。

2、安装 Nodejs
直接双击 pkg 文件安装即可。

说明： Nodejs 也可以使用 nvm（Nodejs版本管理器）来安装，步骤如下：
1、安装 nvm

  1. 通过 brew 安装
    $ brew install nvm
    $ mkdir ~/.nvm
    $ export NVM_DIR=~/.nvm
    $ . $(brew –prefix nvm)/nvm.sh
    $ source ~/.nvm/nvm.sh // 使配置生效

  2. 使用 curl 安装
    $ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
    $ source ~/.nvm/nvm.sh // 使配置生效

2、安装 Nodejs 4
$ nvm install 4

Hexo 安装

Hexo 是今天的主角，先打开 Hexo 官网。

Hexo官网

Hexo官网

对，如上图所示，就一条命令，很简单有没有。

Windows 中

1、打开命令行
win+R，输入 cmd，回车

2、输入命令

1
npm install hexo-cli -g

Mac OS 中

1、打开终端
不要问我终端在哪里…

2、输入命令

1
$ npm install hexo-cli -g

创建本地博客

Windows 中

1、打开命令行，定位到你希望放置博客的位置

定位到目标目录

定位到目标目录

2、输入命令

1
hexo init 你的用户名.github.io  // 建议和创建仓库时使用同一个

Mac OS 中

1、打开终端，定位到你希望放置博客的位置

Mac上定位到指定目录

Mac上定位到指定目录

2、输入命令

1
$ hexo init 你的用户名.github.io

Next 安装

经过上面步骤创建完本地博客之后，基本的博客系统就已经搭建好了，自带了 landscape 主题。不过该主题不是很符合我的审美，在网上搜索了一下 Hexo 主题，选择了用户量较大的 Next。

Next 是 iissnan 在 GitHub 上开源的一个 Hexo 主题，主打简洁。选择该主题有如下原因：

  • 简洁，美观
  • 功能齐全
  • 使用者众多
  • 文档齐全

”说明：“在 Hexo 中有两份主要的配置文件，其名称都是 _config.yml
。 其中，一份位于站点根目录下（即 xxx.github.io 目录下），主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置有主题作者提供，主要用于配置主题相关的选项。为了描述方便，在以下说明中，将前者称为 “站点配置文件”， 后者称为 “主题配置文件”。

看下怎么安装主题：

1、切换到上面生成的本地博客目录（xxx.github.io）

切换到本地博客目录

切换到本地博客目录

Mac OS 的终端上类似，把 dir 替换为 ls 即可。

2、安装 Next 主题

1
2
3
git clone https://github.com/iissnan/hexo-theme-next themes/next
或在 Mac 上
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3、使用 Next 主题
首先，复制一份打开本地博客目录下的 _config.yml 文件，命名为 _config_bak.yml，做为备份，以防改错
然后，使用文本编辑器打开本地博客目录下的 _config.yml 文件，搜索，定位 theme 键值，将 theme 的值修改为 next

1
theme: next //刚刚安装的主题名称

注意：该配置文件中的键值之间一定要有空格，否则轻则没有作用，重则报错，无法启动。

4、站点配置文件基本项修改
关于 Hexo 配置的详细信息请前往 Hexo的官方文档。

这里先看看最基础的配置，也就是必须要改动的：

1
2
3
4
5
6
7
8
9
10
11
12
13
title: xxx  # 博客的名字，也称站点名称

author: xxx # 作者名字

description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义（这个还是加上比较好）

language: zh-Hans # 语言 简体中文

theme: next  # 配置主题

deploy: # 部署相关配置
    type: git # 使用 Git 提交
    repo: https://github.com/xxx/xxx.github.io.git # 就是存放博客的仓库地址

上述配置是必须要修改的，再次强调，键值之间一定要 ”加空格“，请在文本编辑器中搜索定位后再修改。

站点配置文件详细配置示例

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 这里的配置，哪项配置反映在哪里，可以参考我的博客
title: xxx # 博客的名字，也称站点名称
subtitle: xxx # 副标题
description: xxx # 对站点的描述，搜索引擎会抓取，可以自定义
author: xxx # 作者名字
language: zh-Hans # 语言 简体中文
timezone:  # 用默认的即可

# URL 
# 这项暂时不需要配置，绑定域名后，要创建 sitemap.xml 时再配置该项
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: # http://xxx.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# 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: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  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: MMM D YYYY
time_format: H:mm:ss

# Pagination 
# 每页显示文章数，可以自定义
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions 
# 配置站点所用主题和插件，这里将默认主题注释，修改为 next
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
#theme: landscape

# 头像
# 注意：是 xxx.github.io/source 下的开始的相对路径，如果 source 文件夹下面没有 uploads 文件夹，那么新建一个。考虑到会博客中用很多图片，在 uploads 文件夹下请分好类，避免混乱
avatar: /uploads/images/avatar.jpg

# Deployment 
# 本地博客部署到 github 上要配置这里
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git # 使用 Git 提交
  repository: https://github.com/xxx/xxx.github.io.git # 就是存放博客的仓库地址

PS：是不是有点迫不及待想看看效果了，那好，先在本地跑起来试试，步骤如下：

  1. 打开命令行，定位到 xxx.github.io 目录
  2. 输入命令：
    1
    2
    hexo s # == hexo server #启动服务预览
    $ hexo s
  1. 启动成功可以看到提示，按照提示用浏览器打开提示网址，即可看到你的本地博客了，里面有一篇 Hello World
    hexo s 命令成功提示

    hexo s 命令成功提示

看完效果之后继续学习下面的内容…

三、Next 配置

当然，最权威的是看官方的说明文档，我在这里提供一个示例，供大家参考，你可以直接拷过去稍微改动一点就行。

Next 配置详解

Next 配置就是上面所说的”主题配置文件“，位于 xxx.github.io/themes/next 目录下，文件名为 _config.yml。老规矩，先备份一份 ”_config_bak.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
# Set default keywords (Use a comma to separate)
# 设置关键字
keywords: "Android, DIY"

# Specify the date when the site was setup
# 设置博客开始时间
since: 2016

# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
# 设置菜单，就是[我的博客](http://diy-green.github.io)左侧那一列
menu:
  home: / # 在菜单上显示首页
  archives: /archives # 在菜单删显示全部
  categories: /categories # 在菜单上显示 分类
  tags: /tags # 在菜单上显示 标签
  about: /about # 在菜单上显示 关于
  #commonweal: /404.html

# Schemes
# 设置风格
#scheme: Muse
#scheme: Mist
scheme: Pisces # 我的就是这个双栏风格

# Automatically Excerpt. Not recommand.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true # 设置是否显示阅读全文，文章较多的话，有必要设置为 true
  length: 150

# 一些第三方服务设置，这里只提一下”多说“，其他的请参考官方介绍
# Make duoshuo show UA
# user_id must NOT be null when admin_enable is true!
# you can visit http://dev.duoshuo.com get duoshuo user id.
duoshuo_info:
  ua_enable: true
  admin_enable: true
  user_id: 0 # **这里不要动，千万别动**
  admin_nickname: DIY-green

# Code Highlight theme
# Available value:
#    normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
#highlight_theme: normal
# 代码高亮主题
highlight_theme: night eighties

# 打赏配置
# 打赏说明文本
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
# 微信收款二维码
wechatpay: /uploads/images/wechat-reward-image.png
# 支付宝收款二维码
alipay: /uploads/images/alipay-reward-image.png

# 友情链接
links_title: Links
links:
  DIY-green简书: http://www.jianshu.com/users/0ad0a0afc409/latest_articles


# 订阅微信公众号
# Wechat Subscriber
#wechat_subscriber:
#  enabled: true
#  qcode: /uploads/wechat-qcode.jpg
#  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

创建分类页面

先看一下分类的效果：
分类页面效果

分类页面效果

操作步骤

  1. 打开命令行，定位到 xxx.github.io 目录

  2. 新建一个页面，命名为 categories

    1
    2
    3
    hexo new page categories
    或
    $ hexo new page categories

  3. 根据提示找到新建的 index.md 文件，编辑

    1
    2
    3
    4
    5
    6
    7
    # 这里有 "---"（这会破坏代码展示效果，所以注释了）
    title: All categories 
    date: 2016-04-25 11:45:45
    type: "categories" # 将页面的类型设置为 categories
     ，主题将自动为这个页面显示所有分类
    comments: false # 如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，设置为 false
    # 这里也有 "---"

创建标签云页面

先看一下标签云的效果：
标签云页面效果

标签云页面效果

操作步骤

  1. 打开命令行，定位到 xxx.github.io 目录

  2. 新建一个页面，命名为 tags

    1
    2
    3
    hexo new page "tags"
    或
    $ hexo new page "tags"

  3. 根据提示找到新建的 index.md 文件，编辑

    1
    2
    3
    4
    5
    6
    7
    # 这里有 "---"
    title: All tags 
    date: 2016-04-27 08:56:40
    type: "tags" # 将页面的类型设置为 tags
     ，主题将自动为这个页面显示标签云
    comments: false # 如果有启用多说 或者 Disqus 评论，默认页面也会带有评论。需要关闭的话，设置为 false
    # 这里也有 "---"

注意事项

  1. 格式
    再次强调，设置项的键值之间一定要有空格
  2. 菜单上显示 ”分类“ 等栏目
    如果需要在菜单上显示 ”分类“ 和 ”标签“ 等，那么记得打开注释，或者添加该条目
  3. 关于第三方服务的 ”duoshuo_info“
    在配置该项的时候，user_id 键对应的值不要修改，也就是保持为 0，具体原因我不清楚，如果修改了该值，那么你的博客会变得一片空白
  4. 分类和标签云页面
    首先，要使用” hexo new page “命令生成这两个页面，否则报404。其次，这两个页面是主题自动维护的，只要我们的文章按照规矩来就行了，下面会详细说明

四、写博客与发布

经过上述步骤，本地博客和主题设置已经完成，那么接下来就是写博客了。

你的博客文件需要存放到 xxx.github.io/source/_posts 文件夹中，在该文件夹下面你可以按照你的博客分类建立一系列的文件夹来管理博客原文件。

操作步骤

1、用 Markdown 写文章
不管你用什么编辑 Markdown 文件，最后生成的 md 文件放到 xxx.github.io/source/_posts 文件夹或其子文件夹中即可，如：

1
2
3
4
5
6
7
8
9
10
11
---
title: 个人博客搭建详解（Windows和Mac通用版） # 这是标题
categories:  # 这里写的分类会自动汇集到 categories 页面上，分类可以多级
- 实用技术 # 一级分类
- 个人博客 # 二级分类 
tags:   # 这里写的标签会自动汇集到 tags 页面上
- 实用 # 可配置多个标签，注意格式
- 个人博客
---

>Hexo 是一个基于nodejs 的静态博客网站生成器，作者是来自台湾的 Tommy Chen

注意：分类和标签是自动维护的，关键是的文章要按照规定的格式写，如上格式，可以参考。

说明：Next 主题会自动生成目录，这也省了不少事。

2、在本地运行测试
打开命令行定位到 xxx.github.io 目录，输入命令：

1
2
3
4
hexo s # 启动服务预览
# 该命令这是简写形式，完整命令 hexo server 
或
$ hexo s

3、在浏览器查看效果
在浏览器中输入 http://localhost:4000 访问本地博客，看看效果吧

4、安装自动部署发布工具
这里用到了 hexo-deployer-git，使用如下命令安装：

1
2
3
npm install hexo-deployer-git --save
或
$ npm install hexo-deployer-git --save

5、发布到 GitHubPages
确认在本地上显示无误之后，就可以将 md 转为 静态网页文件，然后发布到 GitHubPages 上去了。

1
2
3
4
5
6
hexo clean #清除缓存 网页正常情况下可以忽略此条命令
hexo g #生成静态网页
hexo d #开始部署

也可以一次性执行
hexo clean && hexo g && hexo d

如果是第一次部署，终端会提示要求输入用户名和密码。等命令执行完之后，过几分钟打开 http://xxx.github.io 即可看到你的个人博客了。以后要发布新文章，执行上述命令即可。

注意事项

  1. Git 的 bug
    有个老版本的 Git 有个 bug，上传的时候会提示非法域名这类的，要解决该问题，最简单的方法就是更新 Git，用最新版的 Git
  2. 关于页面空白
    主题配置文件中的 ”duoshuo_info“ 下的 ”user_id“ 如果是非 ”0“，会导致该问题
  3. 特殊字符导致报错
    如添加新博客的时候报错了，而且提示的是 js 中某些地方报错，那么很可能是 md 文件中存在特殊字符（不是正常显示的字符，不是说特殊符号，能正常显示的都不是这里说的特殊字符），把特殊字符删除即可
  4. Hexo 命令的常见报错
    可以参考这篇文章：HEXO+Github,搭建属于自己的博客
    补充：关于 hexo d 失败
    如果你的防火墙打开了，或者安装某些安全防护软件，那么建议暂时关闭，这些可能导致部署到 GitHub 失败
  5. 使用hexo，如果换了电脑怎么更新博客？
    这个问题相信大家都关心，知乎上有比较详细的解答。我说一下我的解决方法吧！
    方案一：
    在新电脑上配置好本地博客环境，然后，直接拷贝原电脑上的 xxx.github.io 文件夹到新电脑上即可。
    方案二：
    将 xxx.github.io 文件夹同步到网上(如：Dropbox 等)，其他任何电脑（配置好了本地博客环境）要用的时候，从网上同步下来即可。

五、更多资源

Markdown 编辑器

Markdown语法参考

Markdown 语法说明(简体中文版)
Markdown——入门指南
markdown写作中的常见问题

提示：更简单的学习方法上是直接用示例修改，可参考：作业部落 或者
马克飞象 的示例文稿。

思维导图

Hexo 相关资料

Hexo官网
hexo常用命令笔记

Next 相关资料

hexo-theme-next
Next 使用文档

更多主题

Hexo Themes
有哪些好看的 Hexo 主题？

绑定顶级域名

GitHub Pages绑定顶级域名的方法
怎样将域名绑定到github pages 博客上

第三方服务

站长工具
百度站长工具
站长之家工具
360云监控

数据统计
百度统计
不蒜子

说明

更多的配置可以去看看官方文档，我对我的博客目前的效果已经比较满意。我觉得简洁就是美，我们应该专注内容。更多的设置以及喜欢折腾的朋友自己去百度、Google 吧！

参考

WordPress.org
每个人都应该有一个Jekyll博客
Hexo Themes
Hexo官网
Hexo官方文档
GitHub+Hexo+Next搭建免费独立个人博客
hexo-theme-next
Next主题官方文档
hexo系列教程：（一）hexo介绍
hexo系列教程：（二）搭建hexo博客
hexo系列教程：（三）hexo博客的配置、使用
玩转hexo博客之next
使用Hexo + Next搭建静态博客
hexo
如何使用10个小时搭建出个人域名而又Geek的独立博客？
傻瓜都可以利用github pages建博客
HEXO+Github,搭建属于自己的博客
通过GitHub Pages建立个人站点（详细步骤）
免费顶级TK域名注册图文教程+DNS修改！
Freenom免费域名.TK、.CF、.ML、.GA注册及使用方法
hexo你的博客
5分钟 搭建免费个人博客
hexo–搭建
如何搭建一个独立博客——简明Github Pages与Hexo教程
Hexo服务器端布署及Dropbox同步

坚持原创技术分享，您的支持将鼓励我继续创作！