Mac+Hexo+github搭建myblog完整版

预览：我的成果www.lionsom.com

目录

• Part One - Hexo本地搭建运行
• Part Two - github仓库创建和配置
• Part Three - 本地Hexo关联github
• Part Four - 绑定域名并设置域名解析
• Part Five - Hexo日常操作
• Part Six - Hexo主题更换
• Part Seven - 实战中的一些问题

---

Part One - Hexo本地搭建运行

---

官网

hexo官网
nodejs官网

1.1、Hexo安装的前提

• Node.js 需要先安装 按照流程安装即可！
• npm 与Nodejs一起安装完成，不需要单独安装！
• Git Mac系统自带无需安装

1.2、安装 Hexo

所有必备的应用程序安装完成后，即可使用 npm 安装 Hexo。

$ npm install -g hexo-cli

注意：此处可能需要root权限

---切换root---
LionsomMBP:~ lionsom$ sudo -I 

---切换lionsom普通用户---
LionsomMBP:~ root# su - lionsom 

npm install -g hexo-cli

1.3、安装Hexo完成，则开始初始化hexo

• 创建一个文件夹myblog
• 进入myblog
• hexo init

hexo init

• 文件目录结构

文件目录结构

1.4、依赖包与插件的安装

• 执行以下命令，进行依赖包的安装，

  • node_modules: 关联保存了将会使用到的hexo依赖包

  $ sudo npm install
  

  

  sudo npm install

• 安装相关插件

  • 重要：安装便于自动部署到Github上的插件

    $ npm install hexo-deployer-git --save
    

  • 安装atom生成插件，便于感兴趣的小伙伴们订阅

    $ npm install hexo-generator-feed --save
    

  • 安装博客首页生成插件

    $ npm install hexo-generator-index --save
    

  • 安装归档生成插件

    $ npm install hexo-generator-archive --save
    

  • 安装tag生成插件

    $ npm install hexo-generator-tag --save
    

  • 安装category生成插件

    $ npm install hexo-generator-category --save
    

  • 安装Sitemap文件生成插件

    $ npm install hexo-generator-sitemap --save
    

  • 安装百度Sitemap文件生成插件，因为普通的Sitemap格式不符合百度的要求

    $ npm install hexo-generator-baidu-sitemap --save
    

1.5、本地启动Hexo

操作指令一览表

$ hexo clean      #清理缓存
$ hexo generate   #生成静态文件
$ hexo server     #启动本地服务器
或者
$ hexo clean      #清理缓存
$ hexo g          #生成静态文件
$ hexo s          #启动本地服务器

• 前往myblog目录

$ hexo new "test"

hexo new "test"

• 在生成路径下查看

  
  
  

  生成路径下查看

• Hexo本地生成

  $ hexo generate
  

  

  Hexo本地生成

• Hexo本地运行

$ hexo s

hexo s

http://localhost:4000/

---

Part Two - github仓库创建和配置

---

2.1、github仓库创建

• 仓库名字必须是『username.github.io』格式；
• 创建GitHub Pages

GitHub Pages创建

2.2、配置git

• 设置用户名和邮箱

  $ git config --global user.email "[email protected]"
  $ git config --global user.name "lionsom"
  

• 根据邮箱生成密钥 - 如下图，如无特殊需求

  $ ssh-keygen -t rsa -C "[email protected]"
  

  

  生成密钥具体操作

• 查看生成的密钥-在隐藏文件 .ssh 中，其中id_rsa是私钥，id_rsa.pub是公钥
  

  

  密钥生成路径

• ssh-agent代管理git私钥

  • ssh-agent是一个密钥管理器，运行ssh-agent以后，使用ssh-add将私钥交给ssh-agent保管，其他程序需要身份验证的时候可以将验证申请交给ssh-agent来完成整个认证过程。

• 添加SSH Key到ssh-agent

  • 执行命令 获取 agent pid 59566

    $ eval $(ssh-agent -s)
    

  • 添加id_rsa

    $ ssh-add /Users/lionsom/.ssh/id_rsa
    

• 将生成的公钥 配置到 github

  • 记事本打开id_rsa.pub密钥，复制内容，前往github账户中心Settings,进行如下图操作。
    
    

    公钥添加

• 验证SSH是否配置完成

  $ ssh -T [email protected]
  

  成功则出现

  You've successfully authenticated, but github does not provide shell access.
  

  如图：

  
  
  

  添加是否完成

---

Part Three - 本地Hexo关联github

---

3.1、配置_config.yml

具体配置

3.2、前往Hexo本地目录生成静态网页并Deploy到github

• 确认依赖包和插件安装完成，特别是hexo-deployer-git

  $ npm install hexo-deployer-git --save
  

• 指令操作

  $ hexo clean  #清理缓存
  $ hexo g      #生成静态文件
  $ hexo d      #部署
  或 $ hexo deploy
  

• 实际操作图

  • 清理缓存+重新生成静态文件

    
    
    

    清理缓存+重新生成静态文件

  • 部署到github

    
    
    

    部署到github

• 输入https://lionsom.github.io查看
  

  

  部署成功

---

---

以上就能实现基本的个人blog

---

---

---

Part Four - 绑定域名并设置域名解析

---

GitHub为我们每个注册的用户提供了一个唯一的 username.github.io 网址，GitHub服务器会帮我们托管这个 username.github.io 所用到的全部代码，自动运行，所以我们就不需要购买服务器或者云主机来自己运行了。但是，我们之所以购买域名，就是不想总是通过 username.github.io 来访问我们的个人网站，而是希望通过自己的独立域名来访问。把 username.github.io 和自己购买的域名相关联

方法一：（不推荐）

1、进入github项目中的Settings中，找到Github Pages中的Custom domain，输入自己的域名，点击Save即可。

github域名添加

2、查看项目中多了 CNAME 文件

github域名添加成功

3、域名解析

• 记录类型：CNAME，主机记录：@，记录值一定要是 username.github.io，TTL：一般都是10分钟。
  
  

  域名解析

4、检测是否绑定成功

域名解析成功

5、此方法弊端

如果重新generate并deploy，域名与username.github.io关联失效，需要重新设置一遍。

方式二：（推荐）

1、在本地hexo根目录-》source中创建文件『CNAME』，写入域名lionsom.com

操作如图

2、重新部署一次，查看结果

$ hexo clean  #清理缓存
$ hexo g      #生成静态文件
$ hexo d      #部署

多出CNAME文件

解析成功

域名绑定完成！！

---

Part Five - Hexo日常操作

---

官网

hexo官网使用-基本操作

5.1、进行常用的配置

5.1.1、layout设置

$ hexo new [layout]