搭建Hexo博客并部署到Github

介绍

Hexo

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

Github

GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。

GitHub于2008年4月10日正式上线,除了Git代码仓库托管及基本的 Web管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。目前,其注册用户已经超过350万,托管版本数量也是非常之多,其中不乏知名开源项目 jQuery、python等。

准备工作

注:本文以Windows系统为例

安装Node.js

下载Node.js

Node.js 官网:https://nodejs.org/en/

Node.js 中文网:http://nodejs.cn/download/

Windows 安装包(32位):https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-x86.msi

Windows 安装包(64位):https://npm.taobao.org/mirrors/node/v10.16.0/node-v10.16.0-x64.msi

安装Node.js

下载完安装包后,根据安装程序提示完成安装即可。

不过在Custom Setup这一步记得选 Add to PATH ,这样就不用自己去配置环境变量了。

检查Node.js是否安装成功

打开CMD窗口,输入node -v。如果可以看到版本号,Node.js就安装成功了。

安装Git

下载Git

Git 官网:https://git-scm.com/

Windows 安装包(32位):https://github.com/git-for-windows/git/releases/download/v2.22.0.windows.1/Git-2.22.0-32-bit.exe

Windows 安装包(64位):https://github.com/git-for-windows/git/releases/download/v2.22.0.windows.1/Git-2.22.0-64-bit.exe

安装Git

Git 的安装步骤与Node.js的安装步骤相似,根据安装程序的提示完成安装即可。

检查Git是否安装成功

方法一:打开CMD窗口,输入git --version。如果可以看到版本号,Git就安装成功了。

方法二:鼠标右击任何文件夹,出现两个与Git有关的选项,如下图。

两个与Git有关的选项

简单的设置

全局设置用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

开始搭建

第一步:新建一个存放博客文件的目录

第二步:鼠标右击目录,选择"Git Bash Here"

第三步:输入安装Hexo的命令

npm install hexo-cli -g
hexo init
npm install

以上命令完成后,目录中会出现博客文件。如下图所示。

博客文件

node_modules npm 文件缓存目录
scaffolds 文夹件下存放的是文章、页面模版
scource 文夹件下存放的是我们的资源文件
themes 文件下存放的是我们的主题文件
.gitignore git 忽略文件,设置提交文件时,哪些文件不提交
_config.yml 站点配置文件
package.json 站点版本,站点依赖文件

第四步:启动本地服务

hexo server

启动本地服务

打开浏览器,输入地址http://localhost:4000/ 可以访问搭建好的Hexo博客。

Ctrl+C 可停止本地服务。

效果如下图。

博客效果

部署到Github

注册Github

Github 注册地址:https://github.com/join

创建Repository

注册成功后,登录账号,点击右侧 "+" 号,然后点击 New repository 添加仓库,如图 :

添加仓库

仓库创建成功后,如图 :

创建成功

这里有两个地址,一个是 Https,一个是 SSH 。Https 每次提交都需要输入用户名和密码,SSH 只要添加了 SSH key 值,以后提交不需要输入用户名和密码。

注 : 这里创建的仓库名称必须为 username.github.io,username 替换成你的 github 用户名,每个账户有且只有一个仓库用来存放网页静态文件,这里名称是固定的。当创建其他仓库的时候,仓库名称可以自定义。

创建 SSH key

ssh-keygen -t rsa -C "你的邮箱"

打开文件资源管理器,输入地址 C:Users <此处为当前计算机的用户名> .ssh

在这个目录下,有id_rsa.pub的文件 id_rsa.pub

用记事本打开,复制里面的内容,得到SSH Key 。

添加SSH Key

现在已拷贝了 SSH key 的内容,那么 GitHub 如何添加 SSH key 呢 ?点击右上角头像,然后点击Settings 。如图 :

添加SSH Key

然后点击 New SSH key,如图 :

添加SSH Key

把之前拷贝的内容粘贴到 key 里面,然后点击 Add SSH key,如图 :

添加SSH Key

怎么去验证是否已经添加成功了呢 ?通过如下命令 :

ssh -T git@github.com

验证成功,如图 :

验证成功

修改 _config.yml

修改站点配置文件_config.yml

修改 depoly :

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

address

注 :如上图所示,找到 GitHub 上对应的远程仓库地址,点击右侧复制按钮,把 "git@github.com:username.github.io.git" 替换成刚刚复制的远程仓库地址。

保存修改好的配置文件。

提交至Github

hexo g  ##生成静态文件
hexo d  ##发布

这时,可能会报错,需要安装一个插件。

npm install hexo-deployer-git --save

安装完成后,执行 hexo d,执行完成后,就可以在 github 上看见我们提交的静态文件了,也可以通过 http://username.github.io 访问博客了,username 改成你的github 用户名。

后期处理

可以在_config.yml配置文件中修改网站名称、主题等信息,这里就不做阐述。

参考链接

如何搭建个人博客 ?Hexo + GitHub 是一个不错的选择 - 简书

使用hexo+github搭建免费个人博客详细教程

Tags:hexo
上一篇
打赏
下一篇

添加新评论

已有 1 条评论

 zRain 昨天 15:24 • |