hexo+GitHub Pages+Mweb搭建博客

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

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

nvm and node

使用nvm安装node

安装nvm

brew install nvm

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

《hexo+GitHub Pages+Mweb搭建博客》 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

open .zshrc打开文件后,在最后添加一句source ~/.bash_profile。不然每次打开窗口都要重新source一下。

安装node

node安装命令如下:

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

这里我安装了v11.3.0版本

《hexo+GitHub Pages+Mweb搭建博客》 node_install

查看node是否安装命令:node -vnpm -v

《hexo+GitHub Pages+Mweb搭建博客》 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帐号,新建仓库并命名:

《hexo+GitHub Pages+Mweb搭建博客》 create_repository

这里这么写也是可以的,但是这么最好不要这么写,后面我们会更换域名,还是要使用
用户名.github.io的写法。(我自己的博客就是使用
YiHuaXie.github.io

修改_config.yml文件

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

修改deploy如下:

deploy:
  type: git
  repository: git@github.com:YiHuaXie/YiHuaXie.github.io.git
  branch: master

生成静态页面

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

上传

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

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

成功结果如下:
《hexo+GitHub Pages+Mweb搭建博客》 hexo_deploy_success

返回GitHub仓库

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

《hexo+GitHub Pages+Mweb搭建博客》 github_page_source

保存后要稍微等一会会出现:
《hexo+GitHub Pages+Mweb搭建博客》 github_pages_success

这就是我们最终生成的博客地址。

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

填坑

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

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

hexo clean
hexo g
hexo d

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

使用Mweb

图片上传问题

可以直接使用本地图片,这里我是上传到阿里云上面的。七牛云作为图床比较麻烦,主要是默认给你的前缀是测试的只有一个月有效期。不然就要备案什么的巨麻烦。

Mweb关联hexo

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

  1. CMD + E或者选择文件->打开外部模式
  2. 点击左下角的,选择引入文件夹,将博客目录下的source文件引进来;
  3. 右键该文件夹选择编辑
  4. 可以修改显示名称,不会影响真实的文件夹名;保存拖入的图片的文件夹名称这里我将文件夹名称去掉了;

这样就可以大功告成了。

    原文作者:NeroXie
    原文地址: https://www.jianshu.com/p/dfb011875846
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