Fork me on GitHub

使用 Hexo 搭建个人博客

说在前面

hexo.io

  • 什么是 Hexo

Hexo 是一个快速、简洁且高效的博客框架, Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页 来自这里


Hexo 由一个台湾同胞开发的 Blog 框架 https://github.com/tommy351, 和 GithubCoding 配合可以非常简单而免费的搭建一个漂亮的个人 Blog,而且可以自定义域名,下面就简单介绍其使用吧。

购买域名

域名购买可到 阿里云 或者 godaddy 购买即可,大概 60RMB/年,而且可以自定义域名邮箱,看起来高端大气上档次😄。
如:ios@liangdahong.com
其实没什么 X 用 具体就不介绍了。

环境

Hexo 支持 WindowsmasOS,需安装好

  • Node.js

  • Git

具体的安装可自行 Google

安装 Hexo

  • 在安装好环境后,使用如下的命令安装 Hexo
1
npm install -g hexo-cli
  • 在安装好 Hexo 后,我们初始化自己的 Blog ,首先创建 Blog 需要保存的文件夹,在进入文件夹下。
1
2

cd blog/
  • 初始化 Blog
1
2

hexo init
  • 初始化完成后我们可以看到有如下的文件夹结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14

_config.yml

node_modules

package-lock.json

package.json

scaffolds

source

themes
  • _config.yml 文件是 Blog 的一些基本配置, 具体可以参考官网的说明。

  • 预览, 可使用如下命令预览 Blog,然后在浏览器输入 http://localhost:4000 即可看到 Blog 的效果了

1
hexo s
  • 创建一篇文章
1
hexo new "你的文章名称"
  • 现在我们在本地已经可以看到 Blog 了,那么我们怎么部署到服务器上呢? 让别人也可以看到我们的 Blog
  • 我们需要去 Github 创建一个项目,命名为:name.github.io 如:iangdahong.github.io

  • 然后去开启 GitHub Pages

  • 然后在刚才我们初始化的 Blog_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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle:
description:
keywords:
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:

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# 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:
  • 如上,现在我们需要把 Blog 部署到 Github 上,
1
2
3
4
// 生成静态 html 文件
hexo g
// 部署到 github
hexo d
  • 现在你可以使用 xxxxx.github.io 访问你的 Blog 了。

  • 现在我们使用的是 Hexo 提供的默认主题,其实 github 上已经有大量的开源的漂亮的主题如:next

  • 我们使用自定义的主题,

  • 我们把我们知道的主题 clonethemes 下,

  • 然后在 _config.yml 中修改主题为你使用的主题,

  • 在使用如上的方法部署到 github 即可使用自定义的主题了。

基本配置

一些简单的配置开源参考 hexo 和 相应的主题做自定义修改

自定义域名

github 支持自定义域名,在刚才我们创建的项目中可以设置自定义的域名,但需要先做好域名解析,具体的操作可以 Google

Https

在之前 github 是不支持 https 的,但在不久前已经支持了 https

其他配置

其他扩展的较多:评价系统,统计系统,分享,打赏等,可以自行探索。下面的 Blog 提供了许多的扩展设置,可以参考下。

其他

我们可以会思考一个问题 ?现在我们可以写 Blog 了,那么如果我们换电脑了怎么破?其实 我们在使用 hexo g 命令时,是把我们写好的 Markdown 编译html css 文件。在 public 中,我们使用 hexo d 的时候 其实是吧 public 文件的内容全部同步到 github 上去了,你可以去验证下,所以如果你自己写的 html 可以直接放到 public 中 然后部署上去也一样可以使用。


所以我们刚才创建的的项目存储的是生成的 html 文件,那么我们的源文件呢? 如果换电脑了就没办法获取了,所以我们可以使用 github 在同步我们的源文件,我们在 github 上在创建一个项目来专门存放 我们的 blog 源文件,同时把 public 忽略调,那么我们在换电脑后只需要配置好环境便随时随地可以愉快的写 blog 了。


Blog 加速,国内时访问 Coding, 国外访问 Github ,需把 Blog 同时部署在 2 个平台,同时域名解析为:国外访问 Github,国内访问 Coding

以下博客给于了帮助

- END -
扫一扫上面的二维码图案,加我微信

文章作者:梁大红

特别声明:若无特殊声明均为原创,转载请注明,侵权请联系

版权声明:署名-非商业性使用-禁止演绎 4.0 国际