Mac下利用Hexo+GitHub搭建自己的博客

一、mac下利用hexo搭建一个博客,已有公司git账户的情况

已有公司git账户,就用改配置文件的方式一,如果没有,可以用方式二。
因为git账户默认配置是global的,会相互覆盖,如果不觉得来回切换麻烦,也可以参考文章设置多个Git帐号:https://my.oschina.net/csensix/blog/184434 或者 http://www.jianshu.com/p/fbbf6efb50ba

整理一下安装流程:

1.hexo是基于nodejs的,需安装nodejs,安装nodejs最好选择homebrew

2.首先查看电脑是否安装ruby,因为homebrew安装依赖ruby

3.安装顺序:homebrew---->nodejs---->hexo


安装homebrew

  1. ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"  
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装nodejs

  1. brew install node  
brew install node

在安装nodejs过程中,提示如下警告:

  1. You have Xcode 8 installed without the CLT;  
You have Xcode 8 installed without the CLT;
根据提示进行安装

安装hexo

  1. sudo npm install -g hexo  
sudo npm install -g hexo

创建文件夹

  1. mkdir blog  
  2. cd blog  
  3. hexo init  
mkdir blog
cd blog
hexo init

此时blog文件下出现了很多文件和文件夹,如下图所示:



生成一套静态网页

  1. hexo generate /** 生成一套静态网页 **/  
  2. hexo server /** 在服务器上运行 **/  
hexo generate /** 生成一套静态网页 **/
hexo server /** 在服务器上运行 **/

在浏览器上运行http://localhost:4000就能看到如下的网站首页:


撰写博客

进入终端,使用cd命令进入到有Hexo框架的目录里面,输入:

  1. hexo new post "我的第一篇博客"  
hexo new post "我的第一篇博客"
随后出现如下的消息:

  1. INFO  Created: ~/blog/source/_posts/我的第一篇博客.md  
INFO  Created: ~/blog/source/_posts/我的第一篇博客.md
证明创建文章成功,“我的第一篇博客”这个md文件会创建在source/_posts/的文件下。该md文件在自动生成时会带有一些属性:

title:     定义了博文的标题

date:   定义了创作博文的时间

tags:   定义了博文的标签

除了这个三个属性以外我们还可以扩展一些属性:

update:  定义了最后修改的时间

comments:定义能否评论此博文(默认为true)

categories: 定义了博文的种类

配置文件  --  _config.yml说明

Hexo的每一个功能的配置文件都是_config.yml, 具体说明看下面的注解:

  1. # Hexo Configuration  
  2. ## Docs: https://hexo.io/docs/configuration.html  
  3. ## Source: https://github.com/hexojs/hexo/  
  4.   
  5. # Site                 ##修改以适应搜索引擎的收录  
  6. title: Hexo            ##定义网站的标题  
  7. subtitle:              ##定义网站的副标题  
  8. description:           ##定义网站的描述  
  9. author: jason jwl      ##定义网站的负责人  
  10. language:              ##定义网站的语言,默认zh-Hans  
  11. timezone:              ##定义网站的时区  
  12.   
  13. # URL  
  14. ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'  
  15. url: http://yoursite.com   ##定义网站访问的域名  
  16. root: /      ##定义所在Web文件夹在哪个目录  
  17. permalink: :year/:month/:day/:title/  ##定义时间格式  
  18. permalink_defaults:  
  19.   
  20. # Directory  
  21. source_dir: source   ##定义从哪个文件夹获取博客资料  
  22. public_dir: public   ##定义生成静态网站到哪个文件夹  
  23.   
  24. archive_dir: archives  
  25. category_dir: categories  
  26. code_dir: downloads/code  
  27. i18n_dir: :lang  
  28. skip_render:  
  29.   
  30. # Writing  
  31. new_post_name: :title.md # File name of new posts  
  32. default_layout: post  
  33. titlecase: false # Transform title into titlecase  
  34. external_link: true # Open external links in new tab  
  35. filename_case: 0  
  36. render_drafts: false  
  37. post_asset_folder: false  
  38. relative_link: false  
  39. future: true  
  40. highlight:  
  41.   enable: true  
  42.   line_number: true  
  43.   auto_detect: false  
  44.   tab_replace:  
  45.   
  46. # Category & Tag  
  47. default_category: uncategorized  
  48. category_map:  
  49. tag_map:  
  50.   
  51. # Date / Time format  
  52. ## Hexo uses Moment.js to parse and display date  
  53. ## You can customize the date format as defined in  
  54. ## http://momentjs.com/docs/#/displaying/format/  
  55. date_format: YYYY-MM-DD  
  56. time_format: HH:mm:ss  
  57.   
  58. # Pagination  
  59. ## Set per_page to 0 to disable pagination  
  60. per_page: 10  ##定义每一页多少条博客  
  61. pagination_dir: page  
  62.   
  63. # Extensions  
  64. ## Plugins: https://hexo.io/plugins/  
  65. ## Themes: https://hexo.io/themes/  
  66. theme: landscape  ##定义使用的主题  
  67.   
  68. # Deployment  
  69. ## Docs: https://hexo.io/docs/deployment.html  
  70. deploy:  
  71.   type:  
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site                 ##修改以适应搜索引擎的收录
title: Hexo            ##定义网站的标题
subtitle:              ##定义网站的副标题
description:           ##定义网站的描述
author: jason jwl      ##定义网站的负责人
language:              ##定义网站的语言,默认zh-Hans
timezone:              ##定义网站的时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com   ##定义网站访问的域名
root: /      ##定义所在Web文件夹在哪个目录
permalink: :year/:month/:day/:title/  ##定义时间格式
permalink_defaults:

