hexo+github搭建个人博客

置顶 | 发表于 更新于 分类于 阅读次数： Waline： 本文字数： 2.2k

使用hexo+github的优点

  1. 不需要服务器，github提供免费的托管服务。

  2. 不需要域名，gitHub提供了免费的.io域名。

  3. 不用自己写xml，hexo提供了很多开源的博客模板。

  4. 便于维护和更新。

    下面进入正题

1 准备工作

1.1 Github账号

 需要有一个Github账号，没有的话到Github官网注册一个，方法很简单，不懂的话可以参考Github申请账号。

1.2安装Git

 在自己电脑上安装好Git，hexo部署到Github时要用，可以在网上找个教程，或者参考Git安装(Windows)。

1.3安装NodeJS

 在自己电脑上安装好NodeJS，Hexo是基于NodeJS编写的，所以需要安装NodeJS和npm工具。网上找篇教程或者参考 NodeJS安装及配置(Windows)

2 创建仓库

 在Github上创建一个新的代码仓库用于保存我们的网页。

 点击右上角头像，然后点击Your respositories，进入仓库页面。

github主页面

点击New按钮，进入仓库创建页面。

个人仓库

填写仓库名，格式必须为<用户名>.github.io,例如：tqb-web.github.io可以选择Add a README file，这是添加对你项目的描述的文档。

创建项目

在Github Page中找到我们主页的地址为https://tqb-web.github.io/，以后就可以同个这个网址来访问我们的博客，由于博客还没有搭建完成，所以现在这个网址还不能正常使用。

查看博客网址

3 安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入 官网

安装Hexo

1
npm install -g hexo-cli

查看版本

1
hexo -v

创建一个项目hexo-blog并初始化(逐行执行指令)

1
2
3
hexo init hexo-blog
cd hexo-blog
npm install

本地启动

1
2
3
4
hexo clean
hexo g
hexo server
或者直接 hexo cl&&hexo g&&hexo s

浏览器访问 http://localhost:4000，页面默认主图风格如下

hexo默认主题

4 发布到Github Pages

4.1 生成SSH添加到Github

回到你的git bash中

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

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

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

1
2
git config user.name
git config user.email

然后创建SSH，一路回车

1
ssh-keygen -t rsa -C "youremail"

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

ssh密钥

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

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

添加密钥

在Git Bash中检查是否成功

1
ssh -T git@github.com

4.2 将hexo部署到GitHub

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

1
2
3
4
deploy:
    type: git
    repository: https://github.com/YourgithubName/YourgithubName.github.io.git
    branch: main

提示：若上述方法不成功，可将

1
repository: https://github.com/YourgithubName/YourgithubName.github.io.git

改为

1
repository: git@github.com:YourgithubName/YourgithubName.github.io.git

其实上述地址就是你的博客仓库地址，可自行在自己的GitHub项目中查看！

如下图，到时候直接复制到repository: 后即可(注意冒号后面一定要有空格，否则不会成功)

仓库地址

配置完成后，需要安装deploy-git,也就是部署的名的命令，这样才能够将博客部署到Github。

1
npm install hexo-deployer-git --save

最后

1
2
hexo deploy
或者hexo d

如果看到下图显示的东西，就说明成功啦！

然后我们就可以用之前提到的地址来访问我们的博客啦！！！

------ 本文结束 感谢您的阅读------