使用Hexo搭建个人博客并部署到Github

操作系统环境:Ubuntu 19.04

Git版本:2.20.1

Node.js版本:10.15.2

npm版本:5.8.0

前置环境安装

安装前提

在你的电脑上安装 Git、Node.js 以及 npm:

1
sudo apt install git nodejs npm

在某些发行版,源中的 nodejs 与 npm 版本过低,不能完成 Hexo 的正常使用,如果出现这种问题,请到 Nodejs 官网以及 npm 官网下载较新版本。

安装hexo

1
sudo npm install -g hexo-cil

初始化你的博客

在你希望创建博客的目录下运行指令:

1
hexo init

由于 npm 的问题,我在运行本命令的时候出现了错误,如下图:

1570935913884

只需要再手动运行 npm install 命令就可以了。

执行本命令后,我们会发现在当前目录下多出了以下文件:

1570936230837

其中:

  • node_modules:nodejs的依赖包,各种插件会被安装在里面;

  • scaffolds:页面模板;

  • source:资源,这里面的内容将会按照页面分别,未来也将会呈现在生成的静态页面中;

    如我在这个目录中创建了 img 文件夹并在其中放置了 index.jpg 文件,预览或者发布后在浏览器中输入页面地址/img/index.jpg即可访问这个文件。而以 markdown 编写的博客文件将会被转换成 html 文件并按照配置中的设置来保存到静态页面结构中。

  • theme:存放主题的文件夹,默认安装 landscape 主题;

  • _config.yml:配置文件,具体内容将会在后面的内容中提及。

此时输入以下命令(实时预览博客):

1
hexo server

并在浏览器中输入:http://localhost:4000,你就可以看到你的博客最开始的样子了。

增加你的第一篇博客

使用如下命令创建一篇博客:

1
hexo new '文章名'

比如我想创建一篇叫做 test 的博客,我就需要输入 hexo new 'text'(去掉引号也是可以的)。接下来我们就可以在/source/_posts文件夹下看到我刚刚创建的text.md文件。打开我们会发现上面已经有一部分内容:

1570938154144

这一部分灰色背景框住的部分叫做 Font-matter,用于指定个别文件的变量。它具体的markdown代码为:

1
2
3
4
5
---
title: test
date: 2019-10-13 11:38:55
tags:
---

Hexo 预先定义了一些参数:

参数 描述 默认值
layout 布局
title 标题
date 建立日期 文件建立日期与时间
updated 更新日期 文件更新日期
comments 开启文章的评论功能 true
tags 标签(不适用于分页)
categories 分类(不适用于分页)
permalink 覆盖文章地址
keywords 仅用于 meta 标签和 Open Graph 的关键词(不推荐使用)

除了使用 YAML 你也可以使用 JSON 来编写 Front-matter,例如:

1
2
3
"title": "Hello World",
"date": "2013/7/13 20:46:25"
;;;

Font-matter以下,你就可以使用熟悉的 markdown 来编写你的博文了。

配置

你的博客的一些基础配置可以在_config.yaml中来修改,具体内容如下:

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
# 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: en # 语言,简体中文设置为 zh-CN
timezone: # 时区,东八区设置为 Asia/Shanghai

# 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 # Include code文件夹,是source_dir下的子目录
i18n_dir: :lang # 国际文件夹
skip_render: # 跳过指定文件的渲染,发布时不会生成这些文件

# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局,post即按照主题中layout文件夹下的post.ejs来布局
auto_spacing: false # 在中英文之间自动加入空格
titlecase: false # 把标题转换为title case
external_link: true # 在新标签页中打开连接
filename_case: 0 # 把文件名称转换为 (1)小写 或 (2)大写 (0)不转换
render_drafts: false # 显示草稿(?)
post_asset_folder: false # 启动 Asset 文件夹(?)
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章(按照Front-matter中的data属性判断)
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:

特殊的:

  • 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,则请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/
  • permalink设置为:year/:month/:day/:title/时,你的生成于2019年10月1日的名为Hello的博客将以http://你博客的网址/2019/10/01/Hello/来访问。

