hexo+GitHub Pages+Mweb搭建博客

作者:编程    发布时间:2020-01-20 05:32     浏览次数 :

[返回]

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

免费个人博客搭建, 这是一篇小白也能看懂的文章,本文主要针对OS X ,Windows 除了软件安装方式和命令有些区别(装了git bash也一样),其他基本一样。

本教程主要是为了记录此博客的搭建过程,让自己对学习搭建博客的历程有一个更清晰的认识,而不是稀里糊涂把各种官方文档啊博客啊七拼八凑的倒腾出一个博客,自己不明不白的都不知道为什么就搭起来了。

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

首先列出来两个博客的样式供参考:

​ 很早以前就有搭建博客的想法了,既然想好了以后是要走技术路线,起码要有一个像样的博客。并且我可以在博客里记录最近学的一块知识点,或者新技术等等,并且讲这些东西系统的、规范化的整理起来,巩固自己的同时,也能把这些东西让其他需要的人看到,这是一种很棒的感觉!

使用nvm安装node

安装nvm

brew install nvm

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

图片 1nvm_success

配置nvm

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

cd ~vim .bash_profile

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

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

重新source

source .bash_profile

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

安装node

node安装命令如下:

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

这里我安装了v11.3.0版本

图片 2install_node

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

图片 3node_success

图片 4

​ 像这么一个博客,我从hexo是什么都不知道到搭建出这么一个像样的博客配置好主题推送到GitHubPage上花了将近快四个小时,中间遇到了无数的坑,磕磕绊绊的也完成了。所以只要有肯折腾,对自己有信心,没有什么做不出来。

安装hexo

全局安装hexo

npm install -g hexo

初始化hexo

hexo init NeroBlog

npm install

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

查看安装成功

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

image

我的博客地址:Cloud-Wong

关联GitHub

登录你的GitHub帐号,新建仓库并命名:

图片 5create_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的用户名和密码。

成功结果如下:图片 6hexo_deploy_success

返回GitHub仓库

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

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

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

填坑

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

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

hexo cleanhexo ghexo d

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

图片 9

​ 那么下面就正式进入教程吧:

图片上传问题

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

这里就不分享如何注册七牛云的了,注册成功后 ,开始添加图床。

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

image

1. 准备工具--配置搭建环境

  • 操作系统:MacOS
  • Github账号

  • 包管理工具:Homebrew

  • 版本控制:git

  • Node.js

  • hexo