手把手教你使用 Hexo+Github 搭建个人博客!

搭建自己的技术博客有很多种技术方案,我知道的有 Hexo, jeklly, vuepress 等。在此我通过使用 Hexo 并结合 Github 手把手教大家搭建自己的个人博客。让我们一起来看看吧!

1. Hexo简介
Hexo 是一款基于 Node.js 的静态博客框架。Hexo 使用 Markdown 解析文章,用户在本地安装Hexo并进行写作,通过一条命令,Hexo即可利用靓丽的主题自动生成静态网页。
参考链接:
Hexo-Github地址
Hexo帮助文档

2. Hexo安装
实验环境:Windows 10 64-bit。
安装 Hexo 相当简单,只需要先安装下列应用程序即可:

  • Node.js (版本需不低于 8.10,建议使用 Node.js 10.0 及以上版本)
  • Git

如果你的电脑中尚未安装所需要的程序,请根据以下安装指示完成安装。
2.1 安装 Node.js
Node.js 下载地址
在这里插入图片描述
下载稳定版本就可以。下载完成无特殊要求默认安装即可,一般不会出现问题。

2.2 安装 Git
Git 下载地址
在这里插入图片描述
下载完成无特殊要求默认安装即可,一般不会出现问题。这里有一点需要注意的是,在下图这一步骤如果选择第一项,则安装完成后会出现:
’git’不是内部或外部命令,也不是可运行的程序或批处理文件错误,此时需要手动添加相关路径到系统环境变量中即可解决。

具体为:
C:\XXX\Git\bin
C:\XXX\Git\mingw64\libexec\git-core

在这里插入图片描述
检查 Node 跟 Git 版本:

$ node -v
v10.20.1

$ git --version
git version 2.25.0.windows.1

2.3 安装 Hexo
Git 和 Node.js 都安装好后,接下来在本地安装 Hexo,为了避免安装失败,需要切换到阿里云的 NPM 镜像:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

创建一个用于存放博客文件的文件夹,如 /hexo/blog,然后进入 blog 文件夹全局安装并初始化 Hexo,右键选择 Git Bash Here ,弹出Git Bash窗口。执行命令:

$ cnpm install -g hexo-cli
$ hexo init

安装完成后,指定文件夹的目录如下:

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中_config.yml文件用于存放网站的配置信息,你可以在此配置大部分的参数;scaffolds是存放模板的文件夹,当新建文章时,Hexo会根据scaffold来建立文件;source是资源文件夹,用于存放用户资源,themes是主题文件夹,存放博客主题,Hexo 会根据主题来生成静态页面。

在Git Bash终端执行命令,生成静态博客文件:

$ hexo g
$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

Hexo 将 source 文件夹中的 Markdown 和 HTML 文件解析并放到 public 文件夹中,public 文件夹用于存放静态博客文件,相当于网站根目录。至此博客雏形基本完成,在浏览器中访问http://localhost:4000/,如图所示:
在这里插入图片描述
3. 将 Hexo 部署到 GitHub
3.1 新建 Git 仓库
仓库名必须为 username.github.io 格式,其中 username 是你 GitHub 的用户名。
在这里插入图片描述
按照下图找到自己 Github 的用户名:
在这里插入图片描述
3.2 部署
快速在项目根目录下找到 _config.yml,找到 deploy 字段并填写完整。

deploy:
  type: git
  repo: 你的仓库地址
  branch: master

这里注意,为了避免出现错误,我把 _config.yml 中的 Git 仓库链接改成了 SSH 链接,然后又给 Git 账户增加了 ssh key

具体方法如下:

要使用自动部署首先要安装 hexo-deployer-git 工具:

$ npm install hexo-deployer-git --save

配置_config.yml中的deploy:

deploy:
 type: git
 repo: [email protected]:your_github_user_name/your_github_user_name.github.io.git
 branch: master

注意:这里的 repo 需要设置成你 Git 仓库的 SSH 链接。

命令行中输入:

$ ssh-keygen -t rsa -C youremail(换成你的邮箱地址)

生成 ssh key。接着出现的一些步骤都可以回车跳过,如下图:
在这里插入图片描述
这样在 C/Users/Administrator/.ssh/id_rsa.pub 文件中就生成了公钥。打开 id_rsa.pub 文件将一整串公钥拷贝下来,进入你的 Github 账户设置,在 ssh and GPG keys 中新增一个 ssh key 配置 Github 账户的 ssh key,如下图:
在这里插入图片描述
把刚刚拷贝出来的公钥粘贴到 key 中,title 放空就好,如下图:
在这里插入图片描述
验证 ssh key:

$ ssh -T [email protected]

出现下面的语句说明你的 ssh key 已经配置好了:

Hi XXX! You've successfully authenticated, but GitHub does not provide shell access.

初始化本地 Git 仓库,设置 Git 的 user name 和 email:

$ git config --global user.name "XXX"(换成你的用户名)
$ git config --global user.email "XXX"(换成你的邮箱地址)

在本地的 hexo init 生成的文件夹中初始化 Git 仓库:

$ git init

将本地仓库和远程仓库连接(这一步骤可以不做):

$ git remote add origin [email protected]:your_github_user_name/your_github_user_name.github.io.git(远程仓库ssh地址) 

做完以上这些步骤,说明你的仓库可以使用 SSH 方式来上传下载代码,也不需要输入用户名和密码了。最后进行网站部署,如下:

$ hexo clean  //清除缓存文件db.json和已生成的静态文件public
$ hexo g   //生成网站静态文件到默认设置的public文件夹
$ hexo d   //部署网站到设定的仓库

部署成功后会提示:
在这里插入图片描述
这样你的 Hexo 博客就部署到了 Github page 上了!

至此,使用 Hexo+Github 搭建个人博客的整个过程及问题解决方法到此结束,关于对个人博客进行美化、设计等内容我将会再写一篇CSDN博客予以说明,各位小伙伴如果遇到问题请在评论区留言,我会及时回复帮助你解决!

猜你喜欢

转载自blog.csdn.net/Zserendipity/article/details/106076050