Mac - Hexo+GitHub轻松搭建本身的博客

     Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其余渲染引擎）解析文章，在几秒内，便可利用靓丽的主题生成静态网页。官方文档传送门。Hexo的安装是个很快速简便的过程，但依然仍是有很多坑。这里记录个个人安装过程(这是个人Hexo+GitHub+Next+Markdown我的网站)，给你们一些参考。

 

整理一下安装流程：

1.hexo是基于nodejs的，需安装nodejs，安装nodejs最好选择homebrew 2.首先查看电脑是否安装ruby，由于homebrew安装依赖ruby 3.安装顺序：homebrew---->nodejs---->hexo

 

 

安装前提

须要安装 Node.js 和 Git 两个应用程序，直接到官网安装最新版本便可，如已安装请跳过。

• Node.js 官网

• Git 官网

安装Hexo

安装完Node.js 及 Git 后，便可使用npm来安装Hexo：

$ npm install -g hexo-cli

 

初始化Hexo

建立一个目录用来做为你的blog目录，例如 MyBlog；并在该目录中进行Hexo的初始化：

$ hexo init MyBlog $ cd ~/MyBlog/ $ npm install

 

 

新建完成后，获得如下目录：

· |-- _config.yml |-- package.json |-- scaffolds |-- source |   |-- _drafts |   |-- _posts |-- themes

 

至此，你就完成了Hexo的安装及初始化，接下来咱们就能够进行本地的预览啦： 
先安装hexo server

$ sudo npm install hexo-server

 

而后生成静态页面并打开hexo本地服务

$ hexo generate (或 hexo g) $ hexo server

 

按命令行提示，打开 http:\/\/localhost:4000\/ 便可看到默认主题的默认页面了。 
可能加载会很慢，由于默认主题中使用了些Google的资源，后面更换主题就会快不少了。

 

安装homebrew

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

 

 

 

安装nodejs

brew install node

 

 

 

在安装nodejs过程当中，提示以下警告：

You have Xcode 8 installed without the CLT;

 

根据提示进行安装

 

安装hexo

sudo npm install -g hexo

 

 

建立文件夹

mkdir blog cd blog hexo init 

 

 

此时blog文件下出现了不少文件和文件夹

 

生成一套静态网页

 

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

 

 

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

 

撰写博客

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

hexo new post "个人第一篇博客"

 

 

随后出现以下的消息：

INFO  Created: ~/blog/source/_posts/个人第一篇博客.md

 

证实建立文章成功，“个人第一篇博客”这个md文件会建立在source/_posts/的文件下。该md文件在自动生成时会带有一些属性：

 

title: 定义了博文的标题 date: 定义了创做博文的时间 tags: 定义了博文的标签

 

除了这个三个属性之外咱们还能够扩展一些属性：

update: 定义了最后修改的时间 comments：定义可否评论此博文(默认为true) categories: 定义了博文的种类 配置文件 --  _config.yml说明

 

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

# 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。

 

 

hexo的基本配置

如下是hexo配置文件 _config.yml 的基本内容及基本设置，更多个性化设置请参考官方文档：

# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site ##页面信息 title: Who's Blog ##标题，即浏览器标签栏显示的内容
subtitle: Why so serious? ##副标题 description: ##描述，简介 author: Charles Wei ##做者 language: zh-CN ##语言 timezone: Asia/Shanghai ##时区 # URL ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://wwww.charleswei.me ##域名，后面自定义域名后，写在这里，用 .github.io的话，这里用默认的不用改
root: / permalink: :year/:month/:day/:title/ permalink_defaults: # Directory ##文件目录，可不改 source_dir: source public_dir: public tag_dir: tags archive_dir: archives category_dir: categories code_dir: downloads/code i18n_dir: :lang skip_render: # Writing ##静态页面生成属性，可不改 new_post_name: :year-:month-:day-: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: indigo # Deployment ##git部署关联 ## Docs: https://hexo.io/docs/deployment.html
deploy: type: git repo: github: https://github.com/glassweichao/glassweichao.github.io.git
  branch: master

 

 

 

