0%

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

发表于 更新于 分类于

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

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

我的博客

我的博客

安装搭建博客必须的环境

1. 安装 Git

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

2. 申请 GitHub 账号

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

3. 安装 Node.js

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

安装 Node.js

4. 安装 Hexo

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

npm install hexo-cli -g

如果出现以下报错：

Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/hexo-cli'

执行以下命令后，重新安装即可：

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share} #修改权限范围

开始搭建博客

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

1. 创建 GitHub 仓库

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

创建 GitHub 仓库

2. 初始化 Hexo 博客

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

hexo init Blog

3. 下载博客主题

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

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

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

4. 修改博客配置文件

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

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

title: Karise  //博客的标题
subtitle: 个人博客 //博客的副标题
description: 将来的你 一定会感激现在拼命的自己 //博客的描述
author: Karise //博客作者的名字
language: zh-Hans //语言中文

theme: new-vno //刚刚复制到 themes 文件夹下的主题名称

deploy:
  type: git //使用 Git 发布
  repo: https://github.com/karise-guo/karise.github.io.git //刚创建的 Github 仓库地址
  • 关于主题的配置在各自主题文件夹下的 _config.yml 文件中修改。

5. 写博客文章

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

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

---
title: 测试文章 //文章的标题
date: 2017-05-03 17:47 //文章的发布时间
categories: 测试分类 //分类名称
tags: 测试标签 //标签名称
photos: https://karise.cn/images/karise.jpg //需要展示的图片地址
---

 > 这是一篇测试文章。

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

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

6. 本地测试博客

  • 打开终端 cd 到 Blog 目录下，输入以下命令：
hexo s

发布博客

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

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

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

npm install hexo-deployer-git --save

2. 发布博客到服务器

  • 打开终端 cd 到 Blog 目录下，输入以下命令：
hexo clean && hexo g && hexo d

  • 如果这是你的第一次，终端可能会让你输入 Github 的邮箱和密码，输入完成后，就会把你的 博客 自动上传至 Github 了。

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

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

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