预览：我的成果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本地搭建运行
官网
1.1、Hexo安装的前提
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
-
重要：安装便于自动部署到Github上的插件
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 "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
-
-
部署成功
以上就能实现基本的个人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日常操作
官网
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）设置
front-matter
Scaffold设置
5.1.4、资源设置-图片等
文章资源文件夹
当资源文件管理功能打开后，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、主题设置
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原版配置，参考配置即可！！
-
具体配置中遇到个小麻烦-目录显示不出来
目录显示不出来
- 严格按照上述配置即可！
-
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、主页面预览，不显示全部内容
推荐路径
我们可以这样解决，打开一篇文章，添加``即可！！！
7.3、设置网页浏览次数
如果你是用的hexo，打开
themes/你的主题/layout/_partial/footer.ejs添加即可。
# 脚本
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
# 标签
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
设置
完结
欢迎指正补充，可联系lionsom_lin@qq.com
原文地址：Mac+Hexo+github搭建myblog完整版
网友评论