手把手教你从零开始搭建个人博客，20分钟上手

• 一、前言

• 二、Hexo基本介绍

• 三、Hexo+Github搭建博客网站流程

• 四、开始动手动脑

• 4.1 基础准备

• 4.2 安装Hexo

• 4.3 初始化一个Hexo Blog

• 4.4 Hexo基本命令介绍

• 4.5 Hexo基本配置介绍修改

• 4.6 将Hexo博客部署到GitHub

• 4.7 设置应用自己的域名

• 五、下集预告

一、前言

大家好，我是爱思思爱猫爱技术的老表，最近一直在研究个人博客搭建，目前正在进行的有Django个人博客搭建系列，最近了解到还有很多现成的博客搭建框架，准备后面依次给大家分享下。

本文是基于Hexo框架来构建个人博客的，整个过程十分简单，如果顺利的话，可能只需要10-20分钟就可以完美构建部署好一个专属于你的个人博客了，记得点赞～

二、Hexo基本介绍

Hexo 是一个快速、简单且功能强大的博客框架。你用Markdown（或其他标记语言）写帖子，Hexo 会在几秒钟内生成带有漂亮主题的静态文件。

三、Hexo+Github搭建博客网站流程

四、开始动手动脑

首先我们进入Hexo的官网：https://hexo.io/

就可以看到对于Hexo的详细介绍，直接下滑，然后点击Get Started，即可进入Hexo使用介绍文档，也可以直接访问：https://hexo.io/docs/ 进入。

4.1 基础准备

在正式开始前，确保你已经准备好了：
1、一个GitHub账号，可以直接去官网注册：https://github.com/
2、安装好了Git、Node.js

Git安装方法很多，最简单的是直接官网下载软件包，然后安装（Mac和Windows及其他版本都有），

https://git-scm.com/downloads

Mac电脑还可以直接利用brew install git 进行安装（默认应该自带git），或者yum、apt-get等包管理工具安装。

Node.js也可以直接去官网下载对应系统安装包，然后一步步安装即可。

https://nodejs.org/zh-cn/download/

下载好后直接点击软件包，默认会给我们安装好Node.js和npm（Node.js的包管理工具）。

Windows系统可能需要自己设置环境变量，将对应安装目录添加到系统环境变量即可，浏览器搜索下对应方法即可。

查看下Git、Node.js版本，确保安装无误。

git --version
node -v  
npm -v

4.2 安装Hexo

首先我们需要新建一个项目目录，以我为例：我会在桌面的Project目录下新建一个HexoBlog文件夹用于存放改项目相关文件。

cd Desktop/Project/
mkdir HexoBlog&&cd HexoBlog

这个时候如果直接运行下面语句安装Hexo，你可能会遇到rollbackFailedOptional。

npm install -g hexo-cli

这是因为网络问题（npm的服务器位于国外下载慢），可以使用cnpm（淘宝团队做的国内镜像）的获取镜像或者直接修改npm的资源获取地址为国内的。

# 安装cnmp
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 直接修改npm资源获取地址（推荐）
npm config set registry http://registry.npm.taobao.org

另外我自己还遇到了文件写入权限问题，直接修改目录文件权限即可，如：

chmod -R 777 /usr/local/lib

解决上面问题后，我们在安装就可以成功啦～（如下截图所示）

4.3 初始化一个Hexo Blog

前面已经准备好了所有相关环境，接下来我们就正式来初始化一个Hexo博客吧～初始化的命令格式为hexo init <项目名称>，这里我们暂且叫做blog。

hexo init blog

成功初始化后，会在当前文件夹下生成一个新的文件夹blog，目录结构如下：

├── _config.landscape.yml：主题配置文件，如果
├── _config.yml：站点配置文件，对站点进行配置。
├── node_modules：用来存储已安装的各类依赖包。
├── package-lock.json：包版本依赖锁文件。
├── package.json：应用数据，Hexo的版本以及相关依赖包的版本等。
├── scaffolds：博客模版文件夹，包含page.md，post.md，draft.md三种。
├── source：资源文件夹，存放静态资源如博客md文件、图片等。
└── themes：主题文件夹，Hexo通过将网站内容与主题组合来生成静态网站。

初始化项目后，我们只需在本地执行下面命令即可在本地进行预览，

cd blog
hexo s

首先我们需要进入到新建的项目目录下，然后执行hexo s即可启动项目，然后我们访问http://localhost:4000/即可查看网站啦～目前是默认的主题，另外还有一篇默认的博客Hello World。

4.4 Hexo基本命令介绍

• 本地启动项目，s表示server

hexo s

• 创建一个新的博客，n表示new

hexo n [layout]