hexo+github搭建个人博客

最新推荐文章于 2025-04-17 22:29:34 发布

Thread刚

最新推荐文章于 2025-04-17 22:29:34 发布

阅读量257

点赞数

分类专栏：博客

本文链接：https://blog.youkuaiyun.com/weixin_40098405/article/details/103605656

版权

博客专栏收录该内容

2 篇文章

订阅专栏

hexo+github搭建个人博客

前言

这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。

下面就开始吧~

环境准备

准备 node 和 git 环境，首先，安装 NodeJS，因为 Hexo 是基于 Node.js 驱动的一款博客框架，相比起前面提到过的 Jekyll 框架更快更简洁，因为天*朝网络被墙的原因尝试过安装 Jekyll 失败而放弃了。然后，安装 git，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 Git 教程。npm的安装（由于新版的NodeJS已经集成了npm，所以nodejs安装完成时npm也一并安装好了。）

两个工具不同的平台安装方法有所不一样，可自行了解按步骤安装，这里不详述了。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。

git version
node -v
npm -v

huanggang@DESKTOP-C1VUL6T MINGW64 /c/Program Files/myblog/blog$ git version
git version 2.13.0.windows.1
huanggang@DESKTOP-C1VUL6T MINGW64 /c/Program Files/myblog/blog$ node -v
v12.13.0
huanggang@DESKTOP-C1VUL6T MINGW64 /c/Program Files/myblog/blog$ npm -v
6.12.0

安装Hexo

如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 Hexo 的详细文档。在命令行输入执行以下命令：（首先得进入Git Bash）

npm install -g hexo-cli

安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。

hexo init blog    //自动创建blog文件夹并初始化
cd blog
npm install

新建完成后，指定文件夹的目录如下：

.
├── _config.yml # 网站的配置信息，您可以在此配置大部分的参数。 
├── package.json
├── scaffolds # 模版文件夹
├── source  # 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹
|   ├── _drafts # 草稿文件
|   └── _posts # 文章Markdowm文件 
└── themes  # 主题文件夹

好了，如果上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 http://localhost:4000 回车就可以预览效果了。

hexo s

以下是我本地的预览效果，更换了 next 主题的，默认不是这个主题。

至此，你本地的博客就已经搭建成功，接下来就是部署到 Github Page 了。

注册 Github

首先如果你还没有 Github 账号的先注册一个，具体过程如下

点击 Start project 或者下面的 new repository 创建一个新的仓库

注意点来了，Github 仅能使用一个同名仓库的代码托管一个静态站点，这个网上很多教程没说到的。

然后打开仓库创建一个 index.html 文件，并随意先写点内容，比如 Hello World.

这个时候打开 http://你的用户名.github.io 就可以看到你的站点啦，是不是很简单！index.html 内容只是暂时的预览效果，后面把 Hexo 的文件部署上去就可以在 http://你的用户名.github.io 看到你自己的博客啦！比如我的就是 http://webw3c.github.io 了。

配置 SSH key

要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。

打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。

cat ~/.ssh/id_rsa.pub

如果之前没有创建，则执行以下命令全局配置一下本地账户：

git config --global user.name "用户名"  //输入注册时的username
git config --global user.email "邮箱地址" //填写注册邮箱

然后开始生成密钥 SSH key

ssh-keygen -t rsa -C '上面的邮箱' //填写注册邮箱

按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key

（此图引用自码云）

首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You've successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。

ssh -T git@github.com

到这还没完，还要登录 Github 上添加刚刚生成的SSH key，按以下步骤添加：

创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。

部署到 Github

此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。你也可以查看官网的部署教程。先不着急，部署之前还需要修改配置和安装部署插件。第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：

第二：要安装一个部署插件 hexo-deployer-git。

npm install hexo-deployer-git --save

最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写：

hexo g -d

稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！

开始写作

博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 hexo 官网。新建文章，输入以下命令即可

hexo new '文章标题'

执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。

在 Markdown 文章里面输入你的文章内容

再执行一下以下命令

hexo g
hexo s   //启动服务预览，启动后可以在浏览器中输入 localhost:4000 进行访问

就可以看到你的文章在博客显示了，以下就是刚刚

最后，只要部署到你的 Github 上就可以了！

hexo clean
hexo g -d    //将本地代码部署到github命令

部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

在浏览器中输入https://你的用户名.github.io 就可以看到你的网站了

下一篇讲解博客主题的使用~