# Directory
source_dir: source   ##定义从哪个文件夹获取博客资料
public_dir: public   ##定义生成静态网站到哪个文件夹

archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10  ##定义每一页多少条博客
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape  ##定义使用的主题

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:


注意:

另外修改这些属性时,请注意格式,属性和值要空一个格,比如theme: landscape。


本地同步github

在github上new Repository,并命名为xxxxx.github.io(xxxxx是你github的账号名),然后把本地项目提交到github的远程项目。具体操作步骤可以参考我以前写的一篇博客:http://blog.csdn.net/jasonjwl/article/details/49682217。然后在浏览器上输入xxxxx.github.io就能访问自己的博客了。

同步到github,发现网站访问不了。并且github给我发了一封邮件,如下所示:


测试不是主题的问题。

个人建议不通过手动同步github,优先考虑通过修改_config.yml让hexo帮助我们同步github,方便快捷,配置如下所示:

  1. deploy:  
  2.   type: git  
  3.   repo: https://github.com/xxx/xxx.github.io.git  
  4.   branch: master  
  5.   xxx为个人github的name  
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git
  branch: master
  xxx为个人github的name
配置完后,运行 

  1. hexo deploy  
hexo deploy
或者

  1. hexo d  
hexo d
如出现以下的错误:

  1. ERROR Deployer not found: git  
ERROR Deployer not found: git
请运行以下命令进行安装:

  1. npm install hexo-deployer-git --save  
npm install hexo-deployer-git --save
再次运行hexo deploy。工程同步成功!

当你增加新的文章或者插件时,可以通过以下三个命令进行同步操作:

  1. hexo clean  
  2. hexo generate  
  3. hexo deploy  


二、没有公司的Git账户的情况

屡一下思路 
1.首先hexo是基于nodejs的,所以必须安装nodejs 
2.安装nodejs方法很多,我选择homebrew安装方式,所以需要安装它 
3.安装homebrew就很简单了,mac自带ruby脚本功能,一句话搞定 
4.hexo提交部署github需要使用git工具,所以需要安装git,用homebrew的话也是一句话搞定 
5.OK整理一下安装顺序(homebrew-nodejs-hexo-git) 
思路屡清楚了,下面安装方法整理一下 
1.安装brewhome,一句话搞定

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)

2.0 安装nodejs 
2.1 第一种方式,brewhome安装,一句话搞定

brew install node

2.2 第二种方式,前提是已经安装好Xcode和git,安装git方法在下面介绍

git clone git://github.com/joyent/node.git
cd node
./configure
make
sudo make install

2.3 第三种方式,下载源码( http://nodejs.org/download/ ),编译执行同上 
3.0 安装hexo 
3.1 第一种方式,用nodejs自带npm安装

npm install -g hexo
hexo init
npm install

3.2 第二种方式,下载源码( http://www.nodejs.org/download/ ),编译执行 
4.0 安装git 
4.1 第一种方式,homebrew安装,一句话搞定 
sudo brew install git 
4.2 第二种方式,前提是已经安装好Xcode

curl -O http://kernel.org/pub/software/scm/git/git-1.7.5.tar.bz2
tar xjvf git-1.7.4.1.tar.bz2
cd git-1.7.4.1
./configure --prefix=/usr/local
make
sudo make install
which git

4.3 第三种方式,下载源码( https://www.kernel.org/pub/software/scm/git/ ),编译执行同上 
4.4 第四种方式:图形界面安装OpenInGitGui( https://code.google.com/p/git-osx-installer ),但是天朝被墙 
4.5 配置 
4.5.1 检查SSH key

cd ~/.ssh

4.5.2 备份已有的key,(如果有的话)

mkdir key_backup
mv id_rsa* key_backup

4.5.3 生成SSH key

ssh-keygen -t rsa -C "xxxx@xxxx.com

4.5.4 将SSH key添加到Github 
登录到GitHub页面,Account Settings->SSH Public Keys->Add another key将生成的key(id_rsa.pub文件)内容copy到输入框中,save。 
4.5.5 测试连接

ssh git@github.com

4.5.6 设置个人信息

git config --global user.name "treason258”
git config --global user.email ma.tengfei2008@163.com

5 修改hexo根目录下_config.yml文件(xxxx为你的github账户名称)

deploy:
  type: github
  repo: git@github.com:xxxx/xxxx.github.io.git
  branch: master


6 注册github账号,新建名为xxxx.github.io的repository 
7 到这,Hexo博客搭建已经完成了,并且可以git提交到github上,通过访问xxxx.github.io就可以访问本博客


参考:

http://blog.csdn.net/jasonjwl/article/details/52887575
   http://www.jianshu.com/p/ecd51e8ef2fa
   http://npm.taobao.org/
   https://www.zhihu.com/question/24422335
   http://notes.iissnan.com/
   http://theme-next.iissnan.com/getting-started.html
http://www.tuicool.com/articles/iI77na
https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值