阅读原文请到我的博客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
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
版本
node_install
查看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
的写法。(我自己的博客就是使用
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_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
现在我们只需要关联一下source
文件夹即可。具体做法如下:
-
CMD + E
或者选择文件
->打开外部模式
; - 点击左下角的
➕
,选择引入文件夹
,将博客目录下的source
文件引进来; - 右键该文件夹选择
编辑
; - 可以修改
显示名称
,不会影响真实的文件夹名;保存拖入的图片的文件夹名称
这里我将文件夹名称去掉了;
这样就可以大功告成了。