手把手教你使用Hexo零成本搭建个人博客

前言

作为前端开发者，大部分人都搞过自己的博客网站吧。不会吧，不会吧，你不会还没搞过吧？不管是为了方便工作还是作为记录自己学习以及遇到的问题，都可以尝试搭建一个，刚开始可能会觉得很有成就感，增加学习的动力。如果你还没搭建过或想尝试使用这种方式搭建，那就跟着我学习吧。

后面还使用过wordpress、vuepress等搭建过，这次就先分享2017年时自己搭建的第一个博客系统吧，本系统是基于github+ hexo，之前搭建是为了方便记录自己在学习中遇到的问题，刚开始做的时候玩了玩，后面这个系统就没更新了。

不需要服务器，使用Hexo框架 + Yelee主题 + Github，零成本搭建个人博客。

安装 hexo

hexo 是需要 nodejs 的环境的，它的工作原理是，通过脚本和渲染引擎等等将你的 markdown 文件生成静态 html 文件，输出的是一个纯静态的博客。当然相对于动态博客来说，他有很多不足，但是仔细调研下来，发现我的需求基本都是满足的，没有什么特别需求完全可以用它。

nodejs 推荐安装最新稳定版 16.x

Hexo 安装最新版 6.x

安装 Node

Windows 系统的同学可以访问 NodeJs 中文网下载安装包直接安装：http://nodejs.cn/download/

Mac OSX 系统的同学推荐安装 nvm，通过 nvm 来管理 nodejs 版本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

nvm install 16.15.1

安装好之后 check 一下

> node -v
v16.15.1
>npm -v
8.11.0

安装 Hexo CLI

直接使用 npm 安装

npm install -g hexo-cli

版本限制：

Hexo 版本	最低兼容 Node.js 版本
6.0+	12.13.0
5.0+	10.13.0
4.1 - 4.2	8.10
4.0	8.6
3.3 - 3.9	6.9
3.2 - 3.3	0.12
3.0 - 3.1	0.10 or iojs
0.0.1 - 2.8	0.10

Hello World

使用命令初始化你的博客

hexo init myblog

预览博客

cd myblog

npm i

hexo s

然后访问 localhost:4000就能看到你的博客了

绑定github项目

这里你要先去注册一个github帐号，然后新建一个项目，具体操作方法，请自行百度：github 官方网站上有操作教程，这里就不贴了！！！

按照要求建好目录之后，在 _config.yml 下配置

deploy:
    type: git
    repo: <github项目的网址>
    branch: master

选择主题

这里选择一个Next主题, 的确是不错的一个主题，而且文档解释的也很详细。

github: https://github.com/iissnan/hexo-theme-next

start: http://theme-next.iissnan.com/getting-started.html

部署

npm install hexo-deployer-git --save # 安装部署工具

cd <blog_root>  #  切换到博客的根目录
hexo clean # 清除缓存
hexo g     # 生成文件
hexo d     # 部署，该过程需要输入github用户名和密码，是用户名，不是邮箱！

新建文章

hexo new <title>

目录解释

scaffolds

页面模板文件夹，默认包含了 draft、page、和 post 三种类型，可以理解为 PPT 母版。

source

资源文件夹，最常用的文件夹，所有的博客、页面、图片、自定义脚本等都可以放到次文件夹里。

文章都存储在 source/_posts 目录下，创建好博客以后可以使用 Typora 编写博客。

themes

存放主题的文件夹，下载的主题可以存放到里面，不过 hexo>= 5.0 支持通过 npm 直接安装主题，就不用手动下载了。

public

发布后的文件存放命令

配置

配置都在 _config,yml 文件里，主要配置如下：

title: 我的博客 # 博客 title
subtitle: ''
description: '我的技术博客' # 博客描述 用于 SEO
keywords: 个人博客,博客,前端技术 # 博客关键字用于 SEO
author: xiaoqi # 作者，显示在文章页面
language: zh-CN
timezone: 'Asia/Shanghai'

url: http://blog.qdabc.cn # 博客域名
root: / # 博客路径，放在子目录可以设置此路径 

# 其他设置暂时不用变更

常用命令

hexo new post hexo # 新建博客

hexo new post --path hexo/start # 新建博客到指定目录

hexo s # 预览博客

hexo g # 生成博客

hexo deploy # 发布博客

hexo clean # 清理

结束

如果你还有什么问题，请在评论区留言，一起交流学习