如何使用 Hexo 搭建个人博客

发表于 更新于 分类于 阅读次数：
本文字数： 4.7k 阅读时长 ≈ 4 分钟

原文链接

什么是 Hexo ？

Hexo 是一个简单快速的静态博客框架，可以通过编辑 Markdown 文档生成好看的静态博客。

搭建 Hexo

要求

安装 Hexo 十分简单，只需要 Node.js 和 Git 即可。

Node.js

最好的安装方式是使用 nvm，

cURL：

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

安装好 nvm 之后，重启终端，然后通过

$ nvm install 0.12

来安装 Node.js

Git

Mac 用户：Homebrew

安装 Hexo

$ npm install -g hexo-cli

需要注意的是，这里的 npm 相关命令，最好都使用管理员权限操作，否则可能会报错

如何使用 Hexo

一旦安装完毕 Hexo，即可通过如下命令在指定文件夹中初始化 Hexo：

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

配置 Hexo

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
# Hexo Configuration
# Site
title: Hexo #博客标题
subtitle: #博客副标题
description: #博客描述
author: John Doe #作者名字
email: #邮箱地址
language: #语言 中国大陆简体中文的标准语系地区码是zh-CN 台灣是正體中文zh-TW 

# URL
url: http://yoursite.com #博客地址
root: / #博客根目录
permalink: :year/:month/:day/:title/ #博客url地址结构  
tag_dir: tags 
archive_dir: archives
category_dir: categories
code_dir: downloads/code
permalink_defaults:

# Directory
source_dir: source
public_dir: public

# 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
highlight:
enable: true
line_number: true
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Archives
archive: 1 #设置为1 是全部展示
category: 2
tag: 2

# Server
port: 4000 #本地服务器端口是4000
server_ip: localhost #本地服务器地址
logger: false
logger_format: dev

# Date / Time 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

# Disqus
disqus_shortname: #disqus的用户名称

# Extensions
theme: landscape #主题设置
exclude_generator:

# Deployment
deploy:
  type:

完善页面

1
hexo new page "about"

用于创建 about 页面

Hexo 常用插件

Plugins, Hexo官方插件列表地址

RSS

安装hexo-generator-feed插件即可

npm install hexo-generator-feed

阅读进度

Sitemap

给搜索引擎使用

1
npm install hexo-generator-sitemap

装完之后 记得在全局配置里面开启插件

1
2
3
plugins:
- hexo-generator-feed
- hexo-generator-sitemap

Git

用于发布

1
npm install hexo-deployer-git --save

baidu sitemap

1
npm install hexo-generator-baidu-sitemap@0.1.1 --save

sitemap

1
npm install hexo-generator-sitemap --save

Gitalk

  • 用于管理评论
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# Demo: https://gitalk.github.io
gitalk:
  enable: true
  github_id: samwei12  # Github repo owner
  repo: Gitalk # Repository name to store issues 注意这里必须要填名称，而不是链接
  client_id:  # Github Application Client ID
  client_secret:  # Github Application Client Secret
  admin_user: samwei12 # GitHub repo owner and collaborators, only these guys can initialize github issues 这里填名称即可，可以是数组
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language:

GoogleAnalytics

阅读时间统计

  • 本地搜索
1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false

发布到 Github

拥有自己的 GithubPage

  1. 创建一个与自己用户名相同的项目
  2. 随便上传个文件，上传 master 分支
  3. 新建 hexo 分支，并切换到该分支，推送到远程

发布

  • 配置里，新增
1
2
3
4
deploy:
  type: git
  repo: https://github.com/samwei12/samwei12.git
  branch: master
  • 然后
1
2
3
4
// 生成静态文件
hexo g
// 发布
hexo d

即可

绑定个人域名

购买域名

  • 可以从阿里云上购买域名, 目前我购买了 samwei12.com 这个域名，几个注意事项：
    • 需要实名认证
    • 需要备案

域名备案

绑定域名

迁移到新电脑

  • 最近又是好久没有写博客了，换了新电脑之后需要重新配置，这次记录下还原步骤，下次再遇到可以提高效率。

还原博客文件

  • 我采用的办法是将博客相关内容专门放到 hexo 分支上，然后 git 仓库的默认分支设置为 hexo，切换电脑之后直接拉取最新代码。

安装依赖

  1. 首先先把主题和插件安装下来
    1. 我使用的主题是 https://github.com/theme-next/hexo-theme-next.git， 这里推荐把主题的配置文件放到 _data文件夹下，好处是即使换了电脑，配置重新拉取代码仍然同步
    2. 阅读进度插件： https://github.com/theme-next/theme-next-reading-progress
    3. 字体插件：https://github.com/theme-next/theme-next-han
  2. 根目录下执行 npm install
  3. hexo g && hexo s 本地测试是否部署成功

注意事项

参考文档