1. 程式人生 > >Mac下利用Hexo+GitHub輕鬆搭建自己的部落格

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檔案下出現了很多檔案和資料夾,如下圖所示:


生成一套靜態網頁

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。

本地同步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,方便快捷,配置如下所示:

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