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

今年4月份就在mac下利用hexo搭建了一个博客,因换了一台电脑,项目丢失,需重新安装。
整理一下安装流程:

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

2.首先查看电脑是否安装ruby,因为homebrew安装依赖ruby
3.安装顺序:homebrew---->nodejs---->hexo


安装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文件下出现了很多文件和文件夹,如下图所示:
Mac下利用Hexo+GitHub轻松搭建自己的博客
文章图片




生成一套静态网页

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

在浏览器上运行http://localhost:4000就能看到如下的网站首页:
Mac下利用Hexo+GitHub轻松搭建自己的博客
文章图片


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

hexo new post "我的第一篇博客"

随后出现如下的消息:

INFOCreated: ~/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。



本地同步github
【Mac下利用Hexo+GitHub轻松搭建自己的博客】在github上new Repository,并命名为xxxxx.github.io(xxxxx是你github的账号名),然后把本地项目提交到github的远程项目。具体操作步骤可以参考我以前写的一篇博客:http://blog.csdn.net/jasonjwl/article/details/49682217。然后在浏览器上输入xxxxx.github.io就能访问自己的博客了。
同步到github,发现网站访问不了。并且github给我发了一封邮件,如下所示:
Mac下利用Hexo+GitHub轻松搭建自己的博客
文章图片



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

deploy: type: git repo: https://github.com/xxx/xxx.github.io.git branch: master xxx为个人github的name

配置完后,运行
hexo deploy

或者
hexo d

如出现以下的错误:
ERROR Deployer not found: git

请运行以下命令进行安装:
npm install hexo-deployer-git --save

再次运行hexo deploy。工程同步成功! 当你增加新的文章或者插件时,可以通过以下三个命令进行同步操作:

hexo clean hexo generate hexo deploy















    推荐阅读