您现在的位置是:首页 > 个人博客日记 个人博客日记

Hexo安装和配置到GitHub

2016-02-14 10:40:00

https://github.com

1. Git安装和设置

git

  1. brew install git #Mac电脑使用brew安装
  2. sudo apt-get install git #Ubuntu系统使用apt-get命令安装
  3. yum install git #Liunx系统使用yum命令安装

然后设置好git账户

使用Github Page搭建博客, 需要在GitHub建立仓库,仓库名为username.github.io,以后使用…

1) 先到https://github.com/new页面注册一个新的项目,项目名需要与你的用户名相同,项目主页也是相同的 https://username.github.io

例如 我的github用户名就叫 <code>majiameng</code>

所以我创建的新的项目名字为<code>majiameng.github.io</code>

注: 用户名和版本库名必须一直

我的主页是 https://majiameng.github.io

Windows/Liunx/Mac 添加密钥

1.检查现有的SSH密钥

打开终端

输入 ls -al ~/.ssh 以查看现有的SSH密钥是否存在:

  1. ls -al ~/.ssh

#列出.ssh目录中的文件(如果存在)
检查目录列表,看看你是否已经有一个公共SSH密钥。

  1. [root@iz2ze1l759bwnyl1nt6bviz hexo]# ls -al ~/.ssh
  2. total 24
  3. drwx------ 2 root root 4096 Sep 11 20:02 .
  4. dr-xr-x---. 12 root root 4096 Sep 29 09:12 ..
  5. -rw------- 1 root root 0 Aug 31 14:11 authorized_keys
  6. -rw------- 1 root root 3247 Sep 11 18:08 id_rsa
  7. -rw-r--r-- 1 root root 743 Sep 11 18:08 id_rsa.pub
  8. -rw-r--r-- 1 root root 7533 Sep 26 10:04 known_hosts
2.生成一个新的SSH密钥

粘贴下面的文字,替换你的GitHub电子邮件地址。

  1. ssh-keygen -t rsa -b 4096 -C "666@majiameng.com"

这将创建一个新的ssh密钥,使用提供的电子邮件作为标签。

  1. 生成公共/私有rsa密钥对。

当系统提示您输入要保存密钥的文件时,按Enter键。这接受默认的文件位置。

  1. 输入保存密钥的文件(/c/Users/you/.ssh/id_rsa):[按回车]

在提示符下,键入安全密码。有关详细信息,请参阅“使用SSH密钥密码”。

  1. Enter passphrase (empty for no passphrase): # 输入密码(无密码为空):[输入密码]
  2. Enter same passphrase again: #再次输入相同的密码:[再次输入密码]
3.将SSH密钥添加到ssh代理

在向ssh-agent添加新的SSH密钥以管理密钥之前,应该检查现有的SSH密钥并生成一个新的SSH密钥。

确保ssh代理正在运行:

在后台启动ssh-agent

  1. eval "$(ssh-agent -s)"
  2. Agent pid 20938

将SSH私钥添加到ssh代理。如果您使用不同的名称创建密钥,或者如果要添加具有不同名称的现有密钥,请将命令中的id_rsa替换为私钥文件的名称。

  1. ssh-add ~/.ssh/id_rsa

打开复制 粘贴在你的github账户

  1. vim ~/.ssh/id_rsa.pub

3) 登录网站,将SSH文件夹下的 id_rsa.pub 中的内容复制到公钥框中即可。

将SSH密钥添加到您的GitHub帐户。

2. Node.js安装

请看文章node 的安装

3. Hexo安装与设置

Node, npm和Git都安装成功, 开始安装hexo

  1. cnpm install hexo -g #-g表示全局安装, npm默认为当前项目安装
  2. hexo version

