手把手教你用Hexo+Github搭建属于自己的博客(详细图文)

下面是详细讲解“手把手教你用Hexo+Github搭建属于自己的博客(详细图文)”的完整攻略，包含两条示例说明。

什么是Hexo

Hexo是一款基于Node.js的静态博客框架，它支持Markdown语法，使用方便快捷且可以自定义个性化主题。

准备工作

1. 安装Node.js

在Hexo官网上下载并安装最新版本的Node.js。

1. 安装Git

在Git官网上下载并安装最新版本的Git。

1. 注册GitHub账号

在GitHub官网上注册一个账号，这将成为你博客的托管平台。

使用Hexo+GitHub搭建个人博客

1. 创建一个新的repository

在GitHub上新建一个库，仓库名为：yourname.github.io，注意替换你的用户名。这是用于托管你的博客的仓库，GitHub会自动为你的账户下的yourname.github.io建立一个网站。

1. 安装Hexo

使用Node.js的包管理工具npm进行安装，打开命令行窗口，输入以下命令：

npm install -g hexo-cli

1. 初始化Hexo

创建本地博客目录，打开命令行窗口，进入你想要存放博客的目录，例如：D:/Blog，输入以下命令：

hexo init blog

1. 配置Hexo

打开博客目录下的_config.yml文件，配置你的个人信息、站点信息等。例如：

```yml
# Site
title: My Blog
subtitle:
description:
author: Your Name
language: zh-CN
timezone: Asia/Shanghai

# URL
##如果是在本地预览，需要将url的值改成 / ，否则会导致本地访问不了
url: /
permalink: :year/:month/:day/:title/

# Deployment
##部署信息，按照自己GitHub的信息进行配置
deploy:
type: git
repo: [e-mail]:yourname/yourname.github.io.git
branch: master
```

1. 编写文章

打开博客目录下的source/_posts文件夹，新建一个.md文件，例如first-post.md，使用Markdown语法编写文章。例如：

```markdown

---

title: 第一篇博客
date: 2019-08-14 14:54:06
tags: [hexo,github]

---

这是我的第一篇Hexo博客。
```

1. 生成静态页面

在命令行窗口中输入以下命令：

hexo generate

生成的静态文件会存放在博客目录下的public文件夹。

1. 部署到GitHub

在命令行窗口中输入以下命令：

hexo deploy

这个命令会将静态页面自动部署到你在GitHub上创建的仓库中。

1. 访问博客

在浏览器中输入 http://yourname.github.io ，就可以访问你的博客了。

示例一：使用Hexo-Theme-Next主题

1. 安装Hexo-Theme-Next主题

在博客目录下打开命令行窗口，输入以下命令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

1. 修改主题配置文件

打开博客目录下的_config.yml文件，将主题配置theme:修改成主题文件夹名称next。

1. 添加菜单项

打开主题目录下的_config.yml文件，找到menu:选项，按照格式添加菜单项。例如：

yml
menu:
home: /
archives: /archives
categories: /categories
tags: /tags
about: /about

1. 编写自定义样式

在主题文件夹下找到source/css/custom文件夹，可以添加自定义CSS文件以覆盖主题默认样式。

示例二：使用Hexo-Theme-Livgh

1. 安装Hexo-Theme-Livgh主题

在博客目录下打开命令行窗口，输入以下命令：

git clone https://github.com/summerscar/hexo-theme-livgh themes/livgh

1. 修改主题配置文件

打开博客目录下的_config.yml文件，将主题配置theme:修改成主题文件夹名称livgh。

1. 添加配置项

在主题目录下找到_config.yml文件，根据自己的需要添加相应的配置项。例如：

```yml
# 站点标题
site_title: My Blog

# 站点描述
site_description: Welcome to my blog

# 自定义菜单
menu:
Home: /
Archives: /archives
Categories: /categories
Tags: /tags
Gallery: /gallery
About: /about

# 社交链接
social:
mail:
email: [e-mail]
icon: fa fa-envelope
github:
url: http://github.com/example
icon: fa fa-github
twitter:
url: http://twitter.com/example
icon: fa fa-twitter
```

1. 编写自定义样式

在主题文件夹下找到source/css文件夹，可以添加自定义CSS文件以覆盖主题默认样式。

以上就是使用Hexo+GitHub搭建个人博客的完整攻略，希望能帮助到你。