Mac+Hexo+github搭建myblog完整版

2018-03-20 本文已影响179人 lionsom_lin

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

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          #启动本地服务器

$ 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 "lionsom_lin@qq.com"
$ git config --global user.name "lionsom"

根据邮箱生成密钥 - 如下图，如无特殊需求
```
$ ssh-keygen -t rsa -C "lionsom_lin@qq.com"
```
生成密钥具体操作
查看生成的密钥-在隐藏文件 .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 git@github.com

成功则出现

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] <title>

Hexo 有三种默认布局：post、page 和 draft，
默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。

5.1.2、文件名称设置

Hexo 默认以标题做为文件名称，但您可编辑 new_post_name 参数来改变默认的文件名称。

# Writing
new_post_name: :year-:month-:day-:title.md

5.1.3、模版（Scaffold）设置

hexo官网使用-Front-matter

front-matter

Scaffold设置

5.1.4、资源设置-图片等

hexo官网使用-资源文件夹

文章资源文件夹

当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new [layout] <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个 markdown 文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

_config.yml
post_asset_folder: true

使用相对路径进行资源引用：./XXXX.jpg

5.2、创建新blog

$ hexo new blog_name

生成两个文件：blog_name.md 和 blog_name资源文件夹

Part Six - Hexo主题更换

6.1、主题设置

github主题列表地址

hexo-theme-yilia

6.1.1、将主题clone到themes文件夹中

LionsomMBP:myblog lionsom$ cd themes/
LionsomMBP:themes lionsom$ git clone https://github.com/litten/hexo-theme-yilia.git

6.1.2、修改Hexo的_config.yml文件配置

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: hexo-theme-yilia

6.1.3、重新加载

显示主题效果

6.2、yilia主题内部设置

直接参考yilia原版配置，参考配置即可！！
- hexo-theme-yilia 官网
- yilia-BlogBackup 样例
具体配置中遇到个小麻烦-目录显示不出来

目录显示不出来
- 严格按照上述配置即可！
yilia内部资源路径的问题
- 这里的路径是Hexo根目录下source下点资源，
- 完整的路径是指Hexo/source/assets/img/wechatpay.jpg
```
#你的头像url
avatar: /assets/img/wechatpay.jpg
```

Part Seven - 实战中的一些问题

7.1、图片资源加载不出来的问题

图片加载异常

根据上图点结论，所以，资源路径不推荐5.1.4所推荐的设置，依旧推荐在

推荐路径

使用路径 /assets/img/myhead.jpg

7.2、主页面预览，不显示全部内容