hexo 搭建自己的个人博客

大家好，我是Smooth，一名大二的前端爱好者，目标成为一名高级前端开发工程师

一文从头到尾教你通过 hexo 搭建自己的个人博客以及配置喜欢的主题

本篇文章将从头到尾详细地教你如何通过 hexo 搭建自己的个人博客，新手都能看懂的教程哈哈

前言

现在市面上的博客很多，如CSDN，博客园，简书等平台，可以直接在上面发表，用户交互做的好，写的文章百度也能搜索的到。缺点是比较不自由，会受到平台的各种限制和恶心的广告。

而自己购买域名和服务器，搭建博客的成本实在是太高了，不光是说这些购买成本，单单是花力气去自己搭这么一个网站，还要定期的维护它，对于我们大多数人来说，实在是没有这样的精力和时间。

那么就有第三种选择，直接在github page平台上托管我们的博客。这样就可以安心的来写作，又不需要定期维护，而且hexo作为一个快速简洁的博客框架，用它来搭建博客真的非常容易。

Hexo 简介

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

大家可以进入hexo官网进行详细查看，因为Hexo的创建者是台湾人，对中文的支持很友好，可以选择中文进行查看。

Hexo是基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

Hexo 搭建教程

本次教程主要分为8个部分，看完便可搭建自己喜欢的个人博客

1. 安装Git
2. 安装Node.js
3. 安装Hexo
4. GitHub创建个人仓库
5. 将hexo部署到GitHub
6. 设置个人域名
7. 更改主题（fluid）
8. 发布文章

安装 Git

• Windows：到 git官网下载并安装即可，下载后会有一个Git Bash的命令行工具，以后就用这个工具来使用git。
• Mac：MacPorts 或 安装程序。
• Linux (Ubuntu, Debian)：sudo apt-get install git-core
• Linux (Fedora, Red Hat, CentOS)：sudo yum install git-core

安装 NodeJs

Hexo是基于nodeJS编写的，所以需要安装一下nodeJs和里面的npm工具。

windows：官方安装，选择LTS版本就行。

Linux：

sudo apt-get install nodejs
sudo apt-get install npm

安装完后，打开命令行，输入以下两行检查安装是否成功

node -v
npm -v

顺便说一下，windows在git安装完后，就可以直接使用git bash来敲命令行了，不用自带的cmd，cmd有点难用。

安装 Hexo

安装好git之后，选择你想要安装hexo的地方（比如新建文件夹）

进入文件夹后，我们可以右击选择 Git Bash here 可以打开一个命令行窗口，输入：

$ npm install -g hexo-cli

输入 hexo -v 查看一下版本

至此环境准备完成，开始使用 hexo 搭个人博客

初始化 Hexo

$ hexo init 文件夹名
$ cd 文件夹名
$ npm install

会生成很多文件夹，看不懂没关系，知道怎么配置就可以了。

• node_modules: 依赖包
• public：存放生成的页面
• scaffolds：生成文章的一些模板
• source：用来存放你的文章
• themes：主题
• _config.yml: 博客的配置文件

接着输入以下指令进行本地启动查看，指令意思后面会讲

$ hexo clean
$ hexo g
$ hexo s

这三个命令非常重要，在下文hexo 部署到 github会讲到

接着，在浏览器中输入 localhost:4000 就可以看到生成的博客页面了

ctrl + c 可以关掉服务

创建 github 仓库

1. 首先，你先要有一个GitHub账户，去注册一个吧。

2. 注册完登录后，在GitHub.com中看到一个New repository，新建仓库。

3. 创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名。我github用户名是 zjc2782171149，所以我的叫 zjc2782171149.github.io

生成 SSH 添加到 github 仓库

由于后续都是通过 SSH 进行仓库代码的快速部署，所以这一步很有必要，如果之前有在你的电脑本地进行过你的 github 仓库的 SSH 绑定，那此步可跳过

回到你的git bash中，输入以下

git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。

ssh，简单来讲，就是一个秘钥，其中，id_rsa 是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub 是公共秘钥，可以随便给别人看。把这个公钥放在 GitHub 上，这样当你链接 GitHub 自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过 git 上传你的文件到 GitHub 上。

而后在 github 的 setting 中，找到 SSH keys 的设置选项，点击 New SSH key 把你的 id_rsa.pub 里面的信息复制进去。