主题

Hexo 主题商店 来找到你的想要的主题。

一个主题文件夹中主要有以下文件/文件夹:

  • _config.yml:主题的配置文件;
  • languages:主题的语言文件;
  • layout:页面布局方案;
  • scripts:脚本文件;
  • source:资源文件。

由于不同主题的具体内容不同,所以在此不再对主题的配置进行讨论。

部署到 Github

Github Pages 是 Github 提供的免费的静态网站解决方案,用以方便用户发布自己的项目。Github Pages 为每一个用户提供一个静态网站,域名为 <username>.github.io。用之搭建静态的个人博客是很好的选择的

在Github的设置

创建一个名为 <username>.github.io 的仓库,注意 <username> 部分一定要替换成你的用户名:

1570940939271

在本地Git中配置你的Github账户信息

在终端中输入以下命令:

1
2
git config --global user.name "YourName"
git config --global user.email "YourEmail"

将其中的YourNameYourEmail修改成你的用户名和账户邮箱。

再输入以下命令创建SSH:

1
ssh-keygen -t rsa -C "youremail@example.com"

1570942286216

按照图片中的内容找到生成的id_rsa.pub,并将内容复制到 Github 设置中的 SSH keys 中。

1570942588589

1570942725229

再输入以下命令来确认 SSH 连接:

1
ssh -T git@github.com

1570942877965

在Hexo中配置上你的 Github 信息

修改博客的_config.yml中关于 deploy(部署)的配置(将其中的<username>改成你的 github 用户名,内容不保留尖括号):

1
2
3
4
5
deploy:
type: git
repo: git@github.com:<username>/<username>.github.io.git
branch: master
message:

在你的博客目录下打开终端,输入以下命令:

1
2
3
hexo clean
hexo generate
hexo server
  • hexo clean/hexo c:清除本地以前生成的静态页面文件。
  • hexo generate/hexo g:在本地生成静态页面文件,并保存到public文件夹下。
  • hexo deploy/hexo d:上传部署到 Github。

部署完成后,就可以在浏览器中访问http://username.github.io(username替换为你的Github用户名)来访问你的博客了。

其他

绑定个人域名

  1. 购买域名,国内的话可以购买的地方很多,推荐阿里云万网。

    个人认为还是.com与.net的域名更好一些,但相对其他域名来说活动会更少。你也可以尝试现在个人博客多使用的.cc、.name、.me、.io等域名。

  2. 增加CNAME,在你的source目录下藤甲一个名为CNAME文件,并在里面增加上你的域名。

  3. 在你的域名解析DNS中增加上记录:

    记录类型 主机记录 解析路线 记录值
    A www 默认 IP地址
    CNAME @ 默认 你的github页面网址
    • 记录类型:

      • A:指定主机对应的IP地址;
      • CNAME:别名记录;
      • NS:域名服务器记录;
      • MX:邮件交换记录,指向邮箱服务器。

      我们在这里只需要记录一个 A 记录和一个 CNAME 记录就可以了。

    • 主机记录(域名前缀:

      • @:直接解析主域名,没有前缀;
      • 某一个英文字符串:前缀为这个字符串的域名;
      • :泛解析,匹配其他所有前缀域名。

    其中IP地址可以通过ping命令获得:

    1570944714395

  4. 重新部署。

hexo-admin 插件

hexo-admin插件是一个方便后台登录管理hexo博客的插件,你可以在这上面方便地创建并编写新博客。

1570944895391

安装本插件

在博客目录下打开终端并输入:

1
npm install --save hexo-admin

使用本插件

首先你要在本地预览你的博客,输入:

1
hexo server

然后打开浏览器访问localhost:4000/admin即可进入该插件后台。

配置本插件

为防止他人试用本插件,我们可以在设置中添加用户名密码。在 Settings 中找到 Setup authentification here。

1570945162102

1570945192774

设置你的用户名和密码。

然后将下方生成的配置文件内容存放到博客配置文件_config.yml中,即可加密。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×