Hexo安装及Butterfly主题的安装配置
目录
- 前言
- Hexo安装及测试
- Butterfly主题安装
- Butterfly主题配置
前言
Hexo介绍:
Hexo 是一个快速、简介且高效的博客框架,Hexo使用Markdown解析文章,在几秒内即可利用靓丽的主题生成静态网页。Hexo官网
Hexo原理简单介绍一下:由于GitHub Pages存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,加入每次写完一篇文章都要手动更新博文目录和相关链接信息,那就太繁琐了。Hexo做的就是将这些md文件都放在本地,每次写完文章后框架会批量生成相关页面,然后我们只需要将生成的静态文件提交到GitHub即可。
注意: 建议使用Git Bash来执行后续的所有命令。
Hexo安装及测试
本章将讲述如何安装Hexo,包括环境准备,安装教程,安装后测试,GitHub部署。
环境准备
安装Hexo之前,需要确保已经安装如下应用程序:
Node.js下载后一路下一步即可安装成功,注意勾选Add to PATH。在安装Git时需要勾选Add to PATH选项;
Node.js安装完成后进行验证,在cmd命令行中输入node -v
查看Node版本。
Git安装后进行验证,在cmd命令行中输入git --version
,查看安装的Git版本。
至此,已经完成了Hexo所需的额外环境的安装,接下来可以安装Hexo了。
Hexo安装
- 在cmd命令行中输入
npm install -g hexo-cli
-g:表示全局安装, hex-cli为所安装的包。 - 安装完成后进行验证,在cmd命令行中输入
hexo -v
查看Hexo版本。
至此Hexo已经安装完成了,下面我们启动Hexo并进行简单测试。
Hexo测试
- 初始化Hexo博客,在命令行中输入
hexo init
进行初始化; - 输入
hexo clean
; - 生成Hexo博客,在命令行中输入
hexo g
进行博客生成; - 启动Hexo博客,在命令行中输入
hexo s
,进行本地部署;
注意:这里我使用了Butterfly主题,所以会出现其图标,可以忽略,下面出现本地网址即代表启动成功
如果有同学遇到点开网址出现下图的情况,可能是因为端口占用的问题。
此时需要我们在启动Hexo时重新设置端口即可,在命令行中输入hexo s -p 端口号
,我这里使用8888端口。 - 至此,我们就已经成功启动了我们的Hexo博客,Hexo为我们创建了一个Hello World的实例。由于我这里已经使用了Butterfly主题,所以就不贴放照片了。
目前我们所运行的Hexo博客还是在本地,只有我们自己能够看到,如何让其他人也能够阅读到我们的博客呢?那就需要将我们的博客部署到GitHub上,借助GitHub别人就可以访问到我们的博客网站,接下来将讲述如何将我们的博客部署到GitHub中。
GitHub配置部署
如果您还没有GitHub账户,请先注册一个GitHub账户吧!!!
- 在GitHub上新建一个仓库,新建名为:username.github.io的仓库,其中username为您的GitHub用户名。
- 连接GitHub
- 右键 ——> Git Bash Here, 设置用户名和邮箱:
1
2git config --global user.name //GitHub 用户名
git config --global user.email //GitHub 邮箱 - 创建SSH密钥, 输入
ssh-keygen -t rsa -C "GitHub 邮箱"
然后一路回车。 - 添加密钥。进入[C:\Users\用户名.ssh]目录,用记事本打开公钥id_rsa.pub文件并复制里面的内容。登录GitHub,进入Settings页面,选择左边栏的SSH and GPG keys, 点击New SSH key。Title随便取个名字,复制粘贴的id_rsa.pub内容到key中,点击Add SSH key 完成添加。
- 验证连接,打开Git Bash,输入
ssh -t git@github.com
,输入yes确认看到以上信息说明SSH配置成功。
至此,就已经成功配置好GitHub了,接下来就开始搭建个人博客吧。
使用Hexo搭建博客
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 云上我最菜の博客!