之后，在 gitbash 中输入以下指令，查看是否 SSH 是否已绑定成功

ssh -T git@github.com

将 hexo 部署到 github

这一步，我们就可以将 hexo 和 github 关联起来，也就是将 hexo 生成的文章部署到 github 上，打开站点配置文件 _config.yml，翻到最后，进行如下修改即可，zjc2782171149 改为你的 github 账户用户名

deploy:
  type: git
  repo: git@github.com:zjc2782171149/zjc2782171149.github.io.git
  branch: master

修改完配置文件 _config.yml 并保存后，回到 gitbash

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

npm install hexo-deployer-git --save

然后进行部署

hexo clean
hexo generate
hexo deploy

hexo clean 清除了你之前生成的东西。

hexo generate 生成静态文章，可以用 hexo g 缩写

hexo deploy 部署文章，可以用hexo d缩写

注意deploy时可能要你输入 username 和 password，但设置了 SSH 一般不用。

得到下图就说明部署成功了，过一会儿就可以在 http://你的用户名.github.io 这个网站看到你的博客了！！

个人域名配置

现在你的个人网站的地址是 yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了。但是需要花钱购买域名，由于我是使用阿里云，所以以此作为示例。

注册一个阿里云账户,在阿里云上买一个域名，我买的是 zhangjiancong.top，各个后缀的价格不太一样，比如最广泛的.com就比较贵，看个人喜好咯。

你需要先去进行实名认证,然后在域名控制台中，看到你购买的域名。

来到域名解析页面，点击解析设置

点击添加记录

• 主机记录：我想在我域名 zhangjiancong.top 的基础上，配置成子域名 blog，所以主机记录一栏写个 blog，如果你想直接将你的域名作为解析，不填即可

• 记录值：改为你自己的用户名

• 其他跟我一样就行

点击确认后，域名 blog.zhangjiancong.top 到 zjc2782171149.github.io 的解析就完成了

接下来，还要进行 zjc2782171149.github.io到 blog.zhangjiancong.top 的解析

设置 githubPage 的解析

登录GitHub，进入之前创建的仓库，点击settings，设置Custom domain，输入你刚刚的域名

如果你 主机记录 留空，此处直接写你的域名即可，即 zhangjiancong.top

点击 Save，出现如上图的绿色成功标志即可

接着，你在你的博客文件 source 文件夹中创建一个名为CNAME文件，不用后缀，写上你的域名

更改 master 分支

由于域名默认展示你的 github 仓库的默认分支，仓库默认分支是 main，但

deploy:
  type: git
  repo: git@github.com:zjc2782171149/zjc2782171149.github.io.git
  branch: master

设置的是部署到 master 分支，所以需要修改仓库的默认分支为 master

点击编辑按钮，更改为 master 分支后，保存即可

最后

在 gitbash 中，输入

hexo clean
hexo g
hexo d

过不了多久，再打开你的浏览器，输入你自己的域名，就可以看到搭建的网站啦！

更改主题

这里我以 fluid 主题作为示例

来到主题的 github 仓库，下载最新的压缩包

下载完后，将压缩包解压到你博客项目的 themes 文件夹下，并将解压出来文件夹更名为 fluid

然后打开根目录的 _config.yml 文件，拉到最下面找到 theme 属性，修改为 fluid

同时，找到文件上方的 language 属性，修改为 zh-CN 即可

然后，输入以下三个指令进行重新部署，过一会儿即可看到主题发生改变

hexo clean
hexo g
hexo d

发布文章

发布新文章

hexo new newpapername

然后在source/_post中打开markdown文件，就可以开始编辑了。当你写完的时候，再

hexo clean
hexo g
hexo d

就可以通过域名看到更新了。

每次更新完文章或配置文件，都要输入以上三个指令进行重新部署，而不要缺某条指令，当然也可以输入简化版指令，如下

$ hexo clean
$ hexo g --d

如果有小伙伴觉得每次重新部署都要输入以上指令麻烦，可在空余功夫研究下 GitHub page 的自动部署功能，此文便不展开了

以上便是这篇文章的全部内容啦

最后

最后，我叫Smooth，在今年2022年我也会尽自己所能书写更多前端教程~

掘金：https://juejin.cn/user/1302297507801358

CSDN：https://i.csdn.net/#/user-center/profile

最近发文计划为 Webpack 以及 性能优化 知识体系

同时也可扫码关注我的公众号，公众号同步更新