美文网首页
使用Hexo搭建个人博客并部署到GitHub上

使用Hexo搭建个人博客并部署到GitHub上

作者: iBleakNight | 来源:发表于2019-12-02 17:55 被阅读0次

什么是Hexo?

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

安装环境

安装Hexo相当简单,安装下列应用程序即可:
1.Node.js下载地址
2.Git下载地址
通过查看Node版本号来检查Node是否安装成功

$ node -v
查看Node是否安装成功

通过查看Git版本号来检查Git是否安装成功

$ git --version
查看Git版本

安装Hero

安装环境搭建完成后,就可以使用npm安装Hero。

$ npm install -g hexo-cli

安装Hexo完成后,初始化一个项目,打开此项目并安装项目所需要的依赖包。

$ hexo init <folder> #初始化项目,<folder>为自取项目名
$ cd <folder> #打开项目
$ npm install #安装依赖包

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

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
初始化项目
打开项目
安装依赖包
项目目录

安装hexo-server

$ npm install hexo-server --save

本地启用服务查看项目的初始状态

$ hexo server

如遇到端口占用的情况,可以更改端口号

$ hexo server -p 8888
安装hexo-server
本地启用服务
更改端口号 效果图

部署到GitHub Pages

1.GitHub上新建一个仓库
登入GitHub,在界面的右上方的用户信息点击加号,新建一个repository

image.png
给新建的仓库起名,注意:这个名字必须跟用户名保持一致,GitHub才会默认设置成用户的博客
仓库起名
新建项目完成
项目完成
项目需要设置的位置
项目设置
2.建本地搭建的Hero博客项目发布到GitHub
生成静态文件
$ hexo generate
生成静态文件

执行完以上命令,会在项目的根目录下生成public文件夹
安装hexo-deployer-git插件

$ npm install hexo-deployer-git --save
安装hexo-deployer-git插件

修改网站配置文件_config.yml,添加deploy信息:

deploy:
  type: git
  repo: https://github.com/<username>/<project>
  # example:https://github.com/BleakNight95/BleakNight95.GitHub.io.git
  branch: master
修改网站配置文件

生成SSH key:

$ cat ~/.ssh/id_rsa.pub

在右上角的用户信息中,打开GitHub的设置页面


设置

进入SSH and GPD keys选项


SSH and GPD keys选项
新建SSH keys,复制生成的SSH key到此处
新建SSH keys

测试是否连接成功

$ ssh -T git@github.com

若出现下面的语句,则说明你的ssh key已经配置成功

Hi BleakNight95! You've successfully authenticated, but GitHub does not provide shell access.
ssh key已经配置成功

生成静态文件上传

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

Hero博客搭建完成
https://bleaknight95.github.io/

image.png

[附录1]Hero中文文档
[附录2]segmentfault大佬文章

相关文章

网友评论

      本文标题:使用Hexo搭建个人博客并部署到GitHub上

      本文链接:https://www.haomeiwen.com/subject/ykexgctx.html