如果遇到报错

  1. { [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
  2. { [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
  3. { [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }

则用下列语句安装

  1. cnpm install hexo --no-optional

Hexo使用命令:

  1. cd /git
  2. hexo init hexo #执行init命令初始化到你指定的hexo目录
  3. cd hexo
  4. cnpm install #install before start blogging
  5. hexo generate #自动根据当前目录下文件,生成静态网页
  6. hexo server #运行本地服务

浏览器输入http://localhost:4000就可以看到效果。

目录结构

  1. .
  2. ├── .deploy #需要部署的文件
  3. ├── node_modules #Hexo插件
  4. ├── public #生成的静态网页文件
  5. ├── scaffolds #模板
  6. ├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
  7. | ├── _drafts #草稿
  8. | └── _posts #文章
  9. ├── themes #主题
  10. ├── _config.yml #全局配置文件
  11. └── package.json

教你怎么用 Hexo!

4. 添加博文

  1. hexo new "postName" #新建博文,其中postName是博文题目

博文会自动生成在博客目录下source/_posts/postName.md

文件自动生成格式:

  1. title: "It Starts with iGaze: Visual Attention Driven Networkingwith Smart Glasses" #博文题目
  2. date: 2014-11-21 11:25:38 #生成时间
  3. tags: #标签, 多个标签也可以使用格式[tag1, tag2, tag3,...]
  4. - tag1
  5. - tag2
  6. - tag3
  7. categories: [cat1,cat2,cat3]
  8. ---
  9. 正文, 使用 Markdown 语法书写

也可以直接写一个<code> **.md </code>文件放入<code>source/_posts/ </code>文件夹下面

诶?你还不会md文件的语法 ? out了 用markdown写下你的第一个md文档

如果不想博文在首页全部显示, 并能出现阅读全文按钮效果, 需要在你想在首页显示的部分下添加

5. 主题更改

  1. cd /git/hexo/themes #进入主题目录
  2. #git clone git克隆的地址 克隆后保存在本地的文件名
  3. git clone git@github.com:iissnan/hexo-theme-next.git next

在<code>./_config.yml</code>,修改主题为next

<code>theme: next</code>

每个主题有每个主题的审美以及功能,可以安装之后随时更换哦!

Hexo主题列表

另外推荐几个主题:

iissnan/hexo-theme-next

TryGhost/Casper

kywk/hexo-theme-casper #基于Casper

daleanthony/uno

A-limon/pacman

AlxMedia/hueman

xiangming/landscape-plus #基于官方

查看本地效果

  1. hexo g #生成页面
  2. hexo s #启动服务

6. 部署到Git

以上内容都是在本地进行查看, 现在将博客部署到github或gitcafe上

gitcafe现在已经呗coding收购,部署到上边的方法一样,举一反三!

Github

修改文件 hexo 目录下的配置文件 <code> _config.yml </code>

在文件尾部添加

  1. deploy:
  2. type: git
  3. repo: https://github.com/lmintlcx/lmintlcx.github.io.git
  4. branch: master

GitHub项目主页需要把 branch 设置为 master

注意事项

  • 所有键的冒号后面留一个空格,如<code>language: zh-CN</code>
  • url不能为空,否则报错
  • type: git报错<code>hexo ERROR Deployer not found: git</code>的解决方法:

先运行<code> cnpm install hexo-deployer-git —save</code>

完整配置信息如下:

  1. # Site #站点信息
  2. title: blog Name #标题
  3. subtitle: Subtitle #副标题
  4. description: my blog desc #描述
  5. author: me #作者
  6. language: zh-CN #语言
  7. timezone: Asia/Shanghai #时区
  8. # URL
  9. url: http://yoururl.com #用于绑定域名, 其他的不需要配置
  10. root: /
  11. #permalink: :year/:month/:day/:title/
  12. permalink: posts/title.html
  13. permalink_defaults:
  14. # Directory #目录
  15. source_dir: source #源文件
  16. public_dir: public #生成的网页文件
  17. tag_dir: tags #标签
  18. archive_dir: archives #归档
  19. category_dir: categories #分类
  20. code_dir: downloads/code
  21. i18n_dir: :lang #国际化
  22. skip_render:
  23. # Writing #写作
  24. new_post_name: :title.md #新文章标题
  25. default_layout: post #默认模板(post page photo draft)
  26. titlecase: false #标题转换成大写
  27. external_link: true #新标签页里打开连接
  28. filename_case: 0
  29. render_drafts: false
  30. post_asset_folder: false
  31. relative_link: false
  32. future: true
  33. highlight: #语法高亮
  34. enable: true
  35. line_number: true #显示行号
  36. auto_detect: true
  37. tab_replace:
  38. # Category & Tag #分类和标签
  39. default_category: uncategorized #默认分类
  40. category_map:
  41. tag_map:
  42. # Date / Time format #日期时间格式
  43. ## http://momentjs.com/docs/#/displaying/format/
  44. date_format: YYYY-MM-DD
  45. time_format: HH:mm:ss
  46. # Pagination #分页
  47. per_page: 10 #每页文章数, 设置成 0 禁用分页
  48. pagination_dir: page
  49. # Extensions #插件和主题
  50. ## 插件: http://hexo.io/plugins/
  51. ## 主题: http://hexo.io/themes/
  52. theme: next
  53. # Deployment #部署, 同时发布在 GitHub 和 GitCafe 上面
  54. deploy:
  55. - type: git
  56. repo: git@github.com:username/username.github.io.git
  57. branch: master

保存之后,便可以使用<code>hexo d</code>上传到GitHub。
部署成功,使用username.github.io进行访问, 或者设置个性域名,参考官方Wiki。

如有报错,可能是第一次安装git还没有设置git email和name

  1. git config --global user.email "666@majiameng.com"
  2. git config --global user.name "majiameng"

写好 md文章 放在<code>source/_posts/ </code>文件夹下面 后

  1. hexo g
  2. hexo d

7.域名

绑定域名
不绑定域名的话只能通过 your_user_name.github.io 访问

申请域名推荐 GoDaddy或者阿里云, 域名解析推荐 DNSPod

绑定顶级域名
新建文件 CNAME, 无后缀, 纯文本文件, 内容为要绑定的域名 blogname.com
如果要使用 www.blogname.com 的形式, 文件内容改为 www.blogname.com

DNS设置
记录值获取

  1. ping your_user_name.github.io
  2. 正在 Ping sni.github.map.fastly.net [151.101.73.147] 具有 32 字节的数据:
  3. 来自 151.101.73.147 的回复: 字节=32 时间=139ms TTL=51
  4. 来自 151.101.73.147 的回复: 字节=32 时间=147ms TTL=51
  5. 来自 151.101.73.147 的回复: 字节=32 时间=128ms TTL=51
  6. 来自 151.101.73.147 的回复: 字节=32 时间=155ms TTL=51
  7. 151.101.73.147 Ping 统计信息:
  8. 数据包: 已发送 = 4,已接收 = 4,丢失 = 0 (0% 丢失),
  9. 往返行程的估计时间(以毫秒为单位):
  10. 最短 = 128ms,最长 = 155ms,平均 = 142ms

主机记录@, 类型A, 记录值151.101.73.147
主机记录www, 类型A, 记录值151.101.73.147
参考 Tips for configuring an A record with your DNS provider

绑定子域名

比如使用域名blogname.com的子域名blog.blogname.com
CNAME文件内容为blog.blogname.com

DNS设置
主机记录blog, 类型CNAME, 记录值blogname.github.io
参考 Tips for configuring a CNAME record with your DNS provider

GitHub 绑定域名

项目管理界面,https://github.com/username/username.github.io/settings

8.其他配置

头像设置
编辑站点配置文件, 新增字段 avatar, 头像的链接地址可以是:

网络地址
https://avatars2.githubusercontent.com/u/4962914?v=3&s=460

站点内的地址
/images/avatar.jpg #头像图片放置在主题的 source/images/

  1. avatar: /images/avatar.png

菜单设置
编辑主题配置文件的 menu
若站点运行在子目录中, 将链接前缀的 / 去掉

  1. menu:
  2. home: /
  3. archives: /archives
  4. categories: /categories
  5. tags: /tags
  6. commonweal: /404.html
  7. about: /about

标签云页面
添加一个标签云页面, 并在菜单中显示页面链接

  1. 在菜单中添加链接。 编辑主题配置文件, 添加 tags menu
  2. ``` bash
  3. menu:
  4. tags: /tags

分类页面
添加一个分类页面, 并在菜单中显示页面链接

新建 categories 页面

  1. hexo new page categories

将页面的类型设置为categories

  1. title: categories
  2. date: 2015-09-19 22:38:00
  3. type: "categories"
  4. ---

关闭评论

  1. title: categories
  2. date: 2015-09-19 22:38:00
  3. type: "categories"
  4. comments: false
  5. ---

在菜单中添加链接. 编辑主题配置文件, 添加 categories 到 menu 中

  1. menu:
  2. categories: /categories

RSS 链接
编辑主题配置文件 rss 字段

  1. rss: false

禁用Feed链接

rss:
默认使用站点的 Feed 链接, 需要安装 hexo-generator-feed 插件
浏览http://localhost:4000/atom.xml查看是否生效

  1. rss: http://your-feed-url

指定特定的链接地址, 适用于已经烧制过 Feed 的情形

自定义页面
以关于页面为例
新建一个 about 页面

  1. hexo new page "about"

编辑 source/about/index.md:

  1. title: About
  2. date: 2014-11-1 11:11:11
  3. ---
  4. About Me

菜单显示 about 链接, 主题配置文件中将 menu 中 about 前面的注释去掉

  1. menu:
  2. about: /about

9.网站代码上传

设置完毕,为避免本地代码丢失,可以将hexo下的所有文件提交一份到服务器。

  1. #create project on gitcafe.com
  2. mkdir hexo-source
  3. cd hexo-source
  4. git init
  5. # copy all files in 'hexo' folder here
  6. git add ..
  7. git commit -m 'first commit'
  8. git remote add origin 'git@gitcafe.com:username/hexo-source.git'
  9. git push -u origin master

10.安装优化文件插件

  1. cnpm install hexo-all-minifier --save

配置下
打开配置文件

  1. _config.yml

加入下面的配置

  1. html_minifier:
  2. enable: true
  3. exclude:
  4. css_minifier:
  5. enable: true
  6. exclude:
  7. - '*.min.css'
  8. js_minifier:
  9. enable: true
  10. mangle: true
  11. output:
  12. compress:
  13. exclude:
  14. - '*.min.js'

完事了,这样子就能够对 html css js 进行压缩了,其实他还支持图片压缩。



关注TinyMeng博客,更多精彩分享,敬请期待!
 

上一篇:上一篇

下一篇:下一篇

站点信息