用Hexo搭建个人博客并发布至Github

在Github中创建Repository

注册Github账号,然后在Github中创建一个以.github.io结尾的Repository。
Repository name为AlanXiuxiu.github.io。注意前面的名字要与自己的Github用户名一致。

这个生成好的Repository就是用来存放博客内容的地方,也只有这个仓库里的内容,才会被网页显示出来。

在本地安装Hexo

Hexo是一个基于Node.js的博客框架,它把本地文件里的信息生成一个网页。安装Hexo需要配置Git, Node.js。这两样都安装好后,在命令行中输入:

1
npm install -g hexo-cli

可用hexo -v查看版本号,确认安装成功。

创建文件夹Xiutopia作为博客目录
鼠标右键Xiutopia,选择Git Bash Here。如果没有安装Git,就不会有这个选项。
输入hexo initXiutopia文件夹初始化成一个博客文件夹。
输入npm install安装依赖包。
输入hexo g生成(generate)网页,由于我们还没创建任何博客,生成的网页会展示Hexo里面自带的一个Hello World的博客。

输入hexo s将生成的网页部署在本地服务器(server)。
浏览器里输入http://localhost:4000/。 就可以看到刚才的成果了。
回到Git Bash,按Ctrl+C结束。

将本地Hexo博客部署在Github上

经过前面两个部分,我们已经创建了本地博客和一个能托管这些资料的线上仓库,接下来只要把本地博客部署(deploy)在我们的Github对应的Repository就可以了。

首先,获取Github对应的Repository的链接。登陆Github,进入到AlanXiuxiu.github.io,点击Clone or download,复制 URL 待用,我的是https://github.com/AlanXiuxiu/AlanXiuxiu.github.io.git

其次,修改博客的配置文件。打开站点配置文件_config.yml,找到 #Deployment,填入以下内容:

1
2
3
4
deploy:  
type: git
repository: https://github.com/AlanXiuxiu/Alanxiuxiu.github.io.git
branch: master

最后实现部署,回到Git Bash,输入npm install hexo-deployer-git --save安装hexo-deployer-git自动部署发布工具,此步骤只需要做一次。
输入hexo d得到INFO Deploy done: git即为部署成功。

部署完成后,即可在Alanxiuxiu.github.io看到成果。之后可以做进一步配置,并更改主题进行美化。

发布博客

只要在Git Bash中输入hexo new <postname>即可在博客目录下的\Xiutopia\source\_posts目录中生成.md文件,编辑后输入一下命令:

1
hexo clean && hexo g && hexo d

即可生成静态网页文件,重新部署至Github。