主题配置

Hexo具备高定制的主题效果，你能够从Hexo的主题库中选择合适的主题，也能够本身制做。 
以我如今使用的indigo主题为例。首先将主题库clone到MyBlog目录下的themes目录：

git clone git@github.com:yscoder/hexo-theme-indigo.git themes/indigo

 

安装less，主题使用less做为css预处理工具：

npm install hexo-renderer-less --save

 

安装feed,用于生吃RSS：

npm install hexo-generator-feed --save

 

安装json-content，用于生成静态站点数据，提供搜索功能的数据源：

npm install hexo-generator-json-content --save

 

开启标签页：

hexo new page tags

 

修改MyBlog/source/tags/index.md的源数据： layout: tags noDate: true comments: false
--- 修改hexo配置文件_config.yml中的主题标签： theme: indigo 最后修改主题配置文件MyBlog/themes/indigo/_config.yml： #添加新菜单项遵循如下规则 # menu: # link: fontawesome图标，省略前缀，本主题前缀为 icon-，必须 # text: About 菜单显示的文字，若是省略即默认与图标一致，首字母会转大写 # url: /about 连接，绝对或相对路径，必须。 # target: _blank 是否跳出，省略则在当前页面打开 menu: home: text: 主页 url: / archives: url: /archives tags: url: /tags github: url: https://github.com/glassweichao 
 target: _blank link: text: 测试 url: /404 rss: /atom.xml #你的头像,替换掉 indigo/source/img/logo.jpg 便可 urlavatar: /img/logo.jpg # Content tags: title: 标签 #是否开启分享 share: true #是否开启搜索 search: true #是否大屏幕下文章页隐藏导航 hideMenu: true #是否开启toc #toc: false 关闭toc toc: list_number: true # 是否显示数字排序 #浏览器标签栏小图标 favicon: /favicon.ico

 

 

本地同步github

在github上new Repository，并命名为xxxxx.github.io(xxxxx是你github的帐号名)，而后把本地项目提交到github的远程项目。而后在浏览器上输入xxxxx.github.io就能访问本身的博客了。

同步到github，发现网站访问不了。经测试不是主题的问题。

我的建议不经过手动同步github，优先考虑经过修改_config.yml让hexo帮助咱们同步github，方便快捷，配置以下所示：

deploy: type: git repo: https://github.com/xxx/xxx.github.io.git ( xxx为我的github的name)
  branch: master

 

  

配置完后，运行 

hexo deploy  或者 hexo d

 

如出现如下的错误：

ERROR Deployer not found: git

 

请运行如下命令进行安装：

npm install hexo-deployer-git --save

 

再次运行hexo deploy。工程同步成功！

 

与Github帐户关联

首先须要去Github注册一个帐号，并新建一个名为 [your_account].github.io 的仓库。 
而后打开前面建立的MyBlog目录下的 _config.yml 文件，在修改最下方的deploy为： 
*注意，冒号后面必定要加空格

deploy: type: git repo: gihub: https://github.com/[your_account]/[your_accout].github.io.git
  branch: master

 

接下来安装hexo的git部署，在命令行中执行：

$ npm install hexo-deployer-git --save

 

最后，将生成静态页面并部署到github的仓库中，执行：

$ hexo d -g 或者 $ hexo generate $ hexo deploy

 

当提示 ** INFO Deploy done: git  即上传成功，这时就能够经过 **http:\/\/[your_account].github.io 来访问你的我的站点了。 
这里涉及了github pages 的相关内容，有兴趣的能够去了解一下。

 

 

当你增长新的文章或者插件时，能够经过如下几个命令进行同步操做：

hexo clean hexo generate (hexo g) hexo deploy (hexo d) hexo server (hexo s)