hexo+GitHub Pages+Mweb搭建博客

阅读原文请到我的博客hexo+GitHub Pages+Mweb搭建博客

花了两三个小时终于将自己的博客搭建好了，下面就分享一下整个过程。
由于我自己本来Mac上就装了Homebrew，所以就省略了安装Homebrew的过程了。直接从安装nvm开始。

nvm and node

使用nvm安装node

安装nvm

brew install nvm

如果安装成功，使用nvm命令会出现如下的提示：

nvm_success

配置nvm

修改~/.bash_profile文件，如果不存在，新建.bash_profile文件

cd ~
vim .bash_profile

当然你也可以使用open .bash_profile进行修改。接着在.bash_profile添加下面的命令：

export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

重新source

source .bash_profile

这么做没有问题，但是我们打开一个新的命令行窗口（我用的是zsh）都需要重新source。

安装node

node安装命令如下：

nvm ls-remote 查看所有版本
nvm install xxx 下载你想要的版本
nvm use xxx 使用指定版本的node
nvm alias default xxx 每次启动终端都使用该版本

这里我安装了v11.3.0版本

install_node

查看node是否安装命令：node -v和npm -v。

node_success

hexo and GitHub Pages

安装hexo

全局安装hexo

npm install -g hexo

初始化hexo

hexo init NeroBlog

npm install

初始化成功，在NeroBlog目录下，使用
npm install

查看安装成功

使用hexo s，在浏览器中打开localhost:4000能看到Hexo页面表示安装成功。Ctrl+C关闭hexo server。

关联GitHub

登录你的GitHub帐号，新建仓库并命名：

create_repository
这里这么写也是可以的，没有必要一定要使用用户名.github.io的写法。

修改_config.yml文件

cd到写博客的文件夹下（我这里就是NeroBlog），编辑_config.yml文件，在编辑_config.yml文件的时候要注意冒号后面要空一格。

修改deploy如下：

deploy:
  type: git
  repository: https://github.com/YiHuaXie/BlogTest.git
  branch: master

生成静态页面

使用hexo g生成静态页面，这里可能会出现错误，但是我安装的时候没有。

上传

使用hexo d就会将你的页面上传到GitHub上的对应仓库里。执行hexo d报错的话使用npm install hexo-deployer-git --save应该就能解决。

如果你没有关联GitHub，则执行hexo d时终端会提示你输入GitHub的用户名和密码。

成功结果如下： hexo_deploy_success

返回GitHub仓库

返回GitHub仓库，点击Settings。在GitHub Pages那一栏的source选择对应分支并保存。

github_page_source
保存后要稍微等一会会出现： github_pages_success
这就是我们最终生成的博客地址。

打开后发现有内容但是没有样式，这里就是一个巨坑，害得我仓库重建了好几次。

填坑

打开_config.yml文件，找到root修改为root: /blogtest并保存。

接着使用（每次博客修改后都要执行下面的命令）

hexo clean
hexo g
hexo d

再次打开上面的链接就和localhost:4000h看到的页面效果一样了。

使用Mweb

图片上传问题

在使用Mweb关联hexo之前要先解决一下图片问题，网上有很多关于加载本地图片的方法，一开始我也是按着教程做的，但是总会碰到奇怪的问题，所以我还是建议使用图床，我使用的是七牛云，注册账号后有10G的空间，写博客应该是够了的。

这里就不分享如何注册七牛云的了，注册成功后（要实名认证的） ，开始添加图床。

1. 打开Mweb的偏好设置，选择发布服务，选择七牛云存储
2. add_picture_bed

Mweb关联hexo

现在我们只需要关联一下source文件夹即可。具体做法如下：

1. CMD + E或者选择文件->打开外部模式；
2. 点击左下角的➕，选择引入文件夹，将博客目录下的source文件引进来；
3. 右键该文件夹选择编辑；
4. 可以修改显示名称，不会影响真实的文件夹名；保存拖入的图片的文件夹名称这里我将文件夹名称去掉了，把插入的图片上传至这里选择我们之前绑定的七牛云，不要忘记打勾；
5. 新建一个博客测试一下即可，所有图片都传到图床去了，本地也没有保存图片的文件夹