基于hexo的个人博客搭建（无坑版，超详细）

最新推荐文章于 2024-06-28 11:26:33 发布

ItDaChuang

最新推荐文章于 2024-06-28 11:26:33 发布

阅读量3.4k

点赞数 3

分类专栏：工具技巧文章标签： Hexo 静态博客 GitHub Markdown 主题定制

本文链接：https://blog.csdn.net/ItDaChuang/article/details/111261426

版权

工具技巧专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基于 hexo 的个人博客搭建

一、个人博客搭建的几种方法

1.1 动态博客的搭建

自己动手写前端后端搭建动态博客。（比较困难）
通过wordpress动态博客框架系统。（wordpress网址）

1.2 静态博客的框架

hexo框架：快速、简介且高效的博客框架。比较火（hexo）
jekyllrb框架：将纯文本转换为静态网站和博客。（jekyllrb）
gohugo框架：基于go语言的静态博客框架。（gohugo）
vuepress框架：Vue供电的静态站点生成器。（veepress）

二、个人博客搭建教程-----hexo

由于 hexo 框架比较火，网上的教程也比较全，接下来就以 hexo 的搭建步骤来演示。系统环境是MacOs，Windown系统大同小异。

2.1 安装Node.js （直接去官网下载安装即可node.js）

安装的时候会安装Node.js本身和npm包管理器。都是后序需要用到的工具。
在终端中输入node -v 和 npm -v 查看node.js 和 npm 的版本，如果安装成功则会显示下图类似结果。

node -v
npm -v

2.2 安装 hexo 博客框架

利用npm包管理器来安装hexo框架，由于国内镜像源的速度很慢，一般会先利用npm输入下行命令安装一个 cnpm 指向淘宝的镜像源。在输入cnpm检查是否安装成功，出现下图使用方法和帮助文档则表示安装成功。
```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

利用 cnpm 全局安装 hexo 博客框架。输入下列命令安装。
```
cnpm install -g hexo-cli
```
用 hexo -v 命令检验 hexo 是否安装成功，出现下面相关信息则表示安装成功，可以看得出hexo 框架是基于 nodejs 的。

2.3 开始使用 hexo 搭建博客

新建一个文件夹，用于存放博客的相关文件，出了问题直接删掉这个文件夹即可，重来。我是在我的用户【文稿】文件夹下建了一个【Blog】文件夹。

在终端中到新建的【Blog】文件夹目录下，把该文件夹初始化为博客文件夹，用下列命令。
```
sudo hexo init
```

初始化这个需要些时间…
初始化成功截图如下：

初试化成功后会在博客目录【Blog】下生成一系列文件，如下图。

启动博客，初始化好博客之后就非常好启动博客，用 hexo s 命令来启动hexo 服务 s 表示 server。

第一次启动可能会出错，大部分都是权限的问题，只要修改所有文件和文件夹的权限即可。当启动之后就可以去浏览器输入 http://localhost:4000 访问到我们的博客。是默认主题的。默认给你生成了一篇博文hello-world。

2.4 第一篇自己的博客

新建markdown文件
自动生成的博文在【Blog】->【source】->【_posts】文件夹下，以后我们写自己的博文也是放在这个文件夹，下面我们来自己创建第一篇博文。
可以在【_posts】问价夹下直接新建markdown文件，也可用下面命令在终端中新建。

hexo new "博文的题目"

【注意】：

在上述新建博客的过程中也可能会出错，也是因为权限问题，需要修改【_posts】的权限才能新建成功。
新建的markdown文件有一个模板，放在【Blog】->【scaffolds】的 post.md ，其他两个文件一个是草稿，一个也不太清楚…。

生成博客相关文件
要在【Blog】目录下操作。生成前先清理下文件：
```
hexo clean
```
再根据md文件生成相应的网页文件用下面命令
```
hexo g
```

再重新用hexo s 命令启动hexo 在http://localhost:4000就可以看到我们自己写的第一篇博客啦！博客生成成功

到此，hexo博客的搭建就完成了。但是它只能在本地打开，接下来我们需要把它部署到远端去，这里推荐的部署方式是把它部署到github上去。

2.5 把博客部署到github上公开使用

先要在github上创建一个跟自己用户名相同的后缀为.github.io的仓库，注意这里必须要与用户名相同。

接着需要在【Blog】目录下的终端里裝一个 Git 的部署插件。用下面命令安装
```
cnpm install --save hexo-deployer-git
```
配置【Blog】文件夹下的 _config.yml 文件

在# Deployment部分添加图示里面的代码，类型type为git,地址repo为刚刚新建的GitHub仓库的地址，如图14。branch为master。
将 hexo 部署到远端 GitHub 上
```
hexo d
```

中间会要求输入自己的GitHub账号密码，上述都没有问题就可以部署成功。此时，GitHub刚刚新建的仓库中会多出 hexo 博客的相文件。

到这里，你就可以用 https://ganming1.github.io 来访问自己的个人网站博客啦。

2.6 更换博客主题

要更改主题，首先要下载主题
可以在【Blog】目录的终端下用 git 下载
```
git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
```

https://github.com/litten/hexo-theme-yilia.git 是你想下载的主题远端地址。
themes/yilia 是你下载主题后保存的地址。

下载好主题后会在【Blog】->【themes】文件里多出我们下载的主题。

下载好主题后，可以在【Blog】目录下的 _config.yml 文件中修改使用的主题。

接下来 hexo clean 、hexo g、hexo s、hexo d 清除，生成，开启，推送一系列之前的动作就可以把新主题推送到远端的GitHub个人网站上去。
本人尝试过很多主题，个人推荐 matery 主题，大概样子可以参考我的个人网页：http://ganming1.github.io 更多主题个性化设置欢迎留言讨论。