使用 Hexo 免费搭建属于自己的个人博客

有人可能会问有了 简书 为什么还需要 博客 ?身为一个 程序猿 怎么能没有一个自己的 博客 呢!虽然有了 简书,但是 博客 不受任何第三方管理,并且还能自定义成自己喜欢的界面,下面就开始讲一下搭建的方法。


Hexo 是一款基于 Node.js 的博客框架,应该是目前最流行的博客框架了,使用起来比较简单,以下是 我的博客 页面:

我的博客

我的博客

安装搭建博客必须的环境

1. 安装 Git

这里就不说怎么安装了,相信会看这篇文章的一般都已经装了。

2. 申请 GitHub 账号

博客远程创库域名服务器 等都和 GitHub 有关,这个必须要。

3. 安装 Node.js

前往 Node.js 官网 下载最新版本的安装包安装即可。

安装 Node.js

4. 安装 Hexo

打开终端,输入以下命令安装 Hexo ,安装时间可能有点长,要多等一下。

1
npm install hexo-cli -g

开始搭建博客

以上环境必须全部安装完成后,才能开始搭建 博客

1. 创建 GitHub 仓库

打开 GitHub 创建一个仓库,Repository namexxx.github.ioxxx 处就是你 GitHub 的用户名,也就是前面 Owner 处显示的名字,命名必须这样,不能更改,这个仓库的名字也会是 博客 搭建完成后的域名。

创建 GitHub 仓库

2. 初始化 Hexo 博客

打开终端,执行以下命令初始化 博客,初始化完成后,你的系统根目录中会多一个名为 Blog 的文件夹,Blog 也可以更改成自己喜欢的名字,初始化时间也比较久,耐心等一下。

1
hexo init Blog

3. 下载博客主题

  • 博客 初始化完成以后,会有一个自带的 博客主题 ,在 Blog / themes 文件夹下,但是比较丑,你可以下载一个自己喜欢的 博客主题

  • 这里是 博客主题下载地址 ,只需要到主题对应的 GitHub 仓库将主题 clone 下来即可,这是我使用的主题 下载地址

  • clone 完成后,将主题文件夹复制到 Blog 文件夹下的 themes 文件夹中。

4. 修改博客配置文件

  • 打开 Blog 文件夹下的 _config.yml 文件,修改其中的配置。

  • 下面把几个必须修改的配置列出来按需求修改即可,配置的键值之间一定要有空格,否则会报错,想了解更多配置点击 这里

1
2
3
4
5
6
7
8
9
10
11
title: Jonzzs //博客的标题
subtitle: 个人博客 //博客的副标题
description: 将来的你 一定会感激现在拼命的自己 //博客的描述
author: Jonzzs //博客作者的名字
language: zh-Hans //语言中文
theme: new-vno //刚刚复制到 themes 文件夹下的主题名称
deploy:
type: git //使用 Git 发布
repo: https://github.com/Jonzzs/Jonzzs.github.io.git //刚创建的 Github 仓库地址
  • 关于主题的配置在各自主题文件夹下的 _config.yml 文件中修改。

5. 写博客文章

  • 接下来可以开始写你的第一篇 博客 文章了,博客文章保存在 Blog / source / _posts 文件夹下,格式为 MarkDown 格式,也就是 .md 后缀的文件,编码格式为 UTF-8 ,否则会显示乱码。

例如: 创建一个名为 测试文章.md 的文件,内容为:

1
2
3
4
5
6
7
8
9
---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: 测试分类 //分类名称
tags: 测试标签 //标签名称
photos: http://jonzzs.cn/images/Jonzzs.jpg //需要展示的图片地址
---
> 这是一篇测试文章。

注意: 每一篇文章中,开头都必须有 --- 之间的那些参数,参数 : 后面必须有空格,文章的 标题 是必填的,否则文章不会显示在博客中,其他参数看自己的需求填写,categories 、tags 、photos 这三个参数可填写多个,填写多个时用 [ xx, xx ] 格式区分,例如:

1
2
3
4
5
6
7
---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: [测试分类1, 测试分类2, 测试分类3] //分类名称
tags: [测试标签1, 测试标签2, 测试标签3] //标签名称
photos: [http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg, http://jonzzs.cn/images/Jonzzs.jpg] //需要展示的图片地址
---
  • 如果要在博客的首页显示每篇文章的 摘要 ,只要在文章中加入以下 分隔符 即可,该 分隔符 之前的所有内容都会被自动截取为文章的 摘要
1
<!-- more -->

6. 本地测试博客

  • 打开终端 cdBlog 目录下,输入以下命令:
1
hexo s

发布博客

本地显示没问题以后,就可以将 博客 发布到 GitHub 服务器上了。

1. 安装自动部署发布插件

第一次配置时需要安装 hexo-deployer-git 自动部署发布工具,打开终端 cdBlog 目录下,执行以下命令安装。

1
npm install hexo-deployer-git --save

2. 发布博客到服务器

  • 打开终端 cdBlog 目录下,输入以下命令:
1
hexo clean && hexo g && hexo d
  • 如果这是你的第一次,终端可能会让你输入 Github 的邮箱和密码,输入完成后,就会把你的 博客 自动上传至 Github 了。

  • 以后在每一次添加新的 博客 文章或者改变配置时,执行一下这个命令就可以直接发布了。

  • 发布完成后,浏览器中输入之前创建的 Github 仓库名,就能访问到你搭建的 博客 了,我的是 Jonzzs.github.io


简单的 博客 搭建流程就是这样了,还有很多不错的 插件 ,比如 评论标签统计 等等,这些自己去研究并慢慢完善自己的博客吧。

将来的你,一定会感激现在拼命的自己,愿自己与读者的开发之路无限美好。

我的传送门: 博客简书微博GitHub

如果觉得我的文章对您有用,请随意打赏吧,您的支持将鼓励我继续创作!
0%