在Mac上如何搭建Hexo个人博客

2016-08-01 本文已影响263人卖码维生

欢迎去我的博客muhlenXi访问。

版权声明：本文为muhlenXi原创文章，转载请注明出处，未经允许不得转载.

导语：

   在网上经常浏览技术牛人的博客来学习技术能力，突然有个念头闪现在脑海,为啥我不自己也弄个博客记录自己
的学习收获和分享自己的掉坑经验，避免后来的人不像我一样掉坑，岂不更好！对于一个爱折腾的我，立马就开始
各种搜索资料，各种踩坑。

更多详情请看我为什么开始写博客

对于不了解Hexo是什么的？可以去Hexo官网了解一下。Hexo简介 ,废话不扯了，开始正题!

安装Node.js（必须）

选择Node.js的安装的程序，进入到下载页面，选择Download for OSX(x64),左边的版本是建议大多数用户使用的版本，右边的则是最新版本，我选择了左边的那个版本，然后，下载，安装即可。

安装Git(必须)

由于我经常使用Xcode软件，所以这里不用安装Git,Xcoder软件自带Git,也许有些人不知道Git是什么以及怎么使用，可以看Git教程了解一下，这是我目前见到讲解的深入浅出的文章。

PS：后面需要配置站点和主题文件，需要打开其他格式的文本，个人建议用Xcode会好些。

Xcode for Mac 安装

Git 安装

注册Github账号（必须）

进一步想深入学习Github的可以看一下这个博客从0开始学习Github系列汇总

Hexo 的安装与配置

安装Hexo

以上三步，根据自己实际情况安装。安装完成后，可进行接下来这步。打开终端，cd到你想要存放Hexo配置的路径下进行如下操作：

mkdir "MyBlog"     //创建MyBlog文件夹
ls                 //查看当前目录下是否有MyBlog文件夹
cd cd MyBlog/      //进入到MyBlog目录下

sudo npm install-g hexo  //安装Hexo
hexo init                //初始化Hexo

到这里为止，Hexo博客安装工作基本完成，MyBlog就是你博客的根目录，关于博客的所有操作均在MyBlog里面进行。

配置Github

【1】登录你的Github账号，创建一个Repository（仓库），仓库的名字必须是 你的github的用户名.github.io （这是固定写法）

在这里假设你的用户名是zhangsan，则你要创建的仓库名就是zhangsan.github.io

【2】用 终端 或者 Github Desktop软件 Clone zhangsan.github.io 仓库到本地你指定的目录下。

【3】进入到MyBlog文件夹，找到 _config.yml (站点配置文件)然后打开它，我用Xcode打开它，翻到最后面，进行如下操作

改成这个样子：

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

【4】打开终端 输入

 npm install hexo-deployer-git --save 
 hexo generate 或 hexo g    //生成静态界面
 hexo server                //本地启动

【5】打开浏览器 输入 http://localhost:4000/ 则可以看到你本地生成的静态页面了

打开终端使用快捷键 control + c 停止本地启动进程

【6】拷贝MyBlog目录下的Public文件夹里面的所有文件到你Clone到本地的zhangsan.github.io 文件夹

【7】使用 终端 或者 Github Desktop Commit、Push zhangsan.github.io 到远程Github仓库中

【8】使用 终端 进入到 MyBlog目录下，执行如下命令

hexo deploy  //部署博客到Github

这样，就成功的将你的Hexo博客部署到了Github，你在浏览器中输入http://zhangsan.github.io 就可以了看到你的博客了。

常用的Hexo基本操作

hexo clean                //清理缓存
hexo generate             //生成静态界面
hexo deploy               //部署到Github
hexo server               //本地启动博客

hexo new “文章名”          //新建一篇文章
hexo new page "页面名"     //新建一个页面
hexo help                 //查看帮助
hexo version              //查看Hexo的版本

给你的博客安装并配置 Next主题

Next主题的主旨在于简洁优雅并且易于使用，尤其是是精于心，简于形的里面深入我心，见到的第一眼，就深深的吸引住了，无法自拔。具体步骤如下：

【1】使用终端 进入到 MyBlog目录下，输入命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

这样就把Next主题Clone到你的MyBlog/themes路径下了。

【2】进入到MyBlog文件夹，找到 _config.yml (站点配置文件)然后打开它，我用Xcode打开，找到theme字段，修改成

theme: next

【3】配置Next主题，进入到MyBlog/themes/next目录下，打开_config.yml (主题配置文件)然后打开它，我一般用Xcode打开，找到Schemes字段，next主题有三种形式，我中意Mist,修改如下

# Schemes
#scheme: Muse
 scheme: Mist
#scheme: Pisces

【4】打开终端进入到cd到MyBlog文件夹,输入命令

hexo clean
hexo generate
hexo server

这样，打开浏览器 输入 http://localhost:4000/ 就可以看到和我一样的主题了。

我的博客 mulenxi

更多的Next主题配置，可以参考Next官方文档。

搭建博客参考

1、购买域名，对域名解析和绑定Github，可以参考如何搭建一个独立博客
2、学习使用Markdown,可以参考认识与入门Markdown
3、Hexo搭建过程出现问题，可以参考Hexo---搭建

感谢大家的浏览，谢谢！