3min快速使用Hexo+GitHub搭建免费博客

Posted 2020-11-17 longlively

准备工作

至于为什么使用Hexo，而不使用Jekyll，网上已经做了一些比较，这里就不在赘述。

由于是免费博客，本篇文章暂不涉及域名申请。

在开始之前，已有的资源包括：

1. 申请GitHub账户
2. 安装Node.js
3. 安装Git

环境检测

输入以下命令有返回版本号，说明Node.js环境配置正确：

1 node -v
2 npm -v

安装Hexo

首先在D盘符下建立hexo文件夹，配置完成后博客资源存放路径：

D:hexolog

依次输入以下命令：

1 cd D:/hexo
2 npm install hexo-cli -g
3 hexo init blog
4 cd blog
5 npm install
6 hexo g #或者hexo generate 
7 hexo s #或者hexo server，可以在http://localhost:4000查看

常见命令：

1 $ hexo new "postName"      #新建文章
2 $ hexo new page "pageName" #新建页面
3 $ hexo generate            #生成静态页面至当前目录下的public目录
4 $ hexo server              #启动本地web服务，用于博客的预览，开启预览访问端口（默认端口4000，‘ctrl + c‘关闭server）
5 $ hexo deploy              #部署博客到GitHub
6 $ hexo help                #查看帮助
7 $ hexo version             #查看Hexo的版本

缩写：

1 $ hexo n == hexo new
2 $ hexo g == hexo generate
3 $ hexo s == hexo server
4 $ hexo d == hexo deploy

组合命令:：

1 $ hexo s -g #生成并本地预览
2 $ hexo d -g #生成并上传

打开http://localhost:4000已经可以看到一篇内置的blog。

Hexo主题配置

以主题yilia为例进行说明。

安装主题

1 $ hexo clean
2 $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

这是官方主题，其他主题还有：

1 git clone https://github.com/iissnan/hexo-theme-next themes/next

启用主题

修改hexo目录下的_config.yml配置文件中的theme属性，将其设置为yilia，然后重新执行hexo g来重新生成。

如果出现一些莫名其妙的问题，可以先执行hexo clean来清理一下public的内容，然后再来重新生成和发布。

更新主题

1 $ cd themes/yilia
2 $ git pull
3 $ hexo g # 生成
4 $ hexo s # 启动本地web服务器

部署Hexo到Github Pages

首先在Github上创建特别的repository，命名为yourname.github.io，yourname改成你自己取的名字。

部署到github的原理：

1. 之前步骤中在Github上创建的那个特别的repo，一个最大的特点就是其master中的html静态文件，可以通过链接http://yourname.github.io来直接访问。
2. hexo -g 会生成一个静态网站（第一次会生成一个public目录），这个静态文件可以直接访问。
3. 需要将hexo生成的静态网站，提交(git commit)到github上。

使用hexo deploy部署

部署到github，需要在blog根目录下的站点配置文件_config.xml中作如下修改：

1 deploy:
2   type: git
3   repo: [email protected]:yourname/yourname.github.io.git
4   branch: master

就是给hexo d 这个命令做相应的配置，让hexo知道要把blog部署在哪个位置。

最后安装Git部署插件，输入命令：

$ npm install hexo-deployer-git --save

这时，分别输入三条命令：

1 hexo clean 
2 hexo g 
3 hexo d

你会发现你的博客已经上线，可以在网络上被访问了。

发布文章

定位到blog根目录，正式发布上线博客文章，在命令行中输入：

$ hexo n "postName" #新建文章

发现在blog根目录下的source文件夹中的_post文件夹中多了一个postName.md文件，使用Markdown（锤子科技锤子便签教程不错）编辑器打开，就可以开始你的个人博客之旅了。

通过带有预览样式的Markdown编辑器实时预览书写的博文样式，也可以通过命令：

$ hexo s --debug 

在本地浏览器的http://localhost:4000预览博文效果。

默认情况下，生成的博文目录会显示全部的文章内容，如何设置文章摘要的长度呢？答案是在合适的位置加上<!--more-->即可。

写好博文并且样式无误后，通过以下命令：

1 $ hexo g 
2 $ hexo d

生成、部署网页，然后随后可以在浏览器中输入域名浏览。

网站具体配置参看官方文档。

保留CNAME、README.md等文件

提交之后网页上一看，发现以前其它代码都没了，此时不要慌，一些非md文件可以放到source文件夹下，这里的所有文件都会原样复制（除了md文件）到public目录。

由于hexo默认会把所有md文件都转换成html，包括README.md，所有需要每次生成之后、上传之前，手动将README.md复制到public目录，并删除README.html。

寻找图床

图床，当博文中有图片时，若是少量图片，可以直接把图片存放在source文件夹中，但这显然不合理的，因为图片会占据大量的存储的空间，加载的时候相对缓慢 ，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用Markdown语法， 完成图片的插入，这种网站就被成为图床。常见的简易的图床网站有：贴图库图片，国内算比较好的图床有两个：新浪微博和 七牛云。

 

参考：

[1] https://zhuanlan.zhihu.com/p/26625249

[2] https://div.io/topic/1691

[3] https://github.com/limedroid/HexoLearning

[4] http://blog.haoji.me/build-blog-website-by-hexo-github.html?from=xa