ShenYuanLuo的博客

记录学习的点点滴滴

0%

Mac平台下使用Hexo+Github搭建博客流程

发表于 更新于 分类于 阅读次数：

本文记录的是在 Mac 环境下搭建“Hexo+Github”博客流程

第一步：Github 环境搭建

  1. 首先申请 Github 账号

  2. 登陆已经申请的 Github 账号

    1. 点击右上角的“+”图标，创建一个新仓库 。
      创建仓库

    2. 在** Repository name **输入 userName.github.io,其中 userName 是 Github 上的账户名称，仓库名称格式必须这样填写，否则无法部署博客；随后点击 Create repository 按钮提交即可。
      填写仓库信息

    3. 仓库创建成功后，会有一个有一个 SSH 地址，形如 git@github.com:userName/userName.github.io.git 。
      SSH 地址

第二步、添加 SSH 公钥

  1. 使用 ssh-keygen 命令生成key pair，生成成功后，会在 ~.ssh 目录下生成密钥文件：私钥 id_rsa 和公钥 id_rsa.pub

    1
    $ ssh-keygen -t rsa -C "email"

    其中 -t rsa 表示使用密钥的加密类型，还可以为dsa；-C 设置注释文字，比如你的邮箱“YourEmail”，不一定要是github注册邮箱

    创建公钥
    公钥信息

  2. 为 github 用户添加 SSH 公钥

    添加公钥

  3. 至此，Github 环境已搭建完成

第三步：本地环境配置

  1. 安装 HomeBrew

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

    HomeBrew 是一个非常有用的软件包管理系统，类似于Linux下的apt-get

  2. 安装 Git

    1
    $ sudo brew install git

  3. 安装 Node.js

    前往 Node.je官网下载 Node.js pkg 安装包，双击安装即可

  4. 安装 hexo

    1
    $ npm install -g hexo-cli

    -g 或 –global 表示全局安装模块，如果没有这个参数，会安装在当前目录的node_modules子目录下。

第四步、配置 hexo

  1. 初始化 Hexo

    1
    $ hexo init userName.github.io

    其中 userName.github.io 为本地文件夹的名字（可以随便起）。

    安装成功如图：

  2. 安装依赖包

    1
    2
    $ cd userName.github.io 
    $ npm install

    其中 npm install 表示安装当前目录package.json文件中配置的dependencies模块。

    至此，最基本的本地 hexo 博客已经搭建好了，可以本地查看：

    1. 生成静态网页
      1
      $ hexo generate
    2. 启动服务
      1
      $ hexo server
    3. 然后到浏览器输入 http://localhost:4000/看看初步效果:
      Hexo效果

第五步、定制 hexo 信息和主题

  1. 安装Next主题,这是一个比较受欢迎的 hexo 主题，目前 github 上有 7392个 start

    1
    2
    $ cd userName.github.io
    $ git clone https://github.com/iissnan/theme themes/next

  2. **hexo 基础定制:**编辑文件

    1
    $ vi ~/userName.github.io/_config.yml

    编辑相关内容：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Site
    title: shenyuanluo的博客  # 博客标题
    subtitle: 子标题 # 博客子标题
    description: 记录学习的点点滴滴 # 博客简介
    author: shenyuanluo # 博客作者
    language: zh-Hans # 博客语言：中文（默认是英语）
    theme: next # 博客主题
    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    	 type: git # 使用 Git 发布
       	 repo: https://github.com/username/username.github.io.git    # 刚创建的Github仓库
        branch: master

Hexo站点设置

Hexo部署设置

第六步：编写博客

  1. 在 ~/userName.github.io/source/_posts下创建博客，如创建一个名为MyFirstHexo.md的文件,

    1
    hexo new "MyFirstHexo"

    此命令会在 _posts 目录下会生成文件 MyFirstHexo.md

  2. 编辑文件内容 

    1
    2
    3
    4
    5
    6
    ---		
    title: MyFirstHex
    date: 2017-04-03 15:47:12	
    tags: [标签1,标签2] #文章标签，多于一项时用这种格式
    ---
    ## 这是我的第一篇博客文章，用于测试 Hexo 博客！

  3. 在本地测试看下效果

    1
    2
    $ hexo generate
    $ hexo server

  4. 安装hexo-deployer-git自动部署发布工具

    1
    $ npm install hexo-deployer-git --save

第七步：发布到 github.io

  1. 输入如下命令

    1
    2
    3
    $ hexo clean
    $ hexo generate
    $ hexo deploy

  2. 如果出现 INFO Deploy done: git 说吧发布成功

    成功发布

hexo的目录结构

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

全局配置 _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# Hexo Configuration
# Docs: http://hexo.io/docs/configuration.html
# Source: https://github.com/hexojs/hexo/
# Site #站点信息
title:  #标题
subtitle:  #副标题
description:  #站点描述，给搜索引擎看的
author:  #作者
email:  #电子邮箱
language: zh-CN #语言
# URL #链接格式
url:  #网址
root: / #根目录
permalink: :year/:month/:day/:title/ #文章的链接格式
tag_dir: tags #标签目录
archive_dir: archives #存档目录
category_dir: categories #分类目录
code_dir: downloads/code
permalink_defaults:
# Directory #目录
source_dir: source #源文件目录
public_dir: public #生成的网页文件目录
# Writing #写作
new_post_name: :title.md #新文章标题
default_layout: post #默认的模板，包括 post、page、photo、draft（文章、页面、照片、草稿）
titlecase: false #标题转换成大写
external_link: true #在新选项卡中打开连接
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
highlight: #语法高亮
 	  enable: true #是否启用
 	  line_number: true #显示行号
 	  tab_replace:
# Category & Tag #分类和标签
default_category: uncategorized #默认分类
category_map:
tag_map:
# Archives
2: 开启分页
1: 禁用分页
0: 全部禁用
archive: 2
category: 2
tag: 2
# Server #本地服务器
port: 4000 #端口号
server_ip: localhost #IP 地址
logger: false
logger_format: dev
# Date / Time format #日期时间格式
date_format: YYYY-MM-DD #参考http://momentjs.com/docs/#/displaying/format/
time_format: H:mm:ss
# Pagination #分页
per_page: 10 #每页文章数，设置成 0 禁用分页
pagination_dir: page
# Disqus #Disqus评论，替换为多说
disqus_shortname:
# Extensions #拓展插件
theme: landscape-plus #主题
exclude_generator:
plugins: #插件，例如生成 RSS 和站点地图的
- hexo-generator-feed
- hexo-generator-sitemap
# Deployment #部署，
deploy:
	  type: git
 	  repo: 刚刚github创库地址.git
 	  branch: master

注意

1
配置文件的冒号“:”后面有一个空格

Hexo常用命令：

1
2
3
4
5
6
7
8
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页，可以在 public 目录查看整个网站的文件
hexo server #本地预览，'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存，**强烈建议每次执行命令前先清理缓存，每次部署前先删除 .deploy 文件夹**

Hexo常用命令简写：

1
2
3
4
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

参考资料

  1. 手把手教你建github技术博客by hexo
  2. 5分钟 搭建免费个人博客