基于Hexo搭建个人博客

本学习笔记基于b站up主objtube的卢克儿的教程《【干货】Luke教你20分钟快速搭建个人博客系列(hexo篇)》

欢迎大家多多去支持、三连哦~

一、Hexo简介

1. 框架比较

	Hexo	VuePress	Gatsby
难易度	★	★★	★★★
技术栈	ejs/stylus	vue/stylus	react/graphOL
主题丰富度	★★★	★	★★
插件	★★★	★	★★★
功能性	★	★★	★★★
Github stars	30.8k	16.9k	45.6k

2. 使用建议

新手 → Hexo

Vue开发者 → VuePress

React开发者 → Gatsby

喜欢自己造轮子 → 不适用框架，从0搭建

3. 使用Hexo前需要的技能储备

HTML & CSS & JS

Node & NPM

Git & Github

二、开始搭建

1. 下载相关软件

请确保电脑里安装了VSCode、Node.js

下载VSCode

下载Node.js

2. 安装原生Hexo

按win+R，输入cmd，确定，打开控制台。

依次输入代码并运行：

npm install -g hexo-cli
hexo init hexo-blog
cd hexo-blog
code .

此时，VSCode自动打开，在 查看 - 调试控制台 - 终端 中输入hexo server运行该项目。

hexo会默认使用4000端口，所以我们可以使用localhost:4000来访问hexo本地项目。

此时，博客使用的是默认主题landscape，后面我们可以更换好看的主题。

根目录下的_config.yml文件是我们经常要修改的，通过修改里面的参数，我们可以更改博客的一些默认配置。

如修改博客的标题、作者、语言等：

title: ObjTube
author: luke
language: zh-CN

3. 更换主题

Hexo官网上有提供主题，但没办法看到主题的热度，不知道哪个主题比较受欢迎。

另一个方法是在github上搜索“hexo-theme”，选择“Most Stars”，就可以看到比较受欢迎的主题。

以主题next为例，首先，回到VSCode调试控制台，将该主题克隆到theme目录下：

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

打开theme/next文件夹，删除里面的.git文件夹，因为要把这个主题和博客合并，统一由一个git管理，再把默认的主题landscape文件夹删除。

在根目录下的_config.yml文件中，把原来的landscape主题修改为next：

## Themes: https://hexo.io/themes/
theme: next

回到VSCode控制台，输入hexo server运行项目，在localhost:4000里就可以看到，换了主题的博客页面。

4. 部署到github

此时，博客只能在本地被访问，我们需要将网站部署到github上。

首先要注册一个github账户，这里不多作解释。

部署到github有两种方式：

方式一：https://[username].github.io，仓库名必须为[username].github.io，打包产物提交到master分支。方式一适合部署博客。

方式二：https://[username].github.io/[repo]，仓库名可以自定义，打包产物提交到gh-pages分支。方式二适合为自己的作品做demo页面。

这里采用方式一。

在github中新建仓库[username].github.io（因为我的github用户名是chienchousu，所以新建的仓库名必须是chienchousu.github.io，后面也会使用这个仓库名，其它用户名把username换掉即可），在VSCode中给当前仓库添加一个远程的github地址，并安装hexo-deployer-git依赖：

git init
git remote add origin https://github.com/ChienchouSu/chienchousu.github.io.git
yarn add hexo-deployer-git

安装完毕后，在根目录下的_config.yml文件中修改以下属性：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: https://github.com/ChienchouSu/chienchousu.github.io
  branch: master

接着在控制台输入npm run deploy来部署代码。

此时，我们打开仓库，就可以看到博客目录已经部署到github上了。

点击工具栏上的“Settings”，滑动到”GitHub Pages“部分，可以看到博客已经发布到网站https://chienchousu.github.io/上，点击该链接，就可以看到博客页面。

5. 自动化部署