hexo blog搭建教程
简介:花了几天建立的个人网站,先上link,欢迎各位访问echo blog。
而自己购买域名和服务器,搭建博客的成本实在是太高了,不光是说这些购买成本,单单是花力气去自己搭这么一个网站,还要定期的维护它,对于我们大多数人来说,实在是没有这样的精力和时间。
那么就有第三种选择,直接在github 托管我们的博客。这样就可以安心的来写作,又不需要定期维护,而且hexo作为一个快速简洁的博客框架,用它来搭建博客真的非常容易。
由于本人使用的平台是mac os X,因此搭建教程会以macOS为例,其它平台在使用上有细微的差异,请谨慎食用。
hexo简介
hexo是一个基于node.js的静态博客框架,依赖项较少,生成和管理都十分方便。本教材分为以下三个部分:
第一部分:node.js和cnpm,git等前提环境搭建
第二部分:hexo安装与本地初始化
第三部分:部署到github,绑定域名
第四部分:更换butterfly主题
第一部分
安装node.js,要使用homebrew进行安装,首先检查homebrew的版本信息。
1 | brew update |
如果报错这个:
1 | Warning: Homebrew's sbin was not found in your PATH but you haveinstalled |
解决办法:
1 | export PATH="/usr/local/bin:$PATH" |
然后继续进行安装:
1 | brew link node |
在使用node.js时,首先要设置一个工作文件夹,并对其进行初始化,添加各种dependencies。首先:
1 | npm init |
然后由于国外的源过于缓慢,因此我们更换淘宝的源
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
安装完成后检查版本
1 | cnpm -v |
之后我们安装其它插件只需要
1 | cnpm install |
之后我们安装git,便于blog部署到GitHub上面去
1 | sudo brew install git |
第二部分
在前面安装好git和node.js之后我们安装hexo便十分的简单了,你需要在一个有访问权限的文件夹(macos用户不建议在home目录下直接安装,会出现一系列奇怪的权限问题),这里建议放在一个权限不会出问题,又能及时访问的位置。这里博主直接放桌面的(反正GitHub上有clone的代码)
创建blog文件夹
1 | mkdir blog |
进入文件夹并安装hexo
1 | cd blog |
依旧是查看hexo版本
1 | hexo -v |
接下来初始化hexo
1 | hexo init |
之后
1 | cnpm install |
接下来你会看见如下文件
1 | [echo@echoMacbook-pro:] ~/Desktop/blog $ ls |
新建完成后,指定文件夹目录下有:
- node_modules: 依赖包
- public:存放生成的页面
- scaffolds:生成文章的一些模板
- source:用来存放你的文章
- themes:主题
- _config.yml: 博客的配置文件
之后我们hexo三连
1 | hexo cl |
之后浏览器输入loaclhost:4000你能看见hexo默认初始化的blog,使用ctrl c把线程关掉进行如下操作
第三部分
首先,你得有一个GitHub账号,如果电脑注册一直卡着进不去可以挂梯子试试,如果梯子还是进不去可以试试用手机注册,如果还是不行…..建议麻烦您身边的亲朋好友注册。
完成注册登陆之后创建一个和你用户名相同的仓库后面加.github.io⚠️注:必须是用户名相同的库,否则无法被识别。
仓库名也就是xxx.github.io,其中xxx是你的用户名。
点击create repository
生成SSH添加到GitHub
回到你的git hash中
1 | git config --global user.name "yourname" |
这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。
可以用以下两条,检查一下你有没有输对
1 | git config user.name |
然后创建SSH,一路回车
1 | ssh-keygen -t rsa -C "youremail" |
这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。
ssh,简单来讲,就是一个秘钥,其中,id_rsa
是你这台电脑的私人秘钥,不能给别人看的,id_rsa.pub
是公共秘钥,可以随便给别人看。把这个公钥放在GitHub上,这样当你链接GitHub自己的账户时,它就会根据公钥匹配你的私钥,当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。
而后在GitHub的setting中,找到SSH keys的设置选项,点击New SSH key
把你的id_rsa.pub
里面的信息复制进去。
将hexo部署到GitHub中,修改blog中的_config.yml文件
1 | vim _config.yml |
输入i划到底部找到并修改成如下信息
1 | deploy: |
然后hexo三连
1 | hexo cl |
其中 hexo clean
清除了你之前生成的东西,也可以不加。hexo generate
顾名思义,生成静态文章,可以用 hexo g
缩写hexo deploy
部署文章,可以用hexo d
缩写
之后输入username和passwd就成功了。
过个一分钟的样子你就可以输入http://yourname.github.io看见你的blog了。此时呢,你的blog还十分的稚嫩,接下来,我们配置butterfly主题。
第四部分
hexo-theme-butterfly是基于Molunerfinn的hexo-theme-melody的基础上进行开发的的。
安装稳定版
1 | git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly |
使用主題
修改站点配置文件_config.yml,把主題改为butterfly
如果你沒有 pug 以及 stylus 的渲染器,請下载安裝:
1 | npm install hexo-renderer-pug hexo-renderer-stylus --save |
_config.butterfly.yml
butterfly.yml
把主題文件夾中的 _config.yml 复制到 Hexo 根目目录,同时重新命名为 _config.butterfly.yml。
以后只需要在 _config.butterfly.yml进行配置就行。
Hexo会自动合并主題中的_config.yml和 _config.butterfly.yml包的配置,如果存在同名配置,会使用_config.butterfly.yml的配置,其优先度更高。