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
2
brew update
brew doctor

如果报错这个:

1
2
3
4
5
6
7
Warning: Homebrew's sbin was not found in your PATH but you haveinstalled

formulae that put executables in /usr/local/sbin.

Consider setting the PATH for example like so

echo 'exportPATH="/usr/local/sbin:$PATH"' >> ~/.bash_profile

解决办法:

1
2
export PATH="/usr/local/bin:$PATH"
source ~/.bash_profile

然后继续进行安装:

1
2
3
brew link node
brew uninstall node
brew install 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
2
cd blog
cnpm install -g hexo-cli

依旧是查看hexo版本

1
hexo -v

接下来初始化hexo

1
hexo init

之后

1
cnpm install

接下来你会看见如下文件

1
2
3
4
[echo@echoMacbook-pro:] ~/Desktop/blog $ ls
_config.yml node_modules scaffolds yarn.lock
assets package-lock.json source
db.json package.json themes

新建完成后,指定文件夹目录下有:

  • node_modules: 依赖包
  • public:存放生成的页面
  • scaffolds:生成文章的一些模板
  • source:用来存放你的文章
  • themes:主题
  • _config.yml: 博客的配置文件

之后我们hexo三连

1
2
3
hexo cl
hexo g
hexo s

之后浏览器输入loaclhost:4000你能看见hexo默认初始化的blog,使用ctrl c把线程关掉进行如下操作

第三部分

首先,你得有一个GitHub账号,如果电脑注册一直卡着进不去可以挂梯子试试,如果梯子还是进不去可以试试用手机注册,如果还是不行…..建议麻烦您身边的亲朋好友注册。

完成注册登陆之后创建一个和你用户名相同的仓库后面加.github.io⚠️注:必须是用户名相同的库,否则无法被识别。

仓库名也就是xxx.github.io,其中xxx是你的用户名。

点击create repository

生成SSH添加到GitHub

回到你的git hash中

1
2
git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名,youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。

可以用以下两条,检查一下你有没有输对

1
2
git config user.name
git config user.email

然后创建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
2
3
4
deploy:
type: git
repo: https://github.com/YourgithubName/YourgithubName.github.io.git
branch: master

然后hexo三连

1
2
3
4
hexo cl
hexo s
hexo g
hexo d

其中 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的配置,其优先度更高。