Github and Hexo 建立个人博客网站

题外话

在2018-09-16周日这一天,在广州都在等待着 “山竹” 的到来,我在家里无事,想起来建立一个个人博客,取名 “山竹”。网上很多部署自己博客的文章,我也是参考了网上很多部署文章,在此记录一下。

什么是Hexo?

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

安装Hexo

安装环境

安装 Hexo 相当简单。然而在安装前,您必须检查电脑中是否已安装下列应用进程:

Node.js下载安装包(下载安装之前按下面方面检测是否已经安装)

检测是否安装 Node.js 成功
命令行:

1
2
$ node -v
$ v10.9.0

因为安装 Node.js 会包括npm的安装

1
2
$ npm -v
$ 6.2.0

安装Hexo的环境已经全部搭建完成

安装 Hexo

1
$ npm install -g hexo-cli

建(初始化)站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文档夹中新建所需要的文档,可以命名为MyBlog,Hexo框架与以后你自己发布的网页都在这个文档夹中。

1
2
$ hexo init MyBlog
$ cd MyBlog

初始化之后默认会有一个hello world的网址,在MyBlog/source/_posts/文档路径下

也可以新建一个网页,分别按顺序输入以下三条命令:

下面会介绍常用的Hexo 命令

1
2
3
$ hexo n first_webSite
$ hexo g
$ hexo s

完成后,打开浏览器输入地址:

localhost:4000 本地显示你的博客地址

推送网站到github个人仓库

建立github 个人仓库

登录到 github, 点击GitHub中的New repository创建新仓库,仓库名固定为:用户名.github.io 用户名用你的 github 帐号名称代替,例如我的仓库:lianleven.github.io

推送

1.配置根目录里的_config.yml文档称为站点配置文档,如下图
配置 _config.yml

将我们的 Hexo 与 GitHub 关联起来,打开 站点的配置文档 _config.yml,翻到最后修改如图:

repo: 填个人仓库如 https://github.com/xxxxx/xxxxx.github.io.git

这个配置是给 hexo deploy(hexo d) 做相应的配置,让hexo知道你要把blog部署在哪个仓库,很显然,我们部署在我们GitHub的仓库里。最后安装Git部署插件,输入命令:

$ npm install hexo-deployer-git --save

发布

这样就发布成功了,快来看看你自己的github网站,在浏览器中输入xxxxx.github.io 你就发现你的博客已经上线了。

Hexo 常用命令

More info: Writing

运行服务

Hexo会监视文档变动并自动更新

1
2
3
4
$ hexo server 
$ hexo server -s
$ hexo server -p 5000 #更改端口
$ hexo server -i 192.168.1.1 #自定义 IP

More info: Hexo Server

生成静态文档

1
$ hexo generate

缩写:

1
$ hexo g

More info: Generating

发布到远程仓库网站

1
$ hexo deploy

缩写:

1
$ hexo d

More info: Deployment

Hexo 主题 Next 的配置

准备写这篇文章的时候,找到详细的安装到配置的文档 Next 主题 相关配置查看文档即可

参考链接

吴润知乎专栏