文章目录
**背景知识**搭建环境安装必要软件配置 Git SSH key配置 Hexo使用 Github Page 仓库写博客创建一个新页面生成静态文件发布博文到 Github Page参考资料个人博客文章:https://bingslient.github.io//08/06/使用Hexo 和Github搭建个人博客
背景知识
Hexo 是一款基于 Node.js 用于快速搭建博客的框架,有了它就可以完成完成个人博客的构建,它会帮你构建博客的整个框架,你只需要会使用Markdown 写博客即可。
Github Page 是 Github 提供的静态网站托管服务,可从 Github 仓库中展示你的个人、组织或者项目的静态网页。
搭建环境
目标环境:
windows10 + Node.js + Hexo + Git
安装必要软件
安装 Node.js
下载安装包 安装
查看是否安装成功:
npm --version
安装 Hexo
npm install hexo-cli -g
查看是否安装成功:
hexo --version
安装 Git
下载安装包 安装
配置 Git SSH key
要使用无密码方式连接到 Github仓库,需要使用公钥认证机制。我们需要在主机上生成公钥和私钥密码对,并将公钥配置到个人的Github账户中。
打开一个 Git 命令终端 Git Bash:
生成 SSH key
ssh-keygen -t rsa -b 4096 -C "your_email@"
将上述邮箱改成自己的邮箱,按提示,一路Enter,默认的产生的 公钥和私钥文件 在/c/Users/you/.ssh/
目录下,其中id_rsa
为私钥,id_rsa.pub
为私钥。
添加 SSH key 到 ssh-agent
如果使用了 Github Desktop,可以忽略这步。
打开 ssh-agent:
eval $(ssh-agent -s)
添加 SSH 私钥 到 ssh-agent
ssh-add ~/.ssh/id_rsa
添加 SSH key 到个人的 Github 账户
复制公钥文件id_rsa.pub
中的内容
打开 Github 账户的设置页面,找到SSH and GPG keys选项,新建一个 SSH key,将复制的内容粘贴到 key 输入框中,最后确认添加 SSH key。
配置 Hexo
初始化一个博客目录
hexo init blogcd blognpm install
使用主题
Hexo 自带的主题相当的简陋,所以Hexo 提供了丰富的 Blog 主题。
个人喜欢的一个主题 Butterfly
[外链图片转存失败(img-KJ3z5fWH-1565199788468)(/gh/BingSlient/cdn/photo/blog_screen.png)]
安装主题 Butterfly
git clone -b master /jerryc127/hexo-theme-butterfly.git themes/Butterfly
安装主题 Butterfly
git clone -b master /jerryc127/hexo-theme-butterfly.git themes/Butterfly
修改 blog 目录下的_config.yml
文件,应用主题 Butterfly
theme: Butterfly
配置 Butterfly 请查看 Butterfly 配置文档,可将 Butterfly 主题的配置文件复制到source/_data/butterfly
。
mkdir source/_datacp theme/Butterfly/_config source/_data/butterfly
安装使用该主题必要的包
npm install hexo-renderer-jade hexo-renderer-stylus --save
配置博客根目录下的_config.yml
,添加:
deploy:type: gitreop: <repository url> #/BingSlient/BingSlient.github.io.gitbranch: [branch] #published
安装 git 发布的包
npm intall hexo-deployer-git --save
使用 Github Page 仓库
建立一个新的 Github Page 仓库作为用于托管个人博客内容。
新建一个 Github 仓库,仓库名格式如下:
username.github.io
username
为你的 Github 账户的用户名。
写博客
创建一个新页面
hexo new [layout] <title>
Hexo 有三种默认布局:post
、page
和draft
,它们分别对应不同的路径,自定义的其他布局和post
相同,都将储存到source/_posts
文件夹。
一般情况下都使用默认的布局,如下新建一篇名为Hello World
的博文
hexo new Hello-World
打开source/_posts/Hello-World.md
,有如下内容:
---title: Hello-Worlddate: -08-08 00:42:26tags:---
这部分内容称为Front-matter
,用于定义生成网页的一些变量,Hexo 预定义的参数如下:
只有 post 类型的文章支持分类和标签,可以在 Front-matter 中设置。在其他系统中,分类和标签听起来很接近,但是在 Hexo 中两者有着明显的差别:分类具有顺序性和层次性,也就是说Foo, Bar
不等于Bar, Foo
;而标签没有顺序和层次。
categories:- Diarytags:- PS3- Games
使用额外的主题或者插件会有额外的参数,这些参数的设置需要参考相应的文档。
使用喜欢的编辑器,完成博文的编辑,推荐使用 Typora。
生成静态文件
完成博文.md
文件的编辑后,需要生成其对应的网页文件:
hexo generate #同 hexo g
监视文件变动
Hexo 能够监视文件变动并立即重新生成静态文件,在生成时会比对文件的 SHA1 checksum,只有变动的文件才会写入。
hexo generate --watch
发布博文到 Github Page
Hexo 使用简单命令就可以将生成网站内容部署到服务器上,这里我们使用 Github Page 作为这个服务器。
hexo deploy#同 hexo d
执行上述命令,Hexo 会将内容推送到 Github 仓库/username/username.github.io
中。
可以使用以下两个命令,生成网页文件并部署到服务器中,两个命令作用一样
hexo generate --deployhexo deploy --generate
以上两个命令也可简写为:
hexo g -dhexo d -g
浏览器打开https://username.github.io
即可访问个人博客了。
参考资料
[1] Hexo Deployment
[2] Butterfly 配置