很久之前就有搭建博客的想法，之前野心比较大。从设计，前端，后端都自己来，花了大概半个多月（上班空闲时间）搭建成了一个vue+node+mongodb的博客。并且买了一台阿里云的服务器，部署了上去（安装部署花了很多时间）。后来由于阿里云欠费，把我的mongodb的数据全清了，所以就想着不用了。有了之前的经验，自己就不想再重头开始，费时费力而且不怎么好看，就把目标瞄准了快速搭建博客的框架hexo、jekyll、wordpress等工具。个人尝试了hexo体验非常好，敲几行命令花个10分钟就能部署到github.io上了，而且不用买服务器，不花钱！还有许多模板样式供你挑选，非常的方便。本站就是使用hexo搭建的。记录下步骤和常见的错误给大家参考…

很久之前就有搭建博客的想法，之前野心比较大。从设计，前端，后端都自己来，花了大概半个多月（上班空闲时间）搭建成了一个vue+node+mongodb的博客。并且买了一台阿里云的服务器，部署了上去（安装部署花了很多时间）。后来由于阿里云欠费，把我的mongodb的数据全清了，所以就想着不用了。有了之前的经验，自己就不想再重头开始，费时费力而且不怎么好看，就把目标瞄准了快速搭建博客的框架hexo、jekyll、wordpress等工具。个人尝试了hexo体验非常好，敲几行命令花个10分钟就能部署到github.io上了，而且不用买服务器，不花钱！还有许多模板样式供你挑选，非常的方便。本站就是使用hexo搭建的。记录下步骤和常见的错误给大家参考…

准备环境

首先你需要以下的环境和工具，具体安装配置就不再赘述，网上很多。

  • github账号
  • git客户端
  • nodejs

安装配置hexo

按照hexo官网提示,首先安装hexo。

1
$ npm install -g hexo-cli

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

然后简单介绍一下，网站的配置信息在_config.yml中，您可以在此配置大部分的参数。package.json是其应用程序的信息，依赖了那些东西。scaffolds是模版文件夹。当新建文章时，Hexo会根据scaffold来建立文件。source资源文件夹是存放用户资源的地方。themes是主题文件夹。Hexo会根据主题来生成静态页面。

本地运行发布文章

然后我们执行

1
$ hexo server

打开浏览器输入

1
http://localhost:4000/

就能看到搭建的博客了
img
这篇文章是Hexo默认生成的，那么怎么自己发布一篇文章呢？其实这篇默认的文章就已经讲了。首先执行：

1
2
$ hexo new "blog"
$ cd <floder>/source/_posts

在_posts文件夹下可以看到生成的blog.md，然后使用markdown进行写作。再次执行上面的步骤，就可以看到文章啦。

1
$ hexo server

部署到github

之前我们都是在本地进行测试，那么怎么部署到线上呢？其实也非常简单，github创建一个仓库名为yourname.github.io，其中yourname为你的用户名。打开_config.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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: Hexo
subtitle:
description:
author: John Doe
language:
timezone:
# 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:
# 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: YYYY-MM-DD
time_format: HH:mm:ss
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

修改其中的url为https://yourname.github.io ，和之前一样yourname为你的用户名。然后修改deploy

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

其中repo为你的仓库地址。然后执行：

1
2
$ hexo generate
$ hexo deploy

就可以在线上看到你的博客了，例如我的地址是https://pecokael.github.io 。不用买服务器，不用复杂的配置，很方便对不对！

一些问题

本地执行$ hexo server然后访问网站的时候网页显示不出来。这是因为你的电脑安装了福昕阅读，端口被它占用了。执行$ hexo server -p 5000使用其他端口就可以了。
执行$ hexo deploy时报错Deploy not found: git。执行npm install hexo-deployer-git安装一下